Hi there! Please visit me on a larger screen ☺

LinkedInResume

Loading Blueprint...

Blueprint Design System

A responsive component library for designers and developers
my role
Product Design
Team
Pacific Northwest National Laboratory
Duration
June 2022—September 2022
Mentor
James Bradford
Overview
There is a need to create an interactive component library to increase collaboration between developers and designers working on the Sereberus suite of projects within PNNL.
‍
The solution needs to simplify the handoff from design teams to development teams. The library should enable a seamless creation of mockups and wireframes that can be translated into functional tools.

I developed a comprehensive design system that improved design consistency and cross platform efficiency by 27% across multiple projects with 200+ users.
Context

Looking ahead to consistency

End goal
Previous system
Unification across projects.
Across all of PNNL's Serberus projects, the Blueprint Design System by Palantir is the backbone of all visual systems. However, designers used Figma and Adobe XD, while developers lacked access to these tools, causing fragmented workflows, lowering design consistency, and hindering inter-team communication.

The goal? Create a central Figma component library that was built using HTML language to improve standardization.
Building familiarity
Understanding design systems
Gain Familiarity
Build understanding on Atomic Design Principles and design tokens
Study best practices for creating a design system component library
Competitive analysis
Research Material UI, Apple HIG, Ant, IBM Carbon, and Microsoft Fluent
Build complex UI groups with competitor component libraries.
User Interviews
Host workshops and interviews surrounding current solutions
Synthesize data to understand how to best present the library
Research methods, and what they address.
Atomic design principles.
Before starting the project, I knew I needed to learn more about the basics and best practices of design systems.

I focused on reading about Brad Frost's atomic design principles. Based on this, I knew that a modular design system that built upon itself would be beneficial. I learned how to distinguish complex UI elements as abstract or concrete, or as structure or content.
process
Building the library
After
Before
HTML, CSS, Figma.
While translating the HTML and CSS of Blueprint's components into Figma, I ensured that all properties and styles mirrored the classes that were outlined in the code. In preparation for the next stage, I also took note of any alternate states that were present.
Prototyping (AKA debugging).
To promote cross-understanding of components, I prototyped each one into responsive mirrors of fully developed versions. This included all intents, states, and variations—and how they transitioned between them. While utilizing Figma's prototyping features, I encountered bugs that caused me to troubleshoot extensively.

Given the library's government use, I couldn't rely on plugins. This prompted me to push the boundaries of Figma to find solutions, which often relied on 'breaking' components into multiple frames within a component.
Presentation.
An example of a mockup used during the final presentation of the library. One of the main goals of user testing was finding a format to present the library. While Figma has the option for instance swaps, our users preferred scanning over all components visually.

This led to the sticker sheet, an organized master component that houses each individual component and complex UI components.
Final product
Ready for launch
Intuitive terminology.
All components are easily adjusted within the properties panel of Figma. The property panel helps ensure consistency across separate projects, all designated by HTML and CSS classes.

Maintaining the terminology used by developers within the component library, there was now a standardized language used between designers and developers.
Sick of me saying responsive yet?
When in designer mode, users have the ability to chose the exact variation of the selected component. In presentation mode, components are interactive. Sliders slide, buttons click, text boxes fill. The wireframe hand-off has additional clarity.
Modularity.
Following the atomic design principle, all complex UI elements are composed of nested components. This modularity facilitates file-wide design changes and enables complex components to be edited through the property panel.

This principle continues to the sticker sheet, which provides descriptions and links to additional documentation for each component. The categorized structure allows for quick scanning and further context for potential use cases.
TAKEAWAYS
Pushing my skills further
Expanding my knowledge.
Creating the Blueprint component library was both challenging and rewarding. While my prior experience focused on wireframes and prototypes, this project pushed me to develop interactive components and enhance my Figma skills.

With guidance from my mentor, James, I honed my UI design abilities and practiced receiving and implementing feedback. Completing the library, I am now able to quickly create systems within Figma for entire teams.
Next project
Miimo
Jump
A dropdown icon