A system that encapsulates all the typography, patterns, and design components used across the application.
The project began when, after six months at Clutch, I discovered the company did not have standards or guidelines stipulating what design principles different developers and designers should follow. The only common factor was bootstrap styles with small, interspersed customizations.
My first goal was to understand the current application and identify the different styles across all products. Then, I wanted to create a more cohesive design guide.
Thank you to "Atomic Design" by Brad Frost for his expertise on navigating this process.
Early scribble on the goals for the design system
Notes on setting goals, distinguishing the basic design components, and listing application-specific layouts that would be required for the process
These are approximate two-week sprint plans for implementing a design system with the immediate goal of providing reusable components to the development team.
Brad Frost puts it best: "An interface inventory is a comprehensive collection of the bits and pieces that make up your interface." The audit was broken down into a few major areas:
Typography: This shows the headings used across all Clutch's pages.
As you can see, there are multiple styles, fonts, weights, and colors for text elements and templates. I found we were using over 67 different font sizes across the website.
List & Tables: The styles of the previous application's design vary from the default bootstrap to custom list for displaying chapters.
As you can see, the problem isn't the variety—it's the lack of consistency
Navigation: The navigation was broken into categories: "Primary," "Tabs," and "Breadcrumbs."
Images: The images (logos, icons, and captioned pictures) showed the variety of logos used across the website as and when they were implemented.
This also allowed me to better understand the design process at the company. This was important since there wasn't a shared collection everyone could access and use. There was, however, a plethora of icon libraries, custom icons, logos.
Buttons: These were probably the most misused element. They came in a variety of colors, backgrounds, and sizes.
Layouts were mostly consistent except for those used on a few new projects.
Colors: Left—the primary colors in our logo
Right—the colors used on our website
Creating a library
One of my goals was to make the most impact sooner, which meant I would first tackle basic design components:
The next steps would be:
My experimentation with different layouts and a new color scheme.
It was also a great tool for collecting feedback. The primary color is the grey-slate that is currently in use. Then, I ensured we had one accent color and a few monochromatic blues based on the primary color.
Final set of colors selected to be used across the website.
There would still be certain exceptions for colors coordinating with different subjects and other certain components.
A SCSS file with all the colors in place.
Developers could come here to choose which colors to use.
For the new font, we selected Proxima Nova because it's readable, translates well to different proportions and spacing, and it complements the overall style. I wanted the font to communicate we are experts in academic subjects.
Proxima Nova in varying font-sizes from 14px to 16px to 18px. Preview to help stakeholders understand how the font would feel.
The scale we were going to use for the different font sizes across the website.
I used https://type-scale.com to help with the scale
Sample layout with Proxima Nova as the leading font.
Clutch typography with all font sizes and font-families in place
As the only designer, creating the design system within my completion timeline of three weeks was a challenge. This is why I used UX Power Tools to expedite the process
The final list of components for Clutch Prep. In this process, I launched myself head-first into selecting the components and then getting feedback from engineering stakeholders.
The process of creating the design system and prioritizing which components were implemented first has been progressive, iterative, and definitely non-breaking. Since we've implemented the design system, the focus of all designers and developers has been on solving problems and less on fonts, styles, and other layout visuals.
The biggest challenge in this process was the third missing step: creating guidelines. A designer setting guidelines for the engineers without understanding much of their existing development process was another challenge. To address this, I spent a lot of time with my CTO (who is also my manager) understanding the best way to integrate the design elements in our workflow and collaborating with him.
Creating a design system isn't a single process—it is a living document like any mission/vision or strategy document. That meant that upkeep was an important part and given my position as the only designer it was very hard to manage time with all the project and design maintenance. This led to a long period where the design system was used as a library and no updates were made. To ensure this doesn't happen, we alloted two days to reviewing our project designs and deciding what to add or remove from the design system.