Style Guide and Design Library
SUMMARY
As the sole designer working on Spur’s first web application, it became apparent early on that to be able to work quickly and efficiently I would need a consistent set of design elements and rules with which to design the app.
MY ROLE
Lead UX/UI Designer
Spring 2018 - Fall 2019
THE CHALLENGE
Create a symbol library in that would enable consistent design across pages in the new web app as well as allow future designers to create pages or mock workflows for the app without recreating components from scratch.
Document component usage to make it clear and easy to understand for other designers as well as the engineers building the app.
THE SOLUTION
Start with what you know! Sketch was our design tool of choice, and the ability to turn any file into a symbol library made it the go-to choice for phase one. But how do you eat an elephant? One bite at a time!
Built out the symbols as I went - as I found myself needing a certain component over and over, I made a symbol for it and added it to the library
Knowing the goal was to eventually build our own design system, I researched and studied other design systems such as Lightning (Salesforce), Polaris (Shopify), and Material Design (Google)
Created a clickable Style Guide within Sketch covering the most used elements and components and linked it on Sketch cloud for easy access, starting with:
Buttons
Colors
Inputs
Selection
Widgets
Eventually added more selection options and a new “Navigation” section
LESSONS LEARNED
Something is better than nothing
Having a symbol library with even a single button in it would make designing pages faster and more consistent. Building it out as I went was the right move for where we were as a company and gave me, and the rest of the design team a solid foundation to build on.
Indecision is the biggest barrier to progress
With the desire to eventually build a design system and looking at all the possible ways we might have tried to go that route up front, it could have been easy to get stuck on trying to figure out what to do. Starting with Sketch and moving ahead was the best decision to keep things moving and ship our app in a timely manner.
Eventually we incorporated Zeplin into our workflow, giving the developers a more code-direct look at the components and their styles.
As we hired more designers and went through a rebrand, the design team was able to use what I created as a jumping off point to update styles and build a more robust symbol library, still using Sketch.
In 2020, the front-end engineers took the initiative to take our design system dreams one step further by building out UI components in Storybook for a project we named “Habenero”.