top of page

CLIENT

CATEGORY

National Museum of African American History & Culture

Design System, Component Usage Guidance, Brand Designer and Developer Collaboration

IN HOUSE

Color Of Change

ABOUT THE ORGANIZATION

NMAAHC is the 19th Smithsonian Institution museum and is dedicated to sharing the life, history, and culture of African Americans.

I worked with NMAAHC for 5.5 years on their extensive digital presence. NMAAHC's design system grew over the years, and started to lose consistency and efficiency. The team knew that a design system refinement would be critical to ensure brand consistency and editorial efficiency. 

PROJECT

SYSTEMATIZING MUSEUM DIGITAL

DISTINGUISHING FACTORS

  • Design System Audit: We conducted an in-depth audit of the current design system.

  • Transition to a new design system tool: We considered different design system tools and determined the best route forward for our specifications.

  • Component Usage Guidance: We wrote guidance for the team of copy writers and editors for how to use each component and element in the system.

Step 1: Audit the current system

The design team audited the current visual design system by taking stock of how each component and their variations were used across the site. It was important to see how the content related to each component.

 

We then assigned a score to each component and variation based on a variety of factors, such as the prevalence of that component, the impact that a refinement would have, and how straightforward it might be to redesign and develop the component.

figma.png

Step 2: Select a design system platform

I guided the team for what elements we needed from a design system platform, such  as an ability to write usage guidance and notes about each component and one that the engineering team would be able to implement seamlessly into the existing website back-end.

I then worked with the engineers to research the different platforms and we 

Work with the engineers to research the different platforms and what works best

Consider what other design system used.

Screenshot 2024-09-26 at 2.28.33 PM.png
Screenshot 2024-09-26 at 2.29.15 PM.png

Step 3: Redesign the elements and components

I worked with the visual designers to determine the best ways to update all elements and components. We leaned on the existing assets and refined and extended them as needed. We focused the most time on the components that scored the lowest in the audit. We also accounted for additional fields as needed to ensure that the components would be designed for future uses.

Impact

The new design system improved NMAAHC's brand consistency by reducing redundant components by one-third and developing component usage guidelines, ensuring accurate component usage.

WHAT’S NEXT STARTS HERE.

Get in touch through LinkedIn.

Step 4: Write component usage guidance for writers

A component is only as good as the content that it encases.

 

For each component, I wrote specific guidance for the writers and editors for the specific use cases and how to use each variation. We also designed and led trainings on the new design system so that each team member had the opportunity to learn about the new system and ask questions.

Step 5: Guide the implementation of the new design system

I worked with the full team of engineers, designers, project managers, and product owner to ensure that the revised and refined design system was implemented into the current website, so that the updates were immediately visible on the front-end for our users.

bottom of page