Museum of fine arts Homepage Redesign

Role: UX & UI Designer, Design Research, CSS Animation

︎ www.mfa.org

One of the first projects I was introduced to at the MFA was the ongoing redesign of the MFA’S homepage. In Spring 2017, the museum went live with the Phase One.

Phase one consisted of research, wireframes, responsive design with mobile first thinking, rounds of typographic design and design, CSS Animation, and brainstorming content production.

Phase one does not include the header or footer of the page.

museum homepage research

In 2015 a usability study was done by Bently University that concluded:

Only call to action is a scrolling carousel of images, however, hovering over image does not indicate content in clickable.
Layout does not allow for changeable content other than the carousel, which overwhelms the information on the page.
Users of mfa.org and visitors to the museum had little to no knowledge of the MFA’s programming or what gallery spaces looked.

I added museum homepage research and current web trend research into the process of redesigning the homepage.
(+ Line about using the homepage banner to promote big events at the museum and community open house days)

rounds of wireframes

I started by creating wireframes that followed the Bently Usability Study and added new content sections below the fold.

The content sections broke up the page into three tiers:

Exhibitions and Large announcements
Programs with links to program areas
Collections and Gallery Sections
Mfa’s Social Media and Breaking News Sharing

Mobile First and Modular Responsive Design

Since the website is built to be responsive, I designed out each section so that everything would easily stack onto itself. I also followed the visual aesthetic from the Mobile Navigation Redesign I previously worked on, which you can read about here. I kept the visit information towards the top of the page in the redesign, so that it stayed in an easily accessible area in the mobile design.

in 2015 a usability study was done by Bently University, on mfa.org’s homepage that concluded:

Only call to action is a scrolling carousel of images, however, hovering over image does not indicate content in clickable.
Layout does not allow for changeable content other than the carousel, which overwhelms the information on the page.