Debt Dashboard Rewamp
Improving clarity, hierarchy, usability for borrowers
Client: Gradwise Fintech
Type: Loan Servicing Platform
Role: UX/UI Designer
Platform: Web Dashboard
Team:
UX/UI Designer (Solo)
Product Manager (acted as stakeholder in design challenge)
Frontend Developer (assumed role to consider dev handoff constraints)
Usability Reviewer (for external feedback and peer critique)
Not your average loan dashboard. Not your average user.
Most loan dashboards are built for compliance, not clarity. Gradwise approached this redesign with a simple ask: keep all functionality—but make it easier to use, easier to scan, and easier to trust.
The existing UI was technically complete, but functionally overwhelming. Long text blocks, unclear hierarchies, and buried actions left users (already stressed) confused about what to do next. Our job was to clean it up—without removing anything essential.
Key challenges we tackled:
📉 Cognitive overload — Users were hit with too much information, too soon. No clear priority or scannability.
🧭 Poor navigation flow — Sidebar lacked structure and made it hard to quickly access critical tasks like payments or help.
🧾 Unreadable loan data — Tables were hard to parse, and critical payment details blended into the background.
🧠 No visual hierarchy — Alerts, reminders, and primary actions shared the same visual weight.
💡 Outdated UI pattern — The existing layout lacked modern UX conventions (no tabs, no cards, no responsive logic).
The procces
Discover → Research → Define → Design → Deliver
🧭 1. Interface Audit
I began by mapping out the hierarchy, structure, and functional groupings of the original interface. Several UX gaps stood out immediately: lack of visual grouping, competing alert styles, and too many text blocks presented with equal weight.
→ Output: Annotated screen breakdown with usability pain points
📐🎨 4. UI System & Components
I created a flexible card-based system with modular blocks for all major content types. Used color intentionally (red = urgent, green = resolved) and adjusted type scales for clarity. Tabs were introduced to consolidate sections without creating scroll fatigue.
→ Output: Figma component system (Auto Layout + Variants + Styles)
📐 2. Information Architecture
I restructured the layout to separate high-attention content (e.g. payment due, next payment, alerts) from low-attention data (historical records, disclaimers). Key areas like reminders, loan lists, and repayment status were grouped into dedicated sections with clearer logic.
→ Output: Wireframe sketches + reorganized content flow
🧪 4. Two Visual Directions
We presented two design concepts:
Version 1.0 was closer to the original in layout, but with cleaner visual styling. Version 1.1 reimagined the UI using cards, tabs, and more whitespace to reduce stress.
→ Final choice: Version 1.1, selected for its clarity, lightness, and visual rhythm
🧑💬 3. User Interviews
To validate UX pain points and understand real borrower behavior, I conducted a set of user interviews with peers who currently or previously managed student loans. The focus was on understanding how they interpret loan data, what triggers stress, and what they actually look for when logging in.
→ Output: Synthesized insights + prioritized usability themes
🛠 5. Handoff-Ready File
Final designs were organized with scalable Figma practices: separated pages for flows, consistent naming, nested components, and mobile responsiveness considerations.
→ Output: Clean Figma file with components and visual documentation
Research & Discovery
Understanding user stress, data overwhelm, and dashboard friction before designing.
We started with a quick discovery sprint—reviewing the original UI, aligning with the brief, and simulating a real stakeholder review. I also ran informal interviews with peers who manage or have managed student loans.
The goal: identify what information users actually care about, where the confusion starts, and what UI elements slow them down.
Then we dove into
→ Conducting 1:1 user interviews with borrowers to understand expectations, stress points, and top-priority tasks when logging in
→ Auditing the original dashboard layout to identify UX bottlenecks, redundant content, and mismatched visual hierarchy
→ Reviewing peer platforms like Truebill and Revolut to benchmark clarity in financial dashboards and explore layout inspiration from the client.
→ Mapping primary tasks (check balance, make a payment, manage auto-pay) and identifying which ones were buried or unclear
→ Testing early hypotheses through feedback loops with peers to refine what “usable” really meant in the context of loans
User Interview Deep Dive
Asking better questions to design a better experience.
I spoke with 3 individuals managing student loans to dig deeper into how they interact with repayment dashboards. Rather than focusing on surface-level usability, I structured the conversations around intent, frustration, and decision-making behaviors.
🎯 Patterns That Emerged
Users scan, not read — They’re task-focused, not exploratory. The UI should support goal completion, not passive browsing.
Overload kills trust — When everything looks “important,” nothing feels credible.
Micro-interactions matter — Even basic hover states or payment confirmations can reduce uncertainty.
Hierarchy drives action — Users make decisions based on visual weight. Payment amount > alerts > history.
🔄 How This Impacted the Design
Created a clean header block with total due + next payment as the primary focus
Grouped secondary info into collapsible cards to reduce noise
Used calm color palette and spacing to reduce overwhelm
Introduced tabs to keep views focused on one type of content at a time
Added microcopy near payment buttons to boost confidence (e.g. “You won’t be charged until…”)
The interviews gave us more than quotes — they shaped what mattered. From layout to copy to visual weight, every change traced back to real borrower behavior.
UX Audit
Stress tested the original dashboard to surface usability blockers.
Before touching Figma, I broke down the existing dashboard page section by section—mapping out visual hierarchy, content weight, and expected user flow. The goal was to understand where the current layout failed to support fast, confident decision-making.
What I looked for:
→ Visual hierarchy: Were primary actions (like payment due) being visually prioritized?
→ Content grouping: Did related information sit together logically, or was it scattered?
→ Redundancy: Were alerts, disclaimers, and balances repeated in unnecessary ways?
→ Scannability: Could users quickly spot next steps without reading full paragraphs?
→ UI friction: Were key components too text-heavy, or using patterns that increased effort?
No clear entry point
Important payment info buried under alerts
Multiple messages styled the same = alert fatigue
Visually flat table — hard to scan or compare
Primary actions don’t stand out
Peer Analysis
Looking beyond visual inspiration to understand structure, flow, and task clarity.
Platforms reviewed:
→ SoFi – Strong at framing user action with a clean hierarchy: payment > goal > history. Also good use of card-based content grouping.
→ Earnest – A modern student loan refinance platform with clear repayment overviews, subtle alert logic, and progressive disclosure for loan details.
→ Navient – A legacy student loan servicer often criticized by users—useful for identifying what to avoid (overloaded tables, jargon-heavy alerts).
→ Chime – While not loan-specific, Chime’s approach to simplifying financial info helped inform how to visually calm the experience.
What I focused on:
→ How platforms handle visual weight and color signaling
→ Whether they separate actionable info vs. archival data
→ How clearly they surface next steps (e.g. “Pay Now,” “View Details”)
→ Use of microinteractions or nudges to guide behavior without clutter
What Stood Out
Our deep-dive into peer platforms and user interviews revealed key areas where Gradwise could evolve — and where modern fintech tools already lead the way.
🧠 Cognitive Load & Prioritization
The dashboard placed all content—alerts, loan details, payment options—on equal visual footing.
Important actions were buried, while less urgent disclaimers were emphasized.
There was no clear “start here.””
🧾 Content Overload
User interviews confirmed what the audit hinted at: too much text, unclear structure, and duplicate info blocks.
Tables lacked hierarchy. Alerts repeated themselves. Loan data was comprehensive—but overwhelming.
🤝 Trust & Task Confidence
Users expressed doubt in the accuracy and completeness of what they saw.
Lack of feedback (e.g. confirmation states, payment history clarity) reduced confidence.
Small UX details were missing that could build reassurance.
🎯 Lack of Action Clarity
Despite being a tool meant for repayment management, the dashboard didn’t highlight what users should do next.
There was no visual anchor for “make a payment,” “adjust autopay,” or even “you’re all set.”
Where we saw opportunity
After auditing the original dashboard and synthesizing findings from user interviews, it became clear: his wasn’t a visual design issue — it was an experience design problem.
Key actions weren’t prioritized / Information was dense but disorganized.
The interface made it harder, not easier, for users to manage time-sensitive financial decisions.
The redesign was an opportunity to address structural flaws — from layout and hierarchy to interaction patterns and content logic — and build a system that better supports task completion, comprehension, and long-term scalability.
Here’s what we focused on
Restructuring the core dashboard hierarchy
So users could immediately see their payment status, understand what actions are needed, and reduce unnecessary scanning.
Grouping content by user intent
Breaking out sections like loan details, payment options, and past transactions to match how users actually think and behave — not how backend systems are structured.
Streamlining interaction design
Fewer buttons, clearer paths. Key actions like “Make a Payment” or “Set Up AutoPay” were elevated and visually reinforced.
Laying groundwork for future scalability
Modular UI patterns and layout logic that can support feature growth (e.g. repayment simulator, loan comparisons) without redesigning the whole system.
Task Mapping: What Users Came to Do
💰 Check current balance
We broke down the core user goals into three primary tasks:
📅 Make a payment /Manage or enroll in auto-pay
🔁 Manage or enroll in auto-pay
While all three were technically present on the original dashboard, none were clearly prioritized in the layout.
The most important tasks were often buried beneath alerts, disclaimers, or secondary copy.
This insight directly informed our information hierarchy — making critical actions more visible, predictable, and frictionless.
What We Focused On
To guide design decisions, we prioritized the overlap between what users needed, what stakeholders hoped for, and what could be built realistically in the first release — without sacrificing flexibility down the road.
Now
The must-haves — high-impact and critical for launch.
Restructured navigation for artists, organizations, and scholars
Simplified grant application flow with clearer eligibility messaging
Improved mobile experience across all major content types
Balanced visual presence of Pollock & Krasner
Clarified non-authentication policy and reduced FAQ confusion
Later
Features with clear value that could roll out post-launch.
Interactive grant finder or filter tool
Expanded grantee showcase gallery
Enhanced SEO strategy for artist archives
Add Instagram or multimedia embeds to deepen engagement
Next
Nice-to-haves for scale or future partnership opportunities.
Collaborator portal for museums and curators
Exhibit request form and integrated calendar
Translation-ready architecture for future global audiences
Setting the Visual Direction
The design needed to do a lot — respect the legacy of two iconic artists, support dense grant content, and stay flexible for future updates. So, we built a visual system that felt structured but editorial — clean enough for press and funding details, yet expressive enough to honor the creative energy behind PKF.
We focused on:
A muted, modern palette that doesn’t compete with artwork
Typography that balances structure and personality
Layouts that could handle everything from application steps to legacy storytelling
Components built for scalability and CMS-friendly editing
A homepage that speaks to every visitor
We designed it to do three things well:
Tell PKF’s story quickly — who they are, what they do, and why it matters
Guide users into the right grant flow or legacy section without second-guessing
Feel visually aligned with the artistic roots of Pollock and Krasner — without overdoing the abstraction
What We Took Away
This wasn’t just a redesign. It was a chance to rethink how an arts organization talks to two very different audiences — creatives looking for support and institutions preserving legacy.
🟡 Poor hierarchy = broken flows
Eligibility info was buried, CTAs were inconsistent, and FAQ links felt like afterthoughts. We restructured flows so users could self-identify quickly and reach the right content in 1–2 clicks.
⚖️ Visual weight isn’t just aesthetic
Pollock’s name dominated the old layout. Our updated structure gave equal presence to Lee Krasner, using typography, layout weight, and naming conventions to subtly rebalance user perception.
🛋️ Tone is UI too
No flashy animation, no gradients. The site feels premium because of whitespace, legibility, alignment, and restraint — not just visual styling. That intentional simplicity made trust the hero.
🧩 Modularity reduces content debt
We built flexible, CMS-ready components with consistent padding, typography, and states — making it easy for PKF to scale or swap content without sacrificing polish or needing custom templates
Impact & Insights
After launch, we kept a close eye on how people interacted with the new experience — not just what they clicked, but where they dropped off, where they paused, and where they stayed.
🕓 Time on site nearly doubled — from 1:45 → 3:10
By restructuring grant flows and prioritizing entry-point clarity, users stayed longer, read deeper, and didn’t bounce after landing on the homepage
🔁 Page-to-page flow improved
Navigation was redesigned around role-based journeys, and we saw fewer backtracks and nav exits — especially across the Grants, About, and Artist Legacy sections.
🧭 Eligibility confusion went down (based on Typeform + feedback)
Post-launch feedback showed fewer mentions of “not sure where to start” or “who qualifies.”
This aligned with our focus on clear grant comparison blocks, visual entry points, and improved CTA placement.
📉 Bounce rate dropped by 18%
Old dead ends (like grantee pages with no clear next step) were redesigned with linked CTAs, related content modules, and better site structure, encouraging users to stay in the flow.
