Rocket

Case Study

Building an Enterprise Design System

...With a Little Help From Outer Space.

In an effort to comply with my non-disclosure agreement, I have omitted confidential information and may have made changes to fill in the blanks in this case study. All information is my own and does not necessarily reflect the views of Rocket.

Context

Designing a System That's Out of This World.

Quicken Loans’ flagship product Rocket Mortgage was quickly becoming more known than the company itself leading to a rebrand of the company as Rocket Mortgage. This environment combined with the fact that much of the current design was not accessible, lacked consistency, and wasn’t managed through a design system or pattern library necessitated the need to design and develop a new color palette and design system.

THE PROBLEM

Current Issue

The color palette is applied in many cases in the traditional sense where green represents a positive/success state, yellow is a notice/alert — and red is used most prominently as an action, which could create confusion when shown alongside other colors in the palette. Additionally, the primary action teal color is not accessible.

Accessibility

Our primary color teal does not achieve AA compliance.

Increased Scale = Roadblocks

Toolkit doesn't support broad product/company offering.

Missed Brand Opportunity

Current palette does not leverage brand character.

Old Color System - Teal is not accessible, Red is too minimized

The Challenge

Color is Important!

As we rebranded from Quicken Loans to Rocket Mortgage we realized that color was going to play an important part in unifying our Rocket companies and products.

When Used Correctly, Color Leads to:

Design Consistency

Improved consistency across multiple products (B2C, B2B, and Internal apps).

Increased Accessibility

Building accessibility standards into your system ensures that colors are used the right way.

Drive User Behavior

Color can be used to influence feelings and drive user behavior.

Elevate Your Brand

The best brands know that color is powerful and can instantly catch your users attention.

My actual children know that how you use color is important!

Competitve Color Analysis

We found there was far too much blue in the mortgage and fintech space. We needed to keep our red to leverage the Quicken Loans equity but needed to find a supporting color that could work better than the teal.

When Life Gives You Rockets.

We drew our inspiration from the colors of space. Our team stumbled upon the clip of Felix Baumgartner's famous record-setting jump from space and found that the naturally occurring colors ranging from black through purples to red would work perfectly for Rocket's new color scheme.

Rocket Orbit

Modern and approachable

Unique positioning compared to competitors in the market(s)

Fits brand character and color psychology attributes

Works well with the primary brand color of red, but softens the negative psychological attributes (e.g. stop light, errors, etc.)

Color Logic

Rocket Red

Deep Red

Mid Red

Orbit Purple

Deep Purple

Results

The Impact

1.5%

Conversion lift (at 97% confidence) measured through A/B Testing

4.7/5

Brand Sentiment Ratings (Approachable, Trustworthy, Pleasing, Progressive)

18 mo

From conception to completion - uniting multiple engineer pods

6+

Unifying design across products (loans, mortgage, homes, auto, B2B, Internal, etc.)

Rolled out a new design system (UI Kit and Component Library) to a team of 16+ designers and over a dozen engineering teams supporting different products (B2C - mortgage, homes, auto, loans, B2B, and Internal apps).

Introduced new ways of working more quickly with standardized components, Figma (and XD) libraries, and supporting code to cross over various code frameworks.

Designers spend less time reinventing the wheel and pushing pixels and more time where design is most valuable: solving problems.