Los Alamos National Laboratory design system
I led the creation of an all-new design system and directed the redesign of Los Alamos National Laboratory’s web products. Due to the direct contributions of over 40 team members, the Lab’s new internal and external digital products offer a significantly improved user experience, functionality, and branding, and are able to support a wide variety of scientific, editorial, and multimedia content.
Los Alamos National Laboratory is one of the world’s most innovative multidisciplinary research institutions. Established in 1943 to conduct scientific research for the Manhattan Project, the lab now specializes in a wide range of progressive science, technology, and engineering across many fields, including space exploration, geophysics, renewable energy, supercomputing, medicine, and nanotechnology.
Introducing Mesa
Los Alamos National Laboratory is located on a remote and beautiful mesa in the high desert of northern New Mexico. The Mesa design system is named after the bedrock on which the Lab is built.
Mesa is a collection of components, patterns, guidance, and code that supports the implementation of consistent experiences across all of LANL’s web products, including lanl.gov, the Lab’s intranet, and software products.
LANL believes that how we do our work is as important as what we do. Mesa delivers on this brand promise by prioritizing accessible design, providing researched solutions, and building trust in the Lab’s mission with transparent and reliable implementation.
Components
In addition to managing the product roadmap and budget, I designed many of the initial UI elements alongside my team. As Mesa advances and gains requirements, we iteratively expand our library of components.
In the wake of introducing LANL’s ‘One Lab, One Voice’ rebrand, we realized that new and improved results require new and improved ways of working. I encouraged my team to adopt a systems mindset and I spearheaded a number of resource and organizational advancements.
I reorganized my 70-person communications team to an agency model and created the Lab’s first dedicated UI/UX team and Multimedia Strategy team. I procured new tools, including Asana and Google Analytics, transitioned my product teams from Adobe XD to Figma, and migrated our institutional websites from a 10+ year-old legacy CMS to a headless CMS with AWS cloud hosting.
Before 2022
Prior to advancing our primary lanl.gov webpages with the introduction of Mesa, users primarily encountered one-off touchpoints. Patterns and styles were inconsistent, the sitemap was bloated, and much of the content was obsolete. Our web presence instilled little trust and presented no brand journey.
After 2022
Now our external webpages and content are dynamic and engaging. The look and feel is cohesive, earning the trust and respect of our stakeholders, peers, and customers. The content is active with a clear call to action, and the Lab’s brand and web products are an effective multimedia platform.
Discover site
Discover.lanl.gov is a one-stop shop for all Lab stories, and includes news articles, magazine features, podcasts, and videos. It’s how we share our research and message with our community, customers, and stakeholders.
I was able to leverage my experience in journalism and visual storytelling to launch a world-class editorial product. Dynamic tagging allows users to filter, browse, and search by topic and media type. Story templates feature a wide variety of WYSIWYG layout options for editors to highlight compelling and interactive multimedia content.
Eight months after launch, landing page views more than doubled and All News views increased 13-fold.
Flexibility and collaboration
In addition to the core lanl.gov website and intranet, LANL hosts hundreds of internal and external software products, virtual tours, dashboards, and classified webpages. My team is responsible for many, but not all, of these platforms.
Mesa supports multiple code implementations. Though released with an initial focus on React.js components, it is extendable for use in other frameworks and languages. This allows Mesa to be a catalyst for collaboration across previously-siloed development teams — and all users are encouraged to contribute patterns back to the system.
