Redesigning Mfa.org’s Design System

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

In May 2015 I was introduced to the mfa.org’s ongoing project of redesigning elements and sections throughout the website. The website’s CMS system runs on Drupal 7 and is built to be responsive, so I’ve designed elements to work in both mobile and desktop. It’s taught me a lot as a UX Designer, such as WCAG AA color contrast standards to little complex systems like pagination controls.

Below are projects created between 2015-2018.

Typography & Access

Problem

Mfa.org’s typography did not meet WCAG AA color contrast standards and users had issues with legibility and contrast.

Solution

I redesigned the typography in the body section of mfa.org’s Drupal content page, in order to comply with WCAG AA standards.

I changed the Open Sans and Libre Baskerville that was already in use to a darker color for the body copy, made the type larger, and added varied weights to the Heading styles. I changed the hover link style for the body copy to be more apparent to the user. I also introduced a darker red for link styles, that stayed in the same Mfa.org color palette, but remained WCAG AA compliant in combination with the gray background colors used on the site.

Typography Style Guide

A mfa.org type style guide was created as a tool for the web team’s reference while creating pages in Drupal. It also helped the iteration of creating new content pages going forward for the Mfa’s website.

Webforms

School Group Visit Request Form

Problem 

Webforms on the Mfa’s website were confusing users with typographic hierarchical issues, issues with low contrast and spacing.

Solution 

Redesign of typography and web forms. I darkened the radial buttons, drop downs, and checkboxes and changed all the type to black.

Universal Credits

William Merritt Chase Exhibition Page

Problem

Manual input of credit information into Drupal was inconsistent and created extra workload for content creators.

Solution

The developer team created a link between credit information and image slides in Drupal, so that the credit information was attached with whatever derivative of the image Drupal created for the website. This new functionality made it easier to edit art credit information if changes needed to be made.

My front-end UX solution was to design a button and on-off state on top of the image, where a user could toggle the information. The new design also aided us with rights and licensing for crediting artwork on the page.

Pagination

Collections Search Page

Problem

Mfa’s website pagination was not compliant with WCAG AA Accessibility Standards on the web and the pagination was broken on mobile.

Solution

I created the visual design of the pagination as a block system and changed the type to black and dark red; This fixed issues of type crashing on mobile and contrast.

Audioplayer

Prelude in D Minor from L'Art de Préluder, 1719...

Problem

Various objects in the collection database contained audio files, but Mfa.org’s design system lacked a visual design for audio players on object pages.

Solution 

I created both a dark and light version of the audio player, so that the audio player’s design worked in both collection tours that have black backgrounds and objects pages that have white backgrounds.