Case study

Creating a design system from a redesign


Bankrate is a personal finance website known for its comprehensive and objective financial news, and providing rates for many personal finance products.

In 2018, it began the process of redesigning the website, and by 2020, we were revamping our design system to bring those changes to life.

I led the process of taking the redesigns and refining the system behind it, creating a UI kit and style guide, and working closely with engineers to update the design system.

Made at

Bankrate (2018-2020)


Style guide
UI Kit (Sketch, then Figma)
Front-end docs website

Other creative credits

Ricky Carlton (designer)

The design team for all the product design work which informed the design system


Visual designer
UX designer
Design system advocate

An isometric view of three sections of a style guide

The problem

The redesigned pages looked great, but there were some inconsistencies in the execution. I did an audit and presented the results, but another idea came to me as we were preparing to have a design meet up in the Detroit office ...


Sharing the “systems thinking” mindset

I led two sessions during our internal creative summit, focusing on design systems and systems thinking. I wanted to help the team understand exactly how and what I looked at when auditing our product designs for inconsistencies.

Session one: Hands-on activity

We printed out the redesigned pages and asked the team to physically cut out “components,” or similarly structured pieces, then group them with other “like” components onto another sheet of paper.

Session two: Auditing and decision making

Those component category sheets were taped up to the wall, and as a team, we spent time putting Post-it notes up when we spotted a variation, or something someone liked. Having them side-by-side made it very clear where the inconsistencies were.

Later, we went through each note and made decisions or future action items, putting them in a spreadsheet for me to reference later as I was working on the library and documentation.

A grou of coworkers standing around a wall, placing post-it notes on it.

My teammates during the workshop session in Detroit, writing notes on differences they see.

Design approach

Set the foundation

I focused on typography and color first since those are the two biggest building blocks for anything being worked on. After that, there were a few other clear patterns emerging in the way that containers were being designed, so I set out to create rules around shadows, spacing, etc.

Work on components

We already knew which pages were highest priority, so I focused on the tackling the components that I knew were on those pages. By the time I got to the input fields and other form items, I noticed a few tweaks that needed to be made to make them AA+ compliant for accessibility and brought a few options to the team.

Figma style panel showing text and color groupings

Get it all documented

I was working on the style guide and library simultaneously, but soon shifted to focus more on the documentation. I felt it was important to explain the ‘what’ and the ‘why’ where possible.

At this point, I also implemented a change log feature to keep track of what was being added, and when, and started posting updates to a dedicated Slack channel.

Style guide in Invision

Two rows of style guide page samples, illustrating various documentation.

A sample of pages from the Style Guide showing some of the documentation written.

Style guide in Invision

A sample of pages from the Style Guide showing some of the documentation written.


The new library helped the rest of the team adopt the redesign style much faster, and the comprehensive style guide was a great way to document all official design decisions -- avoiding any confusion that had been present earlier in the process.

© Heather Geary