Skip to content

Fidelity Student Debt

Overview

I work on B2B and B2C problems related to student debt at Fidelity. I joined Student Debt Direct with an ambiguous brief to improve the post-enrollment experience. Working with the team, I implemented a new design system, fixed accessibility issues, and simplified loan management.

Type

Product Design

User Experience

User Interface

Visual Design

Year

2024

Screenshot of user experience work in figma
Before and after comparison of the main dashboard redesign Before and after comparison of the loan management page
Learning the product

44 million Americans have student debt. Student Debt Direct is a workplace benefit where an employer pays down some of their employee's student loans each month, mostly as a hiring and retention incentive.

Verification runs through cumbersome loan servicer systems, and regulatory changes ended our plans to automate it. I started by mapping the entire product lifecycle in Miro with our systems analyst.

UX lifecycles miro board

Partnering with a UX researcher

I supported our UX researcher on a heuristic study, and coded the frontend for the reference interface we used in it.

We worked through the product scenario by scenario the way a user would, writing down everything that tripped us up. Talking with people inside Fidelity who use the product confirmed what we were finding.

Miro board alongside Visual Studio Code for reference UI development

Miro board and screenshot from Visual Studio Code

Identifying pain points

Two findings stood out. Users weren't clear on how loan management worked, and the product's communications were frustrating employees trying to manage their benefits.

Research finding about loan management confusion

Users aren't clear on loan management

Research finding about communication issues

Communications are problematic

Lots of sketching and facilitating discussions

I kept my sketches rough on purpose. Pairing unpolished ideas with clear examples of the current problems made it easy for product owners, analysts, and developers to weigh in, and gave the team ownership over the direction.

Zoom meeting with Miro board for collaborative ideation

Discussions on Zoom, using Miro to collaborate on ideas

Hand-drawn sketches and flow diagrams

Sketching, primarily with flow diagrams

Solution: separating loan management into two flows

The biggest change was splitting loan management into two flows. Editing an existing loan is short and focused. Adding a new one is separate. Users can also see a historical record of their accounts, which builds trust and makes it easy to swap in the loan they want paid off first.

Redesigned dashboard with separate edit and add loan actions

New additions to the dashboard include separate actions for editing and adding loans

Edit loan flow wireframes
Add new loan flow wireframes
Moving to a new design system

Fidelity is overhauling its design system to unify its products, with component reuse and accessibility as priorities. I'm helping establish consistent patterns across the enterprise, like the way you edit an account.

Post-enrollment dashboard with new design system

Updated look for the post-enrollment dashboard

Loan management interface with new design patterns

Updated look and pattern for loan management

Telling the user what's wrong

We added inline alerts for problems with a loan. Each one explains what's wrong and how to fix it, so users can get back to receiving payments.

Loan management showing inline alert about payment address issues
Change loan interface with error state handling
© Brian Sekelsky