Case Study: Student Loan Homepage Redesign
Redesigned the Loan homepage to improve user engagement and efficiency. Created fresh site strategy, layout, and style guide.
Time: 3 days
Role: Sole Designer
Tool: Figma
The Challenge
Problem: The current student loan homepage confuses users and does not meet their main objectives on the site. How can we redesign the homepage to increase the ease of use and encourage students to keep track of their repayment process?
STRATEGY & SCOPE
Let's start by talking to real people!
_Page_05.png)
What is our users’ story?
_Page_07.png)
Recent graduate Micheal finds the repayment process confusing, stressful and dry.
Micheal currently experience 3 pain points
Current Site
1. Too much information & options
“I don’t know where I should go. I want to find exactly what I’m looking for immediately. I feel mental stress & attention overload.”
2. Lack of feedback on progress
“I’m stressed throughout because I don’t know if I’m doing things right, if I’m on the right track in terms of repayment, and where I am in the entire loan progress.”
3. Lack of support
“There are a lot of things I don’t understand that I want immediate answers for.”
_Page_28.png)
His experience is a downward spiral of frustrations and stress...
DESIGNS
1. Prioritized user & business objectives
New Design
Lessened the importance of notifications on the site
When users go on the site they avoid reading notifications, so I prioritized the content users need over notifications in the page structure.
The number of notifications on the original site causes psychological stress, and users only read notifications they received through email and text. Therefore I redirected notification efforts to focus on email and text and lessened their importance on the website.
_Page_23.png)
Original Site
2. Clarified visual roadmap
New Design
_Page_4.png)
Categorized information to show
all category types at first glance
Increased the effective use of the surface area on the top page by prioritizing information users actually look for and outlining them clearly.
On the original site, only a small portion of the top page is used to respond to user goals. This causes frustration and confusion because users only read the top of the page when they come onto the site. Not seeing what they need immediately makes them feel confused and lost.
Original Site
_Page_26.png)
3. Encouraged users with emotional rewards
A sense of progress provides emotional comfort and encourages users to stay on track
" If I could see how much my total loan has decreased after I make a repayment, I wouldn't feel as much despair as I feel right now. It's like a bottomless hole."
New Design
_Page_2.png)
Following this insight, I designed a new feature that shows loan amounts in relationship to the total balance to create a sense of progress for users.
THE OUTCOME
An efficient and emotionally rewarding experience for Micheal
1. Clear structures showing items relevant to user goals
2. Communicate Micheal's overall progress in his repayment plan
3. Deliver immediate means of explaining what is being presented.
STRUCTURE & SKELETON
Design Process
When choosing between a Categorical or Linear layout for Information Architecture, I tested the wireframes out with users first on paper, then on Figma.
Categorical Layout
PRO: Concise immediate sections show features of the site clearly
CON: More mental work & time taken for decision-making upfront
Linear Layout
PRO: A clear route to follow from top to bottom
CON: Feels like a stressful bill form, there's no choice of pathways
_Page_39_edited.jpg)
Both choices has equal amounts of benefits and setbacks...
When in doubt, let's returned to who our user is
Micheal finds the repayment process confusing, stressful, and dry. The Categorical layout applies to Micheal more. He needs a sense of choice upfront & dynamic visuals breaking up the information.
_Page_39_edited.jpg)
Categorical it is!
_Page_07_edited.png)
STYLE GUIDE
A clear, friendly, and responsive experience
_Page_4.png)
REFLECTIONS
Refreshed the student loan home page with a new strategy, scope, layout, style guide, and user journey consistent with user and business goals, creating a rewarding experience.
_Page_2.png)