A month after we started working on the Rugs USA website redesign, we started noticing the following problems:
Design Inconsistencies. Common elements (such as buttons and fields) were recreated by designers and developers each time they were needed, leading to inconsistent design and usage. Colors and shadows were especially difficult to track, which resulted in them being used arbitrarily — there were 3 slightly different shades of orange in one page.
Divided Vocabulary. Designers and developers used different terms to refer to the same elements, leading to disjointed communication and slower development.
This element was called "Toast", "Notification", and "Snackbar" before the style guide was implemented.
We needed a style guide to serve as a single source of truth that the designers and developers can refer to. The style guide includes color, typography, shadows, buttons, cards, fields. It’s also vital that it stays up to date — otherwise it will become unused after a few months.
Collaborated with Other Teams. Worked with developers and other designers throughout the project to ensure the style guide would best solve their problems.
Created a Style Guide. Organized existing elements into a shared Google Doc so designers and developers can easily check an element’s correct design and usage
Designed New Elements. Created elements that were missing from the new style guide — such as tooltips and toast.
Created a Symbol Library in Sketch. With this library, designers can work quicker by dragging and dropping elements. In addition, we can change an element’s design in the library and it will update all copies of that element throughout our sketch files.
This methodology starts with the most basic building blocks in every website — atoms:
With this foundation, we can create more complex elements called molecules:
Building up further, we get organisms:
As you can see, this is an effective way to develop and organize a complex design system.
Located on a Shared Google Doc. We did a lot of research to find the best way to host the style guide. We needed it to be easy to share, update, and navigate. For us, google docs was perfect because it did all the above. Google Doc’s outline feature made browsing the style guide a breeze.
Additionally, I added a Change Log so the developers and designers can easily stay on top of style guide changes.
I created each element in a Sketch Symbol Library so designers can create consistent mockups — quickly.
I took full advantage of symbol overrides, which allows the designer to easily customize the elements on the right panel.
We’ve been using the style guide for 6 months and it’s helped us work faster and have more unified designs. We ran a followup survey to quantify the success of the style guide and symbol library.
The front-end developers unanimously said the shared style guide has helped them work more consistently and efficiently because they always were able to refer to a single source of truth.
Ben’s style guide helps us maintain site-wide consistency.
It also reduces the time and effort required to style new content.
- Haim Arazy, Lead Front-End Developer
The style guide was useful to define variables & classes (like fonts, colors, sizes, shadow, borders) that we could reuse throughout the site.
- Belgrave Henderson, Front-End Developer
The project manager said that since the style guide was implemented, he's seen a decrease in QA tickets related to design and usage inconsistencies.
"The style guide and symbol library is the gift that keeps on giving"
-Chaim Sash, Senior UX Designer
We’re hoping to make a coded version of the style guide really soon! This would have live examples of all elements that are interactive (i.e. hover, pressed, and active states). Developer would even be able to copy the element’s code directly from the style guide. This will also help us further speed up the development portion of future projects. Furthermore, it would help us improve our consistency for interaction states.
Element transitions are all of the place currently. Some elements have a transition, some don't. Some will slide into the page, others will appear with opacity. We want to add element transitions to the style guide to improve consistency.
