MFA Mobile Navigation Redesign

Role: UX & UI Designer, Design Research, Wireframing, Prototyping

In February 2016 the development team and I tackled redesigning Mfa.org’s mobile navigation.

Problem

The website is built to be responsive and has a collapsed menu in the mobile design, but the menu was broken on mobile and contained information architecture, which confused the user. 

Usability Study & Google Analytics 

Using the usability tests and frequent tracking of Google analytics on the site, the Web Team discovered that users were confused while navigating mobile devices because of the mixup of information in the mobile menu. A high rate of bailing out during the user’s journey also frequently occured because of the broken mobile menu.

Information Architecture Restructuring

I broke down the mobile navigation architecture in order to match the current desktop navigation, which is designed to be a fly-out menu, and removed irrelevant links such as the log-in page to access the Drupal backend system of the website. I designed the secondary header navigation on the desktop (Today at the MFA, Shop, Press) to exist within navigation on mobile, since there was no UX need to differentiate that these menus were different to the user during the mobile experience.  

Wireframing and Prototyping 

I created several UX navigation designs, using Balsamiq, during the wireframing process. I wireframed different types of mobile menu functionality such as an overlaid fly menu and a drop down accordion menu. I also used the wireframe method to begin sketching out designs for the button functionality that would open the menu.

Visual Design

In the design, I merged the Mfa’s logo with the menu bar to save space in the mobile design when closed.  

I designed the menu of the mobile navigation with alternating gray zebra stripes and added these darker grays to the Mfa.org color palette, which would allow black and red type to fall in accordance with WCAG AA color contrast web standards. A larger search bar allowed for easier typing on mobile devices. Red iconography kept the branding in-line with mfa.org.

Solution Synopsis. 

The Mobile Navigation Redesign has made mfa.org a more friendlier mobile experience. The larger size and type of the menus helped users with navigation and made the mobile menu WCAG AA compliant. We’re recently gathered some analytics on the use of the new mobile menu and are planning to re-visit the design in the near future.