CASE STUDY
Building a
Design System
Client
Rothys.com
Duration
3 Months
Year
2019
Intro
Rothy's is a highly successful startup based in San Francisco. They make women's flats out of recycled plastic bottles using sustainable means.
This year Rothy's plans to go global. Along with that their design & marketing teams are rapidly expanding. One of the biggest hurdles for such digital businesses as they scale is creating a consistent user experience on every screen, while still keeping their design process lean & fast.
The problem of scaling consistently becomes a real challenge when multiple teams, placed in different locations are simultaneously designing for the same website. Because of this something as simple as the primary call-to-action button suffers from differences in dimensions, styles, states and incorrect placement with error-prone responsive behavior.
The solution to this problem for Rothy's, and for others like them, is by leveraging the power of comprehensive design systems to scale consistently. In this case the InVision Design System Manager allows designers to do just that.
What is a Design System?
A Design System can be defined as :
-
A library
-
Of reusable components
-
Which can be assembled together
-
To build consistent user interfaces
-
That are guided by clear standards
Tools used for building this Design System :
How a Design System
improves Usability?
To help answer this question we can refer to the industry recognized guidelines for usability by the Nielsen Norman Group.
A design system helps avoid frequent issues with the following Usability Principles of NNG :
-
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
-
Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another.
-
Flexibility and efficiency of use
Accelerators - unseen by the novice user - may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users.
-
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
My Role
One of my roles as a UX Designer is to understand the pain-points of users and provide effective design solutions for them. And one of the many experience issues faced by users even today is inconsistency within the designs of an e-commerce site. This leads to a broken experience where the user must frequently reacquaint themselves with the dissimilar layout & navigation.
Having closely worked with the stakeholders at Rothy's for two years I'm in an ideal position to help solve this problem of inconsistent design, along with tackling a host of other problems in the process.
Goals
-
Successfully build the client's first Design System Manager.
-
Actively demonstrate the DSM's capability to stakeholders.
-
Help on-board 4 different design teams, working in 3 different time zones, onto the new DSM to help achieve visual consistency throughout the site.
-
Standardize the type scale, brand colors, etc. while maintaining usability & accessibility standards.
-
Build a library of all the reusable components on the current site, while also keeping them responsive.
-
The DSM should be scaleable
Design Approach
STEP 1 : RESEARCH & EXPERIENCE
When starting from scratch secondary research helps build the foundation. Learning from my previous work with Rothy's and then studying the work done by others on design systems helps to develop the approach.
Design systems have been around for some time and the tools to manage them, to efficiently scale them and empower designers with them have only gotten better.
This step involved studying design systems created by other big industry players, analyzing them, picking their best implementations and merging it with my own approach.
STEP 2 : TAKING INVENTORY
-
The first step is taking an inventory of all the fonts and colors currently being used on the site.
-
The next step is to take note of, along with visual references, of all the components active on the site (e.g. header, footer, banners, menu, cards, tabs, etc.)
-
Post the inventory I found an excess of font styles, color variations and different component styles active across the site.
-
Rothy's has over 50 reusable components, all of which will be built from the ground up through a process called atomic design.
STEP 3 : ATOMIC DESIGN
-
The design system for Rothy's is built on the concept of Atomic Design.
-
In atomic design the system is built incrementally, where the small atoms (e.g. basic shapes, fonts styles, etc.) are created first.
-
These atoms come together to form complex molecules (e.g. buttons, icons, text elements, etc.) called Modules.
-
The molecules in-turn come together to form even more complex organisms (e.g. header, menu, carousel, etc.) called Components.
-
Components come together to form web pages and web pages come together to form the website.
-
Atomic design works both ways, meaning that an organism has to be able to be broken down into its molecules & atoms.
STEP 4 : GIVING SHAPE TO THE DSM
This DSM is divided into 4 key sections :
-
Design Foundation
-
Modules
-
Components
-
Mobile
The design system :
-
Is made up of individual modules and custom-created complex components
-
Is in accordance with the styles & systems currently being used on the Rothy's site
-
takes into account visual accessibility (accounting for color contrasts and readability for those with certain visual disabilities, in accordance with ADA compliance)
STEP 5 : DESIGN FOUNDATION
-
The Design Foundation is an introduction to the Rothy's brand. It also contains their first set of clearly defined Design Principles, which I was closely involved in establishing. These are meant to help guide the designers through their design process. (This can be a case study in-itself)
-
Next, it includes their Color Gallery, with primary & secondary color separation along with guidance on usage & hierarchy.
-
And finally it includes the Text Styles, which defines only the necessary font sizes, styles & color variations needed for Rothy's.
STEP 6 : MODULES
-
This section contains all of the atoms & molecules used within the site (as discussed above in Atomic Design)
-
E.g. the icons, buttons, check-boxes, form fields, etc.
%20Step%206-Modules.png)
STEP 7 : COMPONENTS
-
This section contains the complex organisms, which have been created using the Modules.
-
E.g. the menu, gallery, filter bar, cards, cart, etc.
-
These can be used together to build entire web pages.
%20Step%207-Components.png)
STEP 8 : UPDATES & VERSION CONTROL
-
The InVision DSM allows the designer building it to manage how the updates to it are pushed to all the design teams.
-
This is done through their inbuilt version control system, making it easier to make changes and push them live with accountability.
-
Because of this feature it becomes possible to scale the design system with the brand's future needs in mind.
-
At the time of writing this case study Rothy's was undergoing a rebranding with new color additions and new fonts.
Side Note :
The above steps have been condensed into brief descriptions for the purpose of this case study. The idea here is to help the reader quickly grasp what goes into building a Design System and why its needed.
Final outcome
1. A custom built Design System
-
A full set of drag-and-drop components & modules which can be pulled into the Sketch design file.
-
Fully responsive components built for both desktop & mobile.
-
All teams working on Rothy's are now using the Design System to create consistent interfaces and help solve UX issues on a daily basis.
2. Consistency
-
The DSM is a repository of all the components & elements being used for building the interface of the website.
-
When multiple teams in different locations use the DSM as a single-source-of-truth for all their designs it will help the designs achieve a level of visual consistency that could not have been easily possible before.
-
Imagine, everyone designing for Rothy's is going to use the same brand blue, the same call-to-action buttons, the same product image dimensions, the same fonts, font sizes & styles.
3. More usability focused designing
-
Because of the consistency that the DSM provides, the designers can focus their energies more on user experience, interactions & flows. In short, designers don't have to reinvent the wheel every time.
-
Imagine, you're getting down to create a new feature for the site from the ground up. You no longer have to worry about making it look consistent with the site,but instead you focus is put into the feasibility and the functionality of the design to really help solve usability issues and achieve company goals.
4. Documentation
-
When creating the DSM the documentation plays an important role. It gives us the opportunity to define a strong design foundation while also establishing guidelines.
-
The documentation not only covers the brand guidelines for the web, but also of how to use the elements & components within the system, along with best practices.
5. Better integration with developers
-
Since all the design elements that all the designers are pulling into their designs are from the DSM it helps us achieve visual consistency. However, the development team will be referring to the same DSM and its elements & components for coding that very same design.
-
So, rather than focusing on pixels, the developers can focus more on the application logic.
6. Efficiency in turnaround time
-
Because the DSM is ready-to-use repository and the single-source-of truth the time taken for a design to go from planning to approval is significantly reduced.
-
In practice, his means that sketches & wire-frames become finished designs in a much shorter time frame than before.
7. Optimized site load time
How fast the website performs is closely based on its color & font usage.
To gain perspective, before Rothy's had :
-
21 unique background colors
-
22 unique fonts
-
48 unique font sizes
All of these variations contribute to website lag.
With the DSM we now have :
-
9 primary colors and 5 secondary colors
-
2 fonts with 4 styles and 4-5 sizes per style in 6 colors
That's almost a 75% reduction in font variations
All of this, coupled with bringing consistency among all repeating elements with standardized components, will lead to a much swifter browsing experience for visitors.
Learnings
-
Involve developers early on in the process to get the right naming convention, from the symbols in Sketch to the variables in the code.
-
Introducing the value & potential of this massive DSM through an elaborate presentation to the stakeholders on a sunny San Francisco morning does the job.
-
Moving forward, the idea is to keep refining the DSM as it evolves with the brand. The DSM must be flexible enough for another designer to come on-board and continue developing it further.