MFA Homepage Redesign: Phase One

Museum of Fine Arts, Boston

One of the first projects I was introduced to at the MFA was the ongoing redesign of the museum’s homepage. Visit the page here. 

In Spring 2017, the museum went live with the Phase One.

Phase One
Research, Wireframes, Rounds of Responsive-design, HTML & CSS testing of desktop hover states, Content Production, and Testing took about 18 months and does not include the header or footer of the page. 






Desktop Design



Original Design

The new design added new content-tiers to the page, below the fold. These new tiers included visit information, event programming, objects from the collection, and a featured gallery space block, which also stood as a wild-card block.

The idea of additional content came from a usability study done by Bently University, where users and visitors to the museum had little to no knowledge of the MFA’s programming or what gallery spaces looked like. I added museum homepage research and current web trend research into the mix as well.


Phase One Design




Mobile First 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. 


Wireframes