The Problem
We needed to redesign the Workstorm platform for an important reason. To eliminate the inconsistencies that had been developed into our UI over the past three years. Our interface had inconsistencies across the platform, which made it difficult to use and navigate. Take these two types in the web application as an example:
The Process
We started this process knowing that we weren’t only redesigning our product , but also we needed to rethink the way we designed and built the product.
In order to create the design language consistent, scalable, pluggable, and maintainable, we made the design language systematic, which was inspired by the Atomic Design concept that created by Brad Frost
1. Atoms
We started off by thinking the smallest piece of the system. They are text, icon, color, and box, and we called them Atoms because they are the essentials of everything we were building upon, which cannot be broken apart anymore.

Box: Solid, Outlined, and Image

Just like when you build a Lego building, the smallest bricks can build the Empire State Building. 
In order to provide as many styles as possible but also limit to a certain range, we made 3 types of text in various size option: Heading (H1, H2, H3), Label (MD and SM with Left, Center, and Right), and Paragraph (Left, Center, Right); 

Text: Headings, Labels, and Paragraphs

And 3 size of icons: 1rem, 2rem, and 3rem

Icon: with different sizes and colors

And 10 colors: Primary, Secondary, Success, Warning, Error, Light Gray, Default, Dark Gray, White, and Black

Color: Primary, Secondary, Error, Success, Warning, and Grayscale

And a bit more complicated options for boxes: Image, Outlined, and Solid. Under those, we had Radius-md, Radius-sm, Rectangle, and Rounded. 
2. Molecules
With Atoms, we were able to build elements a bit bigger like, button, control, input field, card, and pagination. Those elements are all consisted of text, icon, color, and box. For example, a button would be a box with text, icon, or text plus icon. We called them Molecules. With the different combination, we could get more variations. There are literally 540 variations for buttons with different 18 icon-text placement, 3 different shapes, and 10 different colors. 

This really opened the opportunity for us to make the design system reusable, scalable, and consistent. 
See it in real action: 
The Next
Each component that was built in the Sketch will be converted to a Vue component, which will be able to be taken into an app in a second - just like how you assemble Legos.
Designers will not spend hours to tweak pixels anymore, so they can focus on designing the Empire State Building in a bigger picture. Developers will not spend hours to refine CSS, so they can focus on building the Empire State Building. 

Other Projects

Back to Top