Mesa Design System Case Study

LA-UR-24-25501

The Product

Mesa is a Design System—a collection of pre-built, reusable assets—that allows web designers and developers at the Lab to build consistent web experiences faster. Mesa unifies the Lab’s identity among the Lab’s web products.

Project Duration

February 2023 - September 2024

The Problem

The Lab didn’t have a shared knowledgebase for design and code, which led to inefficiencies and inconsistent designs

The Goal

Help product teams build more quickly and efficiently while supporting consistency across products.

  • Sasha Zivaljevic

    WEB TEAM LEAD

  • Mercedes Martinez

    UI|UX TEAM LEAD

  • Zach Spangler

    DEVELOPMENT LEAD

  • Kendra Castle

    PM AND LEAD UI DESIGNER

  • Mia Jaeggli

    UI/UX DESIGNER

  • Jib Kiattinant

    UI/UX DESIGNER

  • Velvet Lazo

    UX RESEARCHER

  • Ryan Alaya

    UX RESEARCHER

  • Matt Hanes

    LEAD WEB DEVELPER FOR NAV

  • Barry Low

    DEVELOPMENT TECH LEAD

  • Hugh Roper

    SEO TECH LEAD

Process strategy

Our process model is an adaptation of the d.school’s 5 stages of design thinking and the double diamond model. The adaptation accommodated the complexity of the project and organizational processes. An example of this adaptation was broadening the “empathize” phase to “discover,” which provided a better conceptual structure to this early phase of the project. Ideate, prototype, and test. The resulting structure translated seamlessly into project planning.

Understanding the Users

MESA DESIGN SYSTEM

User Research

Summary:

We conducted a variety of user research for the project. We began with user interviews, collecting feedback from development teams across the Lab. We also conducted user testing, gathered from our external website users, and created personas for our primary users. Inconsistency, inefficiency, and confusion around accessibility guidelines were identified as primary concerns for our users.

User Research Pain Points:

Inconsistency:
Because we didn’t have a shared knowledge base for design and code, teams were figuring things out on their own for every project instead of being able to access shared resources. This led to inconsistent designs, even across similar product types.

Inefficiency:
Instead of being able to share previous designs and codes with each other, many users were rebuilding the same components over and over again.

Accessibility:
Users weren’t sure what accessibility standards they should be following or how execute those standards.

User Research Interviews:

We conducted user interviews with developers at the Lab to determine what they would find most useful in a design system. We determined some common things our developers want.

Master CSS styles:
A standard downloadable CSS/SCSS file.

Accessibility guidance:
Information on what accessibility standards to follow and how to meet those standards.

Component and layout standards:
Design guidance for all screen sizes

Asset repository:
A repository for assets like font files and icons.

Extended color palette:
Extended colors apps with usage guidance to be used in applications.

Design templates:
Standard templates for common layouts and patterns.

Persona: Designer

MESA DESIGN SYSTEM

Persona: Designer

Avery Brock is a UI/UX designer who needs a shared design library with Figma components because they work on a variety of projects and once and need a faster design and iteration process.

Persona: Developer

Liam Vetter is a developer who needs a shared design and code repository because they are often having to build products from the ground up.

Starting the Design

MESA DESIGN SYSTEM

Design: overview

We conducted a competitive analysis of other design system websites to determine what content we wanted to include in the design system.

Ultimately, we chose to include four sections: an overview of the components and how they’re used, CSS tokens and styles, accessibility guidelines, and developer tools.

The overview section provides detailed guidance on where and how to use components, best practices, formatting and style guidelines, and interactions.

We also provide information about related components to provide more clarity to users on the differences between similar components

Design: style

CSS tokens and styles are provided in the Styles section, along with visual examples of variations.

Design: accessibility

We provided detailed accessibility guidance around keyboard interactions, behaviors, and design and development recommendations.

Design: developer tools

Developer tools include a sandbox for users to test components as well as documentation and a code repository.

Color Palette Extension

MESA DESIGN SYSTEM

Color Palette Extension: overview

As we were refining our designs for Mesa, another gap became apparent — our brand guidelines, including our color system, had been created for material products, not digital ones.

User experience:

Visual hierarchy
Because the existing palette consisted primarily of shades of blue, it’s difficult to draw users to important content

User frustration
This was one of the factors that caused users to feel frustrated when using our websites and applications

Accessibility:
The existing palette didn’t have enough contrast built in, making it inaccessible for users with color blindness or low vision. Ensuring that our products are equitable for all of our users was a priority for our team.

“A product style guide, especially one that has a lot of information or visualization in the form of charts and graphs, needs a really wide and comprehensive palette.

You need to have colors that are far beyond what’s in the brand style guide. If you have information visualization, you should plan for all colors.”

— Janice Rohn, Nielsen Norman Group, Design Systems & Pattern Libraries

Digital products:
Working with limited colors made it difficult to create useful experiences for Lab products like:

  • Internal apps

  • Alerts and notification

  • Data visualization

  • Featured and special content

  • Information hierarchy

Color palette: process

We initially pulled additional colors from the extended palette created for the Lab Agenda, but these colors were developed for a different use case and weren’t optimized for our needs. Issues included poor contrast ratios, lack of color harmony, and difficulties with limited color options. This palette also resulted in difficult experiences for users with colorblindness.

Color palette: journey map

We discovered that there was an emotional decline for some of our website users. We determined that this stemmed from difficulty navigating our website. We wanted to make sure our new color palette brought clarity to our users and supported our website’s content instead of distracting from it.

Color palette: accessibility

Impacts to Digital Environments

SiteImprove, a tool used to analyze website accessibility, flagged pages on our website for lacking the minimum contrast ratio of 4:5:1. It was the second highest accessibility issue overall.

Users with colorblindness and low vision can experience:

  • Difficulty distinguishing between elements and content

  • Cognitive overload

  • Eyestrain‡

  • Negative impact on information retention

Color Palette: design principles

Thoughtful

  • Is context aware and grounded in real users experience

  • Has applications that can’t be met by the primary colors

  • Supports rather than conflicts with the current brand palette

Equitable

  • Adheres to accessibility standards

  • Improves accessibility for underserved populations

Flexible

  • Can be implemented across diverse use cases without breaking the core brand

Clear

  • Is tested, structured, and facilitates best practices

  • Provides both messaging and task guidance

Consistent

  • Supports consistent and meaningful patterns; follows Mesa guidelines and best practices

  • Feels like LANL’s brand adheres to broader conventions in application and web design

Efficient

  • Is designed specifically for UI/UX

  • Increases task efficiencies in LANL’s digital experiences

Color palette: solution

Finding inspiration in the landscape

“After we chose the name Mesa, I started thinking about the landscape of New Mexico as a grounding element in our color palette.

Our current colors worked well with this concept — the blues of the sky, the green of cacti, the oranges and reds of the buildings and landscape. The spectrum of our current accent color held a good ochre, and I chose the pink, yellow, and purple from pottery, cactus blossoms, and other elements in the landscape.”

– Kendra Castle, Mesa Architect

Color palette: accessibility

Selecting and testing colors

We started by looking at the color relationships that existed within our current palette. Ultimately, our secondary blue provided colors that worked well together and provided the functionality we needed.

Once we selected our initial color palette, we tested our options in various use cases to ensure that they would work well in context.

The full palette

The purple, pink, turquoise, and ochre all have color wheel relationships with our secondary blue.

The team developed a yellow range that complemented the other colors on the palette and worked well in darker shades.

Color palette: usage guidelines

Tier 1: Broad application

Tier 1 colors may be used as needed across the internal and external sites.

Color palette: usage guidelines

Tier 1: Usage Example

Web apps

Using green to direct users to primary CTAs and distinguish an action from information.

Green is also calming in a context that is often stressful.

The grey background is 50-70% of the screen. The neutral grey recedes better on the visually dense page than the current hue-forward grey.

Choices are researched and tested for usability and accessibility.

Tier 2: Internal products and status messages

Tier 2 colors may be used in combination with Tier 1 colors for functional applications.

Tier 1 and 2: Usage

  • Blue = more information routing

  • Green = approval, submit, confirm

  • Red = destructive, delete, irreversible action

Tier 3: Webapps and data visualization

Tier 3 colors may be used in limited cases that require a range of additional colors.

Tier 1 and 2: Usage

They may also be used for tagging and color coding as needed. Designers should start with the primary color palette and only extend into the Tier 3 palette when necessary.

These include status messages and alerts.

Colors in this tier may be used for reports, data visualization, and banners denoting development environments to help developers avoid making critical mistakes.

Tier 3 colors allow for more clarity in data visualization. Darker colors hold more visual weight. You can see here in the example using only our current colors, the darker pieces of the pie draw the eye and may even seem bigger than lighter sections. With the extended palette, we can be intentional about visual weight based on the type of data being presented.

Color palette: usability & accessibility

While some colors are similar, users can still tell them apart.

Expanding the range of our palette allowed for higher contrast ratios, and the new color choices gave us more versatility when needed.

Color palette: usability & accessibility

A three-tiered color palette

The limitations of the previous palette were increasingly restrictive with our expanding use cases, particularly when color is used as a tool that goes beyond messaging.

An expanded palette with clear usage guidelines helped meet our users’ needs and prevented the arbitrary use of colors beyond the brand palette.

Refining the Design

MESA DESIGN SYSTEM

Usability Study: Parameters

Participants:

8 Laboratory developers

Length:

10-15 minutes

Location:

United States, remote

Study type:

Moderated usability study

Usability study: parameters

Language

There was less confusion when we used clear, direct language instead of internal jargon

Organization

The organization of the navigation was confusing for users

Filter and search

Users felt the ability to filter and search in the navigation made their jobs easier

Design: overview

Based on the feedback from our user testing and what we learned while building out the design system, we made a few updates to the designs.

Design: navigation

Based on the feedback from our user testing, we updated the language and organization of our navigation and implemented the search and filter function.

Design: landing page

We updated the site’s color scheme using our extended color palette and collaborated with the visual designer team on a new banner image.

Design: components

We made the top navigation more prominent so that users could more easily navigate through sections.

We included thorough style documentation, utilizing tokens to make both the design and development process faster and more consistent.

We provided tokens and examples for typography and colors. These included explicit usage guidelines to help alleviate uncertainty about where and how these should be employed.

Design: accessibility guidelines

We provided tokens and examples for typography and colors. These included explicit usage guidelines to help alleviate uncertainty about where and how these should be employed.

Going Forward

MESA DESIGN SYSTEM

Going forward: overview

Impact:

Users feel that Mesa addresses a gap in the Lab’s product development process and makes their jobs easier.

One user stated that it’s “super to have an approved, supported, standardized front-end framework/layout” at the Laboratory.

What we learned:

We learned that, while Mesa already helps designers and developers at the Lab do their jobs more efficiently, the continued success of the design system will rely on community contributions and adoption.

Going forward: next steps

1

Adding a React code base for developers to utilize in their projects

2

Allowing designers and developers and to contribute designs and code so that Mesa can support a variety of tech stacks

3

Expanding the components and guidance offered

LA-UR-24-25501

Los Alamos National Laboratory, an affirmative action/equal opportunity employer, is operated by Triad National Security, LLC for the National Nuclear Security Administration of U.S. Department of Energy under contract 89233218CNA000001. By approving this article, the publisher recognizes that the U.S. Government retains nonexclusive, royalty-free license to publish or reproduce the published form of this contribution, or to allow others to do so, for U.S. Government purposes. Los Alamos National Laboratory requests that the publisher identify this article as work performed under the auspices of the U.S. Department of Energy. Los Alamos National Laboratory strongly supports academic freedom and a researcher's right to publish; as an institution, however, the Laboratory does not endorse the viewpoint of a publication or guarantee its technical correctness.