UX Researcher
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 – July 2024
The Product:
Mesa Design System
Role
Tasks Included
Tools
UX Researcher
Creating competitive analysis, conducting user interviews, creating personas, journey mapping, conducting surveys, usability testing
Figma, Userzoom, Microsoft Teams, Google Sheets, Google Forms
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.
Los Alamos
UI/UX Team
The UI/UX team is a dedicated team at LANL that ensures all web and interactive experiences are user-friendly and accessible.
​
"We create digital experiences with users in mind."
Our Process
Understanding the User
Summary:
We conducted a variety of user research methods for the project. We began with user interviews and 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 Pain Points
01. 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 across the lab, even across similar product types.
02. 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 wasting valuable time and resources.
03. Accessibility
Users weren’t sure what accessibility standards they should be following or how to execute those standards to best accommodate those in need.
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: Avery Brock
Avery Brock is a UI/UX designer who needs a shared library with Figma components because they work on a variety of projects. They want and need a faster design and iteration process.
Goals:
Speed up design and iteration process
Maintain consistent design standards across products
Streamline developer hand-off
Frustrations:
Unsure what precise design guidelines to follow
Creating components from scratch while balancing multiple projects at once
Lack of flexibility in current components
Avery's Journey Map:
Persona 2
Developer: Liam Vetter
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.
Goals:
Build products that meet user needs and adhere to the Lab’s brand standards
Improve design and development process
Share code and resources with other designers and developers at the Lab
Frustrations:
It’s difficult to know what other product teams are working on and what components have already been created
For projects without a dedicated UI/UX designer, it can be difficult to know what design standards to meet
Unsure what accessibility requirements to meet or how to meet them
Liam's Journey Map:
Starting the Design
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.
Overview Section:
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.
Style:
CSS tokens and styles are provided in the Styles section, along with visual examples of variations.
Accessibility:
We provided detailed accessibility guidance around keyboard interactions, behaviors, and design and development recommendations.
Developer tools:
Developer tools include a sandbox for users to test components as well as documentation and a code repository.
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.
Color Palette: User Experience Pain Points
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
Digital products:
Working with limited colors made it difficult to create useful experiences for Lab products like:
-
Internal Apps
-
Data Visualization
-
Information Hierarchy
-
Alerts and Notifications
-
Featured and Special Content
Accessibility Findings:
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.
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
-
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: Research
In June-July 2023, we surveyed Lab teams about their thoughts and feelings on contrasting tones with ultramarine.
Color Palette: Design Principles
Our UI/UX design principles helped guide our color palette choices.
Clear
-
Is tested, structured, and facilitates best practices
-
Provides both messaging and task guidance
Efficient
-
Is designed specifically for UI/UX and reduces ambiguity in the design process
-
Increases task efficiencies in LANL’s digital experiences
Equitable
-
Adheres to accessibility standards
-
Improves accessibility for underserved populations
Consistent
-
Supports consistent and meaningful patterns; follows Mesa guidelines and best practices
-
Feels like LANL’s brand and adheres to broader conventions in application and web design
Flexible
-
Can be implemented across diverse use cases without breaking the core brand
Thoughtful
-
Is context aware and grounded 
 in real user needs
-
Has applications that can’t be met by the primary brand colors
-
Supports rather than conflicts with the current brand palette
Color Palette: Solution
A Three-Tiered Color Palette
We wanted to keep our current palette, but expand our options to meet the needs of our users. To achieve this, we created an extended palette with strict usage guidelines.
Tier 1: Broad Application
Tier 1 colors may be used as needed across the internal and external sites.
Secondary Blue: Tonal Extension
Extending the tonal options for the secondary blue does two things: it achieves more complex information hierarchies and lets us design for context without deviating from the core LANL brand.
Green: Balanced and Tonal Extension
The green is both functional and accent. We tested three versions and settled on one that harmonized with the ultramarine and secondary blues. This version was preferred because it activated the blue tones and is neither too warm or too cool.
Neutral Grey: Functional and Tonal Extension
The neutral grey range is functional. We need a set of neutral values with less personality as a tool for structuring and grouping information.
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 were 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.
These include status messages and alerts.
Tier 1 and 2 Usage Example:
Mental Mapping:
-
Blue=more informative, 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.
Colors in this tier may be used for reports, data visualization, and banners denoting development environments to help developers avoid making critical mistakes.
Tier 1, 2, and 3 Usage Example:
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.
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: Accessibility & Usability
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: Summary
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:
Study Type:
Moderated Usability Study
Participants:
12 Laboratory Developers
Location:
United States, Remote
Length:
10-15 Minutes
Usability Findings:
Organization:
The organization of the navigation was confusing for users
Language:
There was less confusion when we used clear, direct language instead of internal jargon
Filter and Search:
Users felt the ability to filter and search in the navigation made their jobs easier
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.
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.
Landing Page
We updated the site’s color scheme using our extended color palette and collaborated with the visual design team on a new banner image.
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.
Tokens
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.
Accessibility Guidelines
Our accessibility guidelines include recommendations for developers.
Mesa Design: Going Forward
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.
Next Steps:
1
Adding a React code base for developers to utilize in their projects
2
Allowing designers and developers to contribute designs and code so that Mesa can support a variety of tech stacks
3
Expanding the components and guidance offered