Credible Offer Dashboard Redesign

Led the redesign of Credible's co-signing experience for student loan refinancing, including user flow, interaction design and visual design for both desktop and mobile.

Hero image


Credible is a marketplace for student loan refinancing. It helps borrowers get personalized rates from multiple lenders. It's great that users can receive multiple offers by providing data once. But the terms and benefits of each offer are very different. How to design the offer dashboard to help users find the best offer?

User Research

In order to better meet users' needs, it's important to understand how do people make their choice among several options. I conducted user interviews to gather insights about the process of choosing a product and factors influence decision making.

Need current loan information for reference

For student loan refinancing users, they have very a clear goal that the refinancing offer should offer more benefit than their current loan. So users need their current loan information for reference.

The refinancing offer should be better than my current loan

Filter the options with fixed criteria in mind

Before choosing the product, people usually have fixed criteria in mind. For example, their income situation will determine the maximum monthly payment. Some users are clear that they don't want to choose variable rate because they don't want to take the risk of APR getting higher.

I can only pay up to $600 a month

Eliminate options that users are not interested in

For users who are shopping around, they really want to make sure they choose the best option. But it's quite difficult to find the best at once. Users prefer to eliminate options that they are not interested in and finally get to their favorite one.

I can't tell what I want right now but I know what I don't


Design goals and key consideration

Include current loan information

Improve usability of filters

Archive options not interested

1. Include current loan information

What is the page structure?

Structure and information architecture of the offer dashboard really affects how users process the information and where should current loan information live? So I decide to think about the how the page is structured instead of figuring out all the details of design at one time. I took these questions into consideration to make sure users can understand and navigate through dashboard easily.

1st iteration

2nd iteration

3rd iteration

2. Improve filter usability

Slider v.s. input

The sliders provide a clear visual cue of what it is and how to use it. However, adjusting the sliders to a specific number can be a difficult task. So I decide to keep the slider pattern but also give users the ability to type in their desired number directly.

Checkbox, dropdown or radio

The old checkboxes for rate type can be confusing when both are unchecked. I explored checkboxes, radio buttons, drop down and pills, and decide on the current solution, which is easiest to understand and apply.

Archive and compare offers

Archive offers that users are not interested in

After filtering the offers with criteria, users can mark the offers as "not interested". Then the offer will be put into the archive category. If users change their mind, these offers can be put out of the archive.

Compare options in viewport

One challenge here is providing detailed information about each offer, but also saving space of each offer. So that users can view and compare multiple offer details without scrolling up and down. I arranged information into sections and removed duplicated information with the filters to same move space.

Usability Testing

First, I changed the label "Apply discounts" to "APR discounts", so that users can understand what this filter is related to. Then I started to really think about users mental model - users would like to know possible discounts, then filter out if they don't meet requirements. So I decided to make the default to show both discounts, and users can un-check if they don't meet requirements.

Visual Design

I refined the visual of my design based on Credible's branding, to make it feel clean, modern, approachable and trustworthy.

The End

Whoo, this is a really long post, and this is not all of this project. There are some detailed interaction decisions I didn't cover on this page, but you can find them in the full document. This is only one of the small project when I was worked at Credible. If you are interested in more work, contact me to learn more!

< previous

Base CRM redesign

next >

Photo management app