Accessible website design with interactive infographic

MIT McGovern Website accessible design
MIT McGovern InstituteDigitalDigitalAccessibilityUX DesignWebsite DevelopmentInfographicsInfographicsProcess GraphicsIndustryIndustryEducationDurationDuration8 monthsDevelopmentDevelopmentCheck out the interactive Explore the Brain sectionUser experienceUser experiencePolls identified very different user groupsAwardsAwardsHermes Creative AwardsProject teamProject teamJulia FrenkleCreative Director, PartnerSkadi GidionsenUX & Digital DirectorEllery MooreyArt Director & UX DesignerEmily KnappSenior DesignerCasey McGeeSenior Designer15page templates were created for this website

A Truly Relevant Redesign

MIT has a distinguished international reputation for innovation and excellence. However, the existing website and style of the MIT McGovern Institute did not reflect this brand—not on a strategic, visual, or technical level.

Creative an accessible website design was an exciting project for all the potential for improvement, and for the work that makes McGovern so important to society. It needed an updated look and feel, excellent user experience, updated content, integration points for automatic website updates such as publications and events, and an easy to use content management system. The site also features an interactive infographic.

We worked with the team at McGovern on additional services: to articulate their brand, redesign their logo, print and digital newsletter, infographics, reports in addition to accessible website design.

UX Design

The first challenge was to identify the actual audience, vs the perceived audience. We identified two very different user groups as the primary audience: Researchers and General Information Seekers. Each of these have very different goals, the former to stay on top of the latest research findings, the latter to find information about a particular disease or disorder. Our goals was to ensure that both groups are able to find relevant content quickly and easily and we our work was informed by digging into some serious analytics on the old site.

Accessible Website Design

In addition to being interactive and reflecting the McGovern Institute’s innovative brain research, we needed the site to be accessible for users using assistive technologies. The fun “Explore the Brain” section, which is mainly for and audience of General Information Seekers, educates and gives insight into the amazing research the faculty does. Given the interactivity, we had to create different solutions for different devices, very much influenced by user behavior on the different devices. And of course, we needed to make sure that everything was compliant with level AA of the WCAG 2.0.

The design was based on our discussions with the team to identify the brand we wanted to reflect. With vibrant color, high contrast, and a clean content structure, we were able to strike the right balance between easy reading and navigation, exciting and contemporary look and feel, and an inviting and approachable tone.

Visit the Website

MIT McGovern Website accessible design
MIT McGovern Website accessible design

Interactive Infographic

For the general audience on the website, people who are not brain researchers, we created an infographic that allows people to interact and find their way into the interesting research stories.

We wanted to allow user to interact with the layers of the brain the Institute studies and be able to access research stories that happen at each of those layers. A zoom animation was leveraged to represent the interaction between layers.

With the design and animation, we were able to create a striking infographic that is exciting and fun to use while discovering the research stories. The last “layer” of the infographic allows users to ask a question about the brain, which adds another fun layer of interactivity.

The infographic is accessible as well as mobile responsive, to provide a great user experience for everyone.

Email Design

Sending a monthly email can be time consuming! In order to make the preparation and sending easy, we designed and developed a feature in WordPress that allows website admins to pull content from the website automatically into the newsletter. The newsletter design is automatically formatted and cohesive with the website design. With the click of a button, the newsletter is pulled into Mailchimp and sent, yeah!

Animation

We created an animated neuron on the site for a news article about the discovery of Williams Syndrome. The graphic started with a custom illustration and was animated to visualize the research findings.

MIT McGovern Website accessible design
MIT McGovern Website accessible design

If I could summarize working with Opus with one word it would be synergy. From our initial conversation to the hectic pre-launch crush, the Opus team was professional, inventive and always collaborative. I particularly appreciated the project management expertise throughout the project. In summary, Opus delivered a beautiful website (on time and within budget) that we are immensely proud to share with the public.

Julie PryorCommunications Officer, MIT McGovern Institute for Brain Research