Case study
Rethinking the rate table experience
Summary
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)
Roles
Visual designer
UX designer
Design system advocate
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.
Wireframing
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!)
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.
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
Feature
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.
feature
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.
