I’m currently open to full-time product, ux, and ui roles in the the following regions:
• San Francisco Bay Area
• Milan, Rome, Florence
•Paris, Lyon, Marseille, Nice
•Berlin, Amsterdam, Rotterdam
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.
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.
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.
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:
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."
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.
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.
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.
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.
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.
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.
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.