MFA Process: Wireframing

Role: UX & UI Designer, Wireframing, Visual Design

Below are projects created between 2015-2018.

Blog, Topic, and Article Page

Liberty Brooch

I designed the blog page around existing drupal content types for blog functionality. The menu page allowed users to choose articles, and the topic page let the Web team easily organize the page within the other departments and sections of mfa.org. I also changed the body type from the MFA’s serif face to Open Sans.

It is now used as an online newsletter for MFA membership tiers, such as Museum Council.

Collections Search Page

Collection Search of Posters

I redesigned the collections search page and some interactive functionality. With the development team, I broke down the different types of facets used to search the collection and decided which would work for each amount of data. I changed the hover animation and also designed the new “Advanced search” feature, which expands the user’s specific search functionality.

Collections Landing Page

For the Collections Landing Page I created wireframes that incorporated the Collection sections and on view objects, and used imagery to represent the encyclopedic experience of
the museum.

---

Mobile Navigation Redesign

Read more about the project here

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.