DATE

January-March 2018

ROLE

Product Designer

DESCRIPTION

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. 

goals

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

action-plan
timeline

These are approximate two-week sprint plans for implementing a design system with the immediate goal of providing reusable components to the development team.

Accountants Cooperation Flat Vector Illustration

Interface Audit

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
  • Images
  • Buttons
  • Navigations
  • Layouts
  • Colors

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.

Typography-Audit

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

List-Audit

Navigation: The navigation was broken into categories: "Primary," "Tabs," and "Breadcrumbs." 

Navigations-Audit

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.

Images-Audit

Buttons: These were probably the most misused element. They came in a variety of colors, backgrounds, and sizes.

Buttons-Audit

Layouts were mostly consistent except for those used on a few new projects.

Layouts-Audit

Colors: Left—the primary colors in our logo

Right—the colors used on our website

primary-logo
actual-colors-on-our-website
Studying, table with books and different folders. Concept illustration for learning, education, office work, school or university. Vector illustration in flat style

Creating a library

One of my goals was to make the most impact sooner, which meant I would first tackle basic design components:

  1. Colors
  2. Typography

The next steps would be:

  1. Components
  2. Layouts (Design only)

Colors

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.

layouts

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.

colors

A SCSS file with all the colors in place.

Developers could come here to choose which colors to use.

color-code

Typography

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.

typography

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

typography-more

Sample layout with Proxima Nova as the leading font.

typo-layout-test

Clutch typography with all font sizes and font-families in place

type-code

Components

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.

components
components-2
components-layouts

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.

3202909

Challenges

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.

Learnings

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.