Museum of Fine Arts Homepage Redesign

Role: UX & UI Designer, Design Research, CSS Animation
https://www.mfa.org/

One of the first projects I was introduced to at the MFA was the ongoing redesign of the Mfa’s homepage. Phase one went live in Spring 2017. UX work consisted of research, wireframes, responsive design with mobile first thinking, rounds of type design, CSS Animation, and brainstorming for content production.
Phase one did not include the header or footer of the page.

New mfa.org Homepage

The Problem

A usability study done by Bently University found that the Mfa’s homepage gave users and visitors to the museum little to no knowledge of programming events, what a visitor’s experience would be upon entering the gallery spaces, or news about museum acquisitions, closings, etc. Our developer team also gathered a list of technical problems to address, such as the use of video in the homepage carousel, which taxed the page with loading.

Process:

Usability Study ︎ Research ︎ Ideation ︎ Wireframing ︎ Mobile Prototyping ︎ HTML & CSS Animation ︎ Visual Design ︎ Testing ︎ Maintenance

Bently University Usability Study

Old mfa.org Homepage

In 2015 Bently University ran a usability study on the Mfa’s homepage that concluded three areas of improvement:

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

2. The 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.

Museum Homepage Research

I added museum homepage research and UX trends research into the process of redesigning the homepage in order to keep the design fresh and up to date. Currently, museum websites nationally have been redesigning their homepages and websites in order to switch to responsive design, clean type, and ease of use for their visitors. Two of the museums in this graphic below have since redesigned their websites.

Wireframing

I created wireframes, using Balsamiq, that followed the results from the Bently Usability Study and added new content sections below the fold that expanded upon the Mfa’s programming and collection areas. 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

For the visual design, I introduced new colors to the Mfa’s website color palette, that were more frequently used in the print brand. I tried some layouts with Helvetica Condensed Neue, which is also a part of the Mfa’s print brand. I created the design around the imagery used on the website since it’s very dynamic. I also kept the type in the exhibition banner minimal in order to avoid image rights issues with overlaying text on artwork or photography.

Below is a video of the visual design rounds.

Mobile First and Modular Responsive Design

Since the Mfa’s website is responsive, I created a modular design for easy stacking in mobile. 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 accessible area in the mobile design.

Next came the program section with interchangeable blocks for the Mfa’s Programming offerings. Last is the collections section, with a link to a current art object on view, within the museum, and another link to a featured gallery space. The Gallery block also stood as a wild-card block, for random content.

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 animated hover states for 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

Solution Synopsis

The Mfa’s new Homepage gave us a range of options for displaying the museum’s offerings with captivating imagery and distinct messaging. The new content-tiers to the page presented the user turned visitor with a sense of what to do on their visit. The addition of museum homepage research, the Bently University Usability Study, and current web trend research into the process helped support the need for innovative and creative thinking.

The new homepage also created a new production flow for the web team, in order to keep up its maintenance. Creating the videos for the old homepage banner was a lengthy undertaking, involving the Intellectual Property department. By replacing videos with still images, the creation of the assets can be done entirely within the Creative and Interactive Media department. The new links out to different areas of the museum’s website, allowed the developer team to add analytics to each section tier to measure audience engagement.

Agiles & Epics

The Mfa’s Homepage was created under the agile methodology of improving a product over time through iterative design. Phase Two of the redesign will include the website’s header and footer, and the eventual addition of a social media and news section.

Analytics

Below are some highlights of the analytics from the Mfa’s Homepage after launch:

Fewer users going to the Exhibition page from the homepage may indicate the usefulness of exhibition dates in exhibition banner.
Lower traffic to the Visit page from the homepage and a higher homepage bounce rate suggest that users find the homepage Museum hours helpful.
Many users are clicking on the new “Buy Admission” button, but they do not seem to do so with the intent to buy admission tickets.
The Programs page is seeing an increase in traffic from the homepage, thanks to the Calendar button, and many are interacting with the events listing; for some users, the Programs page did not align with their expectations.
The program types promoted in the Programs tier are seeing a jump in traffic from the homepage, especially the Gallery Activities and Tours page, but it is unclear if it has directly led to an increase in program attendance.

3 Month period
Written by James Zhen, Web Master, Museum of Fine Arts, Boston