Case study

Rethinking the rate table experience


The mortgage rate table experience needed a mobile-first and mobile-friendly approach. Starting with a design sprint, we rethought the experience from the ground up, creating a UI pattern and flow that could work across all of Bankrate’s products.

I designed the rate table and rate cards in a modular system that would make it easy to reuse sections across different product types, and add or remove sections without needing to redesign or rebuild the entire card.

Made at

Bankrate (2019)

Other creative credits

P. Cristobal (Designer)
Brian Freeman (Designer)


Visual designer
UX designer
Design system advocate

An isometric view of a mortgage rate table mocked up on a phone display

Project goals

Create a modern, mobile-friendly rate table with familiar UI patterns to reduce the user’s learning curve.

The process

Start with a design sprint, comprised of people from multiple disciplines, including design, content, product, and engineers.

The sprint was held in our Florida office over three days. After a few icebreakers and preliminary brainstorming exercises, everyone in the group sketched out their ideas -- starting with the low detail, broad ideas.

After voting, focus would narrow and include the ideas from the previous round that had the most energy.

By the end, we had a clear direction to go in, and the final flow was drawn onto the whiteboard for us to wireframe in the coming days.

Mobile sketches taped to a board, with post-it notes stuck on the designs
Mobile sketches taped to a board, with post-it notes stuck on the designs
Post-it notes stuck on a board with 'How Might We' notes
Mobile sketches taped to a board, with post-it notes stuck on the designs
Post-it notes stuck on a board with sketches
Post-it notes stuck on a board with 'How Might We' notes


We focused only on what features and information should be present on the screens, and later ran user testing sessions to validate and improve our decisions.

The argument against using your own library or high-fidelity assets is that your audience will focus too much on how it looks, not the information they’re seeing. This is true, but I wanted to find a way to avoid doing the double work of using one library for wireframing, then replacing it with components we already have, and that are already set, anyway.

So, in the interest of efficiency and to make an argument for using our existing library during wireframing, I did exactly that. But, I threw a desaturation layer over all screens before uploading to provide that low-fidelity feel to help disconnect stakeholders from the feeling they’re looking at final versions.

(It worked!)

4 phones displaying a black and white version of the mortgage rate table

The design phase

Tweaking and refining the details

Since I did use our existing design system in the wireframe stage, some of the changes needed were pretty minor once the wireframe layer was removed. We spent that time saved tweaking the information that was there, and improving the layout where needed.

Think modular

This is actually my favorite design file, since it was when I implemented symbols/components from the very beginning of the design process. I knew there would be many repeating elements across many similar screens and cards, and I wanted to be as efficient as possible.

This heavily influenced my workflow and file setup going forward on any future projects.

Rate cards with pieces floating above it, to show the modular concept

Prototype and test

This project was uploaded into Invision and prototyped out for user testing and stakeholder review.

This included:

  • A fixed onboarding flow to personalize your results
  • Two rate tables (mortgage and refinance)
  • Tappable filters and menus
  • An expanded rate details card
  • Compare rates feature

Bring it to desktop


Expanded loan details modal

The responsive loan details card now includes fee information and lifetime loan cost, as well as the customer-favorite payment and lender reviews tabs. Mobile lacked any offer details modal before this, so creating a responsive design was necessary.

On desktop, the loan amount and lead form CTA sticky to the bottom of the modal while traveling between the tabs. On mobile, the CTA remains in view. 


Compare rate offers

Easily compare different factors side by side on both desktop and mobile. On scroll, the logo, CTA, and table headers would stick to the top of the screen so you always knew what was being compared in that view.

Desktop and mobile view of the compare offers table

© Heather Geary