Hutchins Center for African & African American Research
Established in 2013 after a donation from the Hutchins Family Foundation, the Hutchins Center for African and African American Research at Harvard University supports research on the history and culture of people of African descent the world over.
This major center for scholarship required a new identity and website to be developed on a very short timeline, in order to coincide with the research fellowship application cycle and allow for their online submission. To accomplish this goal, Bruce Mau Design (BMD) and bv02 collaborated to deliver a site that reflects the Hutchins Center’s identity, mission, and activities, and make its constituent institutions accessible to a wider audience across diverse platforms.
The Hutchins Center is host to six existing institutes, chief among them the W. E. B. Du Bois Institute for African and African American Research. At this pivotal point in its history, the Institute recognized an opportunity to redefine its brand and digital presence to better reflect this larger change in its identity. With a web presence that was outdated in appearance, structure, and functionality, the Institute identified a website redesign as being key to these efforts. To that end, Bruce Mau Design (brand & web design) and bv02 (web development) were engaged to completely redesign their website. The new Hutchins Center site needed to engage a broader general audience, increase the number of qualified researchers/fellows associated with the Center, and consolidate its reputation as the hub for African and African American research in the United States.
With these core objectives informing the initiative, BMD and bv02 developed the new website with the following aesthetic and feature set. To ensure a cohesive graphical interface for the entire website, a new brand for the Hutchins Center demonstrates both the individuality of each institute and their belonging as part of the research center. Focused on the “H” of the center’s name, each institute is identified by a characteristic colour applied to one element of the “H”. This brand architecture is prominent on the Homepage and landing pages, creating a cohesive visual identity. To direct traffic to the institute landing pages, the Homepage balances information and imagery about the constituent institutes of the Center, featuring the rich art of the galleries, the research from the institutes and the application process for Fellows. Users dig into the main landing pages either from the main navigation or from the Homepage.
To ensure that ongoing programs are given as much weight as research projects and pull forward archives and galleries, a dedicated design was created for each institute’s landing page to communicate their equal importance. Deep content for all programs and projects are pulled up for the user with the card system, giving prominence to all work throughout the Hutchins Center. To enhance the Fellowship program, the program has been provided with its own landing page and appears on the Homepage as an equal. The Fellowship application system was also improved to provide more flexibility and ease of use for application evaluators. Content management is streamlined using Drupal 7.0’s native book system to organize hundreds of pages of content, while providing ease of use for website administrators.
The Hutchins Center website redesign project was successfully completed on a very aggressive timeline, and was launched in the fall of 2013 to rave reviews and media attention. The website was intended to improve the Hutchins Center’s brand story — showcasing their expanded scope and prominence and integrating the fellowship application process, art galleries and institutes. In the first few months following the website launch, we saw a significant change in user behaviour that suggests success in this redesign — analytics reported an overall 10% increase in site visits, with a 17% increase in unique visitors and a 5% increase in returning visitors during this period. The Hutchins Center website initiative is instructive of how form and function can complement each other, with leading edge design working in tandem with a robust technical implementation.