Thunderbird UI design system
Product Designer and Developer
Visual design, front-end development, user research
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.
Hypothesis
Through a library of shared UI components and visual standards, Sandia’s intranet would be more visually consistent. Users would know what interaction patterns to expect, therefore improving the user experience. Application teams would become more efficient and could focus on more time intensive tasks.
Process
1. Use cases and competitive analysis
We documented our use cases and conducted competitive analysis of other design systems. Examples included Shopify, Atlassian and IBM.
2. Understand pain points
A series of user interviews were conducted. We used affinity diagramming to build themes that exposed needs, pain points and sentiments.
3. Component inventory
An inventory of the most heavily used UI components was taken across applications at Sandia.
4. Component design
I led a team of designers to create our UI component specifications. Regular design reviews were held to discuss interaction patterns that would best suit the workforce and Sandia brand.
5. Wireframing and prototyping
Myself and other team members iterated on page layouts for the presentation of our design system. I then transformed these wireframes into high-fidelity interactive prototypes in Axure.
6. Usability studies
Usability studies were conducted to test the effectiveness of our component designs and presentation site. Real-world tasks were simulated using my interactive prototypes.
7. Write documentation
General guidance, best practices, accessibility and “do’s and dont’s” were documented for our components to be used most effectively.
8. Development
I was a primary contributor to the SASS styling and JavaScript development of components. I also led the rapid development of the design system presentation site.
9. Socialize and iterate
We socialized and trained members of the workforce on implementing the design system. We also encouraged feedback from members of the workforce to make continuous improvements.
Deliverables
The Thunderbird UI design system required the work of the entire team, including talented UX researchers, designers and developers. While I was involved in all facets of the process, my primary involvement was in the following activities.
Component library creation
I led the design of and documentation of our component library and held regular design reviews.
We used Brad Frost’s Atomic Design Methodology when designing and implementing our components. This methodology breaks down components into smaller elements that when combined, form larger elements and eventually templates and pages.
Wireframing and prototyping
I designed and iterated on low-fidelity wireframes of the Thunderbird UI presentation site. These became high-fidelity prototypes in Axure, which were used when conducting usability studies.
Development
I styled our components to meet the design specifications and added functionality for components. I was also the primary developer of the Thunderbird UI site, which provided an intuitive interface for navigating our design system.
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.
Axure Component Library
Since our team of UX researchers and designers use Axure for prototyping, I had the idea of building a library of Axure components based on the styling of Thunderbird UI. These Axure components enabled designers across Sandia to build interactive Axure prototypes more efficiently.
Outcome
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.
External Design System
Due to the success of the Thunderbird UI on the Sandia intranet, I led an effort to implement a design system for external-facing websites and applications at Sandia. The team conducted many of the same activities as for the internal design system including user interviews, wireframing and prototyping and component development.
The color palette, typography and some of the component designs were modified to match external branding.
I proposed the use of Web Components for this project, which enabled us to build components that were framework-agnostic, since many front-end frameworks were being used including Angular, React and Vue.
