Design System V2

Effort to revamp and revise the hotwire design system

Due to an outdated system with lack of maintenance, our design language across products and platforms showed huge disconnect. Leading this effort, I revamped the Hotwire Design Language to create a modern, accessible and efficient Design System.

Project Type

Design Systems

Design

Visual Design, System Design, and Interaction Design

Cross Functional Partners

Developers , Design and Product

Color Accessibility

With accessibility as a focus, I revisited our current color system to understand their contrast ratios and how accessible they were, while also understanding how certain color blindness could affect how users preceive them.

PREVIOUS
NEW
Intentional Color Usage

The current system had no clear guidelines on how our primary, secondary, or any other color were suppose to be used. There wasn't a clear definition on when to use red or when we should use blue. When taking a look at the hex codes used in our website, I was able to clearly see how this resulted in a disconnected experience across our products. By clearly defining how the primary color should be used, this resulted in a less noisy UI full of loud red.

There were 120+ different hex codes used across the website

Interaction/Motion

I explored how motion would look in the overall experience. Exploring how users interact with elements on a screen and what feedback they expect through that interaction. From bottom sheets, map and scroll interactions. The goal was to provide consistency in motion across our product, and create a more engaging and interactive experience for our users.

Building components and token Implementation

After thinking through guidelines and system rules, I moved into designing new components for the Design System, and collaborated with Developers to move the components into a token system in React. We redesigned pages within IOS and Android and slowly launched them out.