Bread Loans
Redesigning a key feature to help customers easily consolidate their credit cards.
Context
Bread Financial is a technology-driven payments company transforming the way consumers shop with our buy now pay later and personal loan products.
Who is Bread Financial?
What is Bread Loans?
One of the newest products we’ve launched is Bread Loans, which is a tool enabling consumers to refinance existing debt through a Debt Consolidation loan.
I redesigned the Add Card functionality of the flow. Here’s a sneak peak of both experiences:
Before
After
Design Process
Why did I redesign this experience?
After launching Bread Loans, we looked at our analytics tools and noticed that there were a lot of back and forth and rage clicks in the section where they enter their balances. We decided to investigate further and conducted usability tests.
Here are some of the main pain points:
We want to to make sure our users can have a seamless experience when entering their balances. Before I dove into explorations, I established some design goals to help me stay on track.
Here are the design values I kept in mind:
First Iteration
Add Card Flow
Demo
User Testing
Unmoderated usability test
Method
Tool
Usertesting.com
Audience
10 participants, age 23-54, has at least one credit card
Is it easy for users to find their entered balances/saved cards?
Are they able understand everything?
Does this visual treatment decrease cognitive load?
Can they tell how to edit amount or delete cards?
Objectives
Key Findings and Recommendations
Insight #1
4/10 users thought the autosave caught them off guard/preferred not autosave in case they want to change something before saving.
Recommendation
Find a way to not autosave but still not have too many user action items.
Insight #2
2/10 users said they would’ve wanted to know there was a max number of cards so they could prioritize in case they really had that much debt.
Recommendation
Show somewhere the max number of cards to prevent users to have to delete cards late.
Final designs
Add Card Form
As the Add Card form slides in, it also expands so that it eliminates multiple action buttons which helps relief mental effort.
Carousel of Cards
Users can easily swipe through the carousel of cards to see their entered balances.
Edit and Remove Card
Card visibility combined with simple language allows users to easily manage their cards.
Validation
I conducted a second round of usability testing to validate the final designs. This is how it went:
Impact
After we pushed the changes, these were the results from the redesign:
Component Library
Takeaways
Involve engineering early and often. They often have more context or knowledge around capabilities and constraints that might inform your design decisions. For example, I partnered with engineering to decide the type of carousel that would be developed more nimbly while not compromising UX.
Be prepared to be wrong. We always think we know what the user would want but that’s not always true. I thought the users would’ve responded better to the autosave function but they didn’t. #usertesting
Don’t be afraid to challenge an existing solution even if it has just launched, especially If there’s clear evidence that something isn’t working or could be improved.