Case study
Creating a design system from a redesign
Summary
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)
Deliverables
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
Roles
Visual designer
UX designer
Design system advocate
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 ...
Workshop
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.
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.
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
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.
Results