FICO Dashboard Redesign

UX Research & Design

Client: Discover Financial Services
Role: Lead UX Researcher & UX Designer
Timeline: ~6 months
Team: Project Manager, Account Lead, Client Product Owner & Stakeholders, UI Team, Copywriter, Developers
Platforms: Responsive Web + App

Discover asked us to modernize their FICO credit dashboard, a crucial but outdated tool used by millions to monitor credit health. 

I led the research and early-stage design, then stayed on to support UX decisions through visual design and usability testing. My work ensured the final product was accessible, data-driven, and user-centered.

Background & Strategy:

Grounding the Experience in Research

Challenge

The existing dashboard was inaccessible, visually dense, and misaligned with Discover’s current design system. 

We needed to create a responsive experience that was clear, educational, and emotionally supportive, especially for users with lower credit scores, who may feel stress or confusion when engaging with their financial data.

Strategic Goals

  1. Understand User Needs: Identify and address pain points, needs, and goals of users interacting with the FICO dashboard.

  2. Analyze Competitors: Study similar financial products to identify UX best practices and competitive strengths.

  3. Evaluate Technical Feasibility: Ensure designs could be implemented within tech constraints, collaborating with development teams to align on possibilities.


UX + Accessibility Goals

  1. Create an Intuitive Dashboard: Design a clear, intuitive experience that can be easily navigated by users of all financial literacy levels.

  2. Design for Progressive Disclosure: Allow users to control the depth of information they consume, keeping the interface clean and reducing cognitive overload.

  3. Prioritize Accessibility: Align the experience with accessibility guidelines (WCAG 2.1 AA) to ensure an inclusive experience for all users, including those with disabilities.

My Approach

I began with a competitive audit of FICO and credit score experiences from Capital One, Credit Karma, Chase, and others. The goal was to identify industry trends, design patterns, and accessibility opportunities that could inform an updated user experience.

I analyzed:

  • Layout structure and content hierarchy

  • Color usage and visual density

  • Accessibility

  • How educational content was integrated into the overall experience

Close up images of the different ways FICO scores were displayed by competitors.

Key Recommendations from Competitive Audit

From this analysis, I developed a set of design principles to guide early wireframes.

Visual Design

  • Place FICO score at top of page for instant visibility

  • Separate score from other numbers to reduce confusion

  • Use subtle “traffic light” colors that don’t compete with brand palette

Layout & Structure

  • Use an F-shaped layout to support scanning behavior

  • Organize content in clear, distinct sections

  • Maintain spacing and alignment for readability

Content & Hierarchy

  • Prioritize score and education around how it's calculated

  • Keep content minimal to avoid cognitive overload

  • Combine data with bite-sized educational context

  • Make each score factor transparent and easy to understand

Personalization & Marketing

  • Surface relevant marketing based on user needs

  • Personalize support content around credit, privacy, or alerts

This example of Credit Karma vs Bank of America highlights the importance of page hierarchy, use of white space and F-pattern layouts for usability and comprehension.

Wireframe Strategy

Audit + Best Practices

I used a content-first wireframe approach, structuring the experience around clarity, simplicity, and accessible hierarchy.

I applied audit findings directly into the wireframes, such as placing the score top-of-page, using expandable tiles for education, and adopting an F-pattern layout. These choices helped reduce cognitive overload and aligned with accessibility goals.

FICO score placed prominently at the top of the page and is separated from other data points to reduce confusion

Presented the five contributing factors in order of importance, each with a brief explanation

Maintained a clean, modular F-shaped layout for quick scanning

Used progressive disclosure to minimize visual overwhelm

Integrated educational content throughout the experience.

UI Collaboration & Accessibility Consulting

My Role in Visual Design

After handing off wireframes, I remained involved throughout the UI design phase to ensure UX goals and accessibility standards were maintained. I:

  • Provided research-backed recommendations when clients questioned best practices (e.g., the ubiquity and meaning of “traffic light” colors)

  • Collaborated with the UI designer on modal behavior, layout details, and interactive states

  • Used best practices to inform recommendations on accessible color usage, spacing, and iconography

Version 1

Version 2

There were big changes from design V1 to V2

We shifted from a Layer Cake layout to an F-shaped layout for the factors impacting the FICO score.

We explored using less color and simplifying the factors impacting the FICO score tiles.

Version 3

In this version, client wanted to see how the FICO score would look if placed in the marquee.

We advised against this as we were concerned users might overlook the score in the marquee and/or become overwhelmed by the size of the Score History chart.

Final Version

Ultimately the client aligned with our recommendation to simplify and coordinate all of the charts and graphs with the ultimate goal of making the FICO score the most visually impactful part of the page.

UX Wins

Reduced cognitive load by chunking content into logical sections

Achieved stakeholder alignment on page hierarchy using evidence from user research and best practices

Preserved progressive disclosure and detail-page logic across FICO factors

Testing & Iteration: Grounding in User Feedback

Research Method

I led two usability studies:

  • A general user test across desktop, mobile browser, and app

  • A test with users with disabilities (including screen magnification, mobility aids, and Voice Control)

Tested assets:

  • Six high-fidelity prototypes (A/B variants for each platform)

  • FICO dashboard and supporting content (educational tips, detail pages, tooltips)

Version A - Separate pages

Version B - In line accordion

Images from participants using screen magnification during usability test

Testing Goals

Measure findability and clarity of the score, score history, and contributing factors

Assess user comprehension of terminology and visualizations

Evaluate navigability and ease of use across accessibility needs

Key Findings

  • Design B (inline accordion) was preferred by participants using screen magnifiers and hands-free assistive devices. Expanding content in place minimized disorientation and backtracking.

  • Progressive disclosure worked well across screen sizes. Users appreciated the ability to control how much information they saw at a time.

  • Inline education boosted confidence. Participants valued the short, supportive explanations that accompanied each FICO factor.

  • No clear visual preference emerged between Design A and B among participants not using assistive tech, affirming that accessibility-centered decisions didn’t compromise general usability.

These findings directly influenced our decision to move forward with Design B for the final build.

Developer Handoff

Why the Annotations Mattered

This project required a high level of UX documentation for several reasons:

  • Every component was a custom build—from expandable score factors to the modular detail views—meaning interaction behavior had to be defined from scratch.

  • Accessibility needed to be embedded at the structural level. I annotated focus order, reading sequence, alt text guidelines, and interactive states to ensure WCAG 2.1 AA compliance.

  • The handoff included multiple form factors (desktop, mobile browser, and app), so annotations had to cover responsive behavior across breakpoints.

  • My Figma annotations became a living guide for developers—ensuring clarity on how each element should behave, appear, and be announced by screen readers.

Screenshot of zoomed-out view of annotated Figma

Screenshot of dashboard page with UX Interaction annotations and annotation notes

Screenshot of dashboard page with focus and reading order annotations

Detail view of FICO graph with focus order and reading order annotations as well as alt text for screen readers.

Detail view of UX annotations specifically related to dynamic content

Detail view of UX annotations specifically related to dynamic content

These annotations helped streamline development and ensured that accessibility and usability weren't treated as last-minute add-ons.

Reflections

This was one of the most holistic and fulfilling projects I’ve led—spanning research, strategy, design, testing, and accessibility.

I’m especially proud of:

  • Making complex financial data digestible without oversimplifying

  • Championing accessibility from the earliest stages of design

  • Designing for emotional reassurance as well as functional clarity

While we completed the final handoff, the client was later acquired by CapitalOne, which impacted the development timeline. CapitalOne has since released a redesigned FICO dashboard that closely resembles our final designs—suggesting our work laid meaningful groundwork for what followed.