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





Museum Homepage Research & Usability Study

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




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

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.





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




Typographic & Layout Design Rounds








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 for mobile.




Mobile Navigation Redesign


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



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.



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. 



Lectures and Courses

Expand your knowledge

MFA Film

Studio Art Classes
Performance Art


Solution Synoposis

The new design added new content-tiers to the page, below the fold. These new tires included visit information, event programming, objects from the collection, and a featured gallery space block, which also stood as a wild-card block. This gave MFA.org a range of options in displaying messaging and offerings.

Marker