Discover the coolest things to do!

Overview

Design Team

Rachel, Kat and Manus.  We worked at different phases on the product.

Problem

As we were exploring and building out new features, it was chaotic, inefficient and inconsistent.  Time was wasted.  That resulted in collaboration blockers.

Process

Identify all inconsistencies and streamline a simplified design system.  Develop foundational elements including spacing, grids, typography scales, colors systems, etc.  Lastly, implement a design token structure.

Before the System 

We had a general style guide that showcased the different types of colors and typography.  We did not have different alert colors and varying primary and secondary colors.

Colors

Developed categories of common groupings of colors. Also confirmed if they were WCAG compliant.

Typography

Developed categories of common groupings of colors. 

Buttons & Spacing

Developed 3 sizes of buttons.  The button breakdown shows the anatomy of the button. 

Spacing tokens will help when documenting components like buttons, alerts, text fields, cards, etc.

Old Cards

Previously the cards that were created lacked structure and most of the time they were copied and pasted when creating new ones.  If there were any slight changes, imagine adjusting all the cards.

Old cards lacked consistancy and the file structure was not easily readable.  Alignment was off.

New Cards

I created a new card using components and utilizing properties and booleans in Figma.

The folder structure is easier to understand.  I created booleans and properties for each item.  There is consistent padding and spacing between items.

Components

It'll be efficient to grab a component that has different states, properties and booleans.  The user has all the options available.

Results

With all the effort, a small design system was created. The team is setup to collaborate efficiently.  The product will be more cohesive for the end customers, brand will be stronger.

A valuable thing a design system can do is increase the velocity of the team. Second, it supports consistency across the product.