Museum of Fine Arts Homepage Redesign

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



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.

Mfa.org Homepage Design Identity





Bently University Usability Study
Museum Homepage Research


In 2015 bently university ran a usability study on mfa.org’s homepage that concluded three areas of improvement.



Old MFA Homepage Design
1. Only call to action is a scrolling carousel of images, however, hovering over image does not indicate content in clickable.

2. Layout does not allow for changeable content other than the carousel, which overwhelms the information on the page.

3. 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.

I added museum homepage research and current web trend research into the process of redesigning the homepage.




Wireframing

I created wireframes that followed the Bently Usability Study and added new content sections below the fold. The content sections broke up the page into 3 tiers


 



Tier 1 Exhibitions and Large announcements


Tier 2 Programs with links to program areas



Tier 3 Collections and Gallery Sections
Tier 4 Mfa’s Social Media and Breaking News Sharing






Visual Design Design Rounds







Mobile First and Modular Responsive Design


I designed out each section so that everything would easily stack onto itself for mobile.


Under the exhibition banner and mobile nav menu. I kept the visit information towards the top of the page in the redesign: Today’s Hours, Buy Admission, and Calendar, so that it stayed in an easily accessible area in the mobile design.

Next came the program section with Interchangeable blocks for MFA Programming offerings. Last is the collections section, with links to a current art object on view and a view into one of the open galleries at the MFA.


I also followed the visual aesthetic from the Mobile Navigation Redesign, which you can read about here.




CSS3 Animation

For the last step of the project I worked with the developers on smooth animated hover states for all button links and transitions for the carousels on the page. Below are some examples built with code.


Lectures and Courses
MFA Film

Studio Art Classes
Performance Art


Iterative Solution Synopsis


The new design gave mfa.org a range of options in displaying the MFA’s offerings with captivating imagery and distinct messaging.


New content-tiers to the page include visit information, event programming, objects from the collection, and a featured gallery space block, which also stood as a wild-card block.

It also gave mfa.org a way to measure audience engagement with analytics built behind each section tier. 

Marker