SST Design System
Product + UI + Visual
After being asked to reenvision Simpson Strong-Tie's web styles in 2018, I initiated an investigation into their broader ecosphere of digital properties. This sparked the larger task of creating a comprehensive design system, shared through a commonly accessible Sketch Library, and continually updated code repository.
Approach
As I ideated over initial concepts for my newly entrusted UI pattern library project, there became a clear need for deeper investigation into their extended digital ecosphere (web apps, blogs, microsites, etc.). The further I looked, the more I noticed an increasing amount of inconsistencies and rogue styles weakening the digital brand.
One orange to rule them all? Not quite.
I proposed a library to house design elements, components, and patterns in order to create consistency, minimize design efforts, and to better facilitate cross-functional collaboration. A comprehensive design system.
Challenges
As the first designer at SST to work in Sketch, I pushed for a single source of styles that could be shared throughout the design team, from a single software platform. This presented the challenge of gaining buy-in across the design team to adopt a singular design tool (Sketch, in this case). At the time, other designers worked in Adobe Photoshop or Illustrator, and yet even others designed directly in code. This had historically forced members of the design team into silos, a reality that was allowed to be easily overlooked due to designers functioning in separate work streams.
There were a number of challenges which demanded approval from stakeholders for a comprehensive design system. The most notable of these included:
- Design Inconsistencies
- Inability to Scale
- Additional Design Effort
- Engineering Inconsistencies
- Additional Engineering Effort
Solution
A comprehensive design system (based on Brad Frost's Atomic Design Principles), utilizing a shared Sketch Library file, would be build out and housed in a common location with local and remote access.
As previously stated, implementation required adoption of new tools, collaboration between design and engineering, and architecting how the design system should be housed and shared.
SST's servers were the obvious choice to host a shared library file. These servers would house the Sketch Library file which would feed all relevant styles & symbols to individual design files. Design team members would need only to sync the library to the file they were working within in order to have access to all design system symbols & components.
"A comprehensive design system... would be build out and housed in a common location with local and remote access."
Implementation
A complete style audit was necessary to understand where the digital styles had been, and should be going, as well as to identify and consolidate atoms.
- Complete UI style audit (all digital properties)
- Identify all currently existing 'atoms'
- Update styles for UI elements
- Create reusable design components
- Publish library file with shared access
- Scheduled code repository updates
With all the atoms identified, I could begin the restyling effort. Create a set of simplified UI elements that function as standalone objects, which combine with similar elements to create reusable design patterns. For example; a button, form input, and placeholder text create a reusable search component.
UI Style Audit
As I began with initial concepts for the updated UI pattern library, I began further investigation into, and auditing of the extended SST 'digital ecosphere' (web apps, blogs, investor relations site, etc.). The further I looked, the more I noticed an increasing amount of style inconsistencies, which led to a weakening of their digital brand.
Button Examples, from Simpson Strong-Tie Style Guide
Identify & Update
After auditing all of the styles throughout SST's digital ecosphere, I identified and grouped atoms which served the same function. Buttons, cards, form elements, etc., all grouped, like with like. Once this task was complete I had a roadmap of what needed to be designed, and could begin presenting updated style concepts to stakeholders.
"I began with typestyles and experimented applying different brand colors to a common button. Three brand colors emerged as the best candidates for three levels of prominence."
With buy-in on basic atoms such as typography, colors, and buttons, I could move on to the remaining UI elements such as form inputs, cards, image styles, and navigation. After iteration rounds on the remaining atoms came to a close, I moved on to configuring molecules, and then organisms... reusable components of varying complexity, by utilizing Sketch's Symbols.
Component Build
After finalizing the atomic elements for Simpson Strong-Tie's design system, I began systematically constructing components for reuse in their shared library file.
Smaller atomic elements were converted into Symbols in Sketch, which then combined with other atoms to create molecules and organisms. Each level of components then following suit; being converted into their own Symbol so long as each could be reused.
Principles of Atomic Design by Brad Frost
Publish and Upkeep
Once the initial version of the master design system Sketch Library file was completed, it was uploaded onto a remote server with common shared access across the design team. The access was limited to read-only, with the exception of authorized credentials for the purpose of routinely scheduled updates.
The engineering team scheduled a multi-step build, by which they would build and update their code repository with the most recent design system styles over the course of multiple months, and then maintain regularly scheduled updates based on the most recent iteration of the Sketch Library file.
Summary
This project was limited in scope to desktop considerations due to the fact that mobile traffic to Simpson Strong-Tie's web properties makes up only an average of roughly 25% of its users. Further consideration for scaling the design system to facilitate mobile users is the next logical iteration, and I imagine such efforts will take place sometime in the future.