MY ROLE
UX Research, UI Design, Front-End Development
TIMELINE
2018 - ongoing
Challenge
Applications across the intranet at Sandia National Laboratories lacked a common design language and included a multitude of interaction design patterns. This led to a disjointed user experience for members of the workforce, who rely on these applications to get work done.
Above: Examples of the disparate designs across applications at Sandia
Objectives
Improve consistency and cohesion across applications by providing a set of design standards, patterns, and documentation of usage and best practices.
Research
User Interviews and Affinity Diagramming
We first reached out to members of the workforce to gain insight into sentiments about the ecosystem of applications at Sandia National Labs. We interviewed a spectrum of our anticipated user base, which after initial research, we determined could be anyone of the 12,000+ employees at the labs.
To narrow our focus, we identified use cases of the design system. We continued to interview members of the general, but we targeted application design and development teams more heavily. Once we had a substantial amount of data about current user pain points, processes and usage of internal application, we conducted an affinity diagramming exercise which helped to extract high-level themes and patterns in the data.
Above: On-site affinity diagramming activity
Competitive Analysis
In addition to our research with employees, I conducted a competitive analysis of other enterprise design systems across various industries. In this review, we identified what we thought was working most effectively and where we could draw inspiration. These included design systems by Atlassian, IBM, and USWDS (United States Web Design System). Every design system is unique, but there were patterns that we could refer.
Design
Our component design philosophy was based off Brad Frost's Atomic Design principles, which breaks down components into five distinct organic levels. This approach to design (and later developing) building blocks for higher-level elements, helped make this effort more manageable, efficient and consistent.
Given the very small size of our team (3 UX Designers, 1 Front-End Dev, 1 UX Researcher), we had to prioritize what components we would customize and design first. Our previous research gave us a great starting point by helping to see what components were used most heavily across applications. We documented these in the wiki, which we used as the source of truth for status updates, and documentation.
Above: Example of components documented in our wiki with status updates for design, development and documentation
As we worked on component design, we also determined our foundations. These consisted of base-level attributes including typography, color and spacing. I led in-person design reviews and the team stayed engaged offline through remote collaboration.
Above: Example of communication about design work in our wiki space
As we designed components, we documented design attributes as design spec files for reference. Spec files were created in Sketch and shared across the team. The would be very valuable later as reference when we moved to development.
Above: Example of Accordion component padding specs
Above: snl-blue, a primary color in our palette
Above: Examples of various component designs in Thunderbird UI
Presentation Site
Wireframing
While we worked on designing our components, I began designing the presentation site that would display our components, foundations, and design resources. I first ideated on wireframes that were presented to users for feedback about the information architecture and general display of the site content.
Above: Low-fidelity wireframes of the Components page (top) and Accordion page (bottom)
Interactive Prototypes
Once feedback sessions of the low-fidelity wireframes were completed, I began working on a set of interactive, high-fidelity prototypes in Axure. These prototypes included a more refined visual presentation and represented much of how the final site design would appear and function. These also enabled us to conduct usability studies where we could validate design decisions using real-world tasks based on case studies.
Above: Thunderbird UI home page
Above: Components Overview page listing Thunderbird UI components
Documentation
I authored much of the Thunderbird UI documentation, which provided guidance, best practices and “do’s and dont’s” about using our components. Users found the documentation immensely helpful when implementing Thunderbird UI in their applications.
Above: Example of Alert documentation where I documented best practices for users of Thunderbird UI.
Designer Resources
Based on earlier user interview data, one of the requests we often heard from designers was for us to provide design assets based on our style guide and component designs. Based on our tooling available, we decided to provide Adobe color palettes, an Axure component library and a component library for Sketch. I create an Axure component library that would enable designers to simply drag and drop components onto their canvas when designing. This increased efficiency and consistency in the design of high-fidelity interactive prototypes.
Above: Axure component library improving rapid prototyping in Axure
Project shift / cross team collaboration
Multiple groups across Sandia were involved in related design efforts from application UX design, to communications and marketing. In order to promote further consistency across visual design groups, I proposed combining all design services under one roof. Thunderbird UI was renamed "Thunderbird" and we re-evaluated the information architecture of our site to encompass the various design groups.
I modified the design of the site to be a more holistic representation of design at Sandia and incorporated content from each of the groups involved.
Above: Revised home page design to include branding and communications
Above: New Web landing page design
Results
The Thunderbird UI Design System made an immediate impact on the Sandia intranet.
As the design system became implemented in new applications and older applications were refactored with Thunderbird UI, users noted a drastic improvement in the consistency of application interfaces and interactions.
Application teams noted the time savings of Thunderbird UI, in that UI components wouldn’t have the be styled and developed over and over again. Our design system could be plugged in and would just work.
While there was some reluctance to implement a new system, our team communicated the benefits of Thunderbird UI through outreach and support. Members of the workforce who were reluctant at first, became convinced on the benefits.
Our design system became an integral part of the software development lifecycle and a requirement for most internal applications.
An estimated 30% decrease in the amount of time required for application teams to design and build new applications.