Discover Home Loans Application Product

This project was originally set out to be a redesign, so the product and marketing teams knew from the start there were design flaws, UX inconsistencies, and design-hierarchy problems baked into the existing Home Loans application. My role as Principal Product Designer was to bring order to an overbuilt file, unify it with the emerging Discover Design System, and ship measurable experience improvements.

Project Problems

• Too much content and too many pages (an overbuilt design), so no team member could navigate the Figma file in a way that made sense for their role.
• Incomplete navigation logic from page to page, including high-level menu items.
• Components were not unified against the new Discover Design System Library — though we had flexibility to contribute to it while keeping our own unique components, since the application was a unique product.
• Design sections (application parts, registration, funding, etc.) were split across several product managers with no universal organization system.
• Documentation was overbuilt and not one-size-fits-all for every internal employee referencing the designs.
• No prototype existed to demo the development environment to leadership or help customer service agents troubleshoot.
• Incomplete variations of error pages.
• No breadcrumbs for page logic and menu logic.
• Document submission per loan took too long — an average maximum of 2–3 months.
• Homepage task structure was inconsistent based on priority and length of each task.

Work Done

• Login and registration flow with proper 2FA and agreement to terms and conditions.
• Newly designed navigation logic and a simplified navbar and nav menu — removing unused items and using a mobile-first approach.
• Created logical, simplified components scoped to the project but also submitted into the Design System Library — for example, a pill tab component that proved most effective for the many pages that were formerly split apart.
• Built a high-level organizational design structure unifying the start-to-finish product along the loan applicant's pathway, so every internal department could read it: large orange labeling for enterprise-scale legibility, a legend for custom documentation sections (colored boxes for animations, design boards, conditional screen states, team review-status indicators, and legal submission status in a replicated Figma file).
• Maintained a functional design system (v1.0) specific to the Home Loan Application — the "internal website" that became the predecessor of Discover's newer enterprise system — keeping developers on the correct components current within Storybook for React Native.
• Built an interactive prototype to demo the development environment to leadership and give customer service agents a reference for troubleshooting.
• Completed the missing error-page variations for consistent handling of edge and failure states across the flow.
• Added breadcrumbs to clarify page logic and menu logic, giving users a clear sense of location and path through the application.

Official Case Study Problem Statement

While there were many UX problems I worked to solve alongside the marketing team, product manager, and developer teams, one stood as the biggest hurdle slowing the efficiency of the entire application process: Document Submission. There were 86 different document types in combination with over 20 different application specifics, which varied how many document types each applicant would face.

In Sync with the Discover Design System Library

The enterprise-level design system was created, maintained, and led by Ravi Jain. Coming into this project, leadership provided me with specific leniency to keep the Home Loans App within its own version of the prelaunch design system. The generic buttons, fonts, grid, icons, UI structure, and top-level page components were all uniform with the current design system.

Specific tab components, summary cards, graphical charts, graphical table presentations, and customized process-based buttons were all created and maintained by me separately for the Home Loans App — built to be submitted and reviewed by the design system team for approval.

Design System Prototype

Having access to the document CMS from the agents showed which documents averaged an efficient timeframe to complete. Certain documents were not only harder to find but harder to complete — some submissions required multiple documents for a single validation step that agents had to clear.

In the old design, document submissions were stacked based on name and surfaced as soon as they became available — it could be 2 at once or 8 at once. For the new design, we wanted to present what was easiest and most basic first, then what took the longest. This also revealed how long submissions took to complete and which tasks were specific to each document requirement.

The new design became modular: the user could see all documents at once, connect with agents directly, and know whether a document was processing or complete. The old design required them to be pinned to the module, edit, and resubmit — making the user feel stuck. If the changes were simple and submitted once, users could then connect directly with agents via the "Messages" page.

Issues From the Old Design

• Accordion-style to-dos that appeared in random order and at any time depending on applicant type.
• Certain to-dos were not part of the document submission model at all.
• The user didn't know which one to do, how long it took, what the document looked like, or what its progress was.
• No consistent messaging except phone support with the Discover customer service team.
• No visual UI tracking system.
• No integrated chat to piggyback edits.
• Not enough sample documents — and the ones provided were outdated.
• Agents focused more on phone calls than online messaging, which sometimes introduced delays.

The redesign replaced a stack of unpredictable accordions with a single modular surface — ordered by effort, tracked across three stages, and connected directly to agents. The flow below contrasts the old pinned-accordion experience with the new modular model.

Mapping the Document-Submission Experience

In the original product, document submission lived in two places at once. From the Account Summary, a "To-Dos" card let the applicant upload a document directly. The very same documents also appeared on a separate Documents tab as individual cards — each with its own Upload, Update, or Sign action. Having two entry points for one task was a constant source of confusion. Whichever path was used wrote a record to the Documents tab, but the two locations didn't always stay in sync — a document could read complete in one place and unfinished in another. When an agent needed a correction, the request came back to that same card, roughly 80% of the time by phone and 20% through messages, forcing applicants to bounce between modules with no live tracking. The result was exhaustion — and an average of 2–3 months to finish.

The redesign collapses both entry points into a single, fully functional Upload Module that updates in real time. The individual upload cards are gone; every document is grouped by clear status — Pending or Submitted — and all edits route through the Secure Message Center, where agents adjust submissions directly instead of calling. Beneath the requested documents, a new Upcoming Documents section shows applicants what's coming next, so they can gather and prepare ahead. One source of truth, one communication channel, and live status replaced the back-and-forth.

Below is the old version of the application — the starting point that shaped the redesign. These screens illustrate the stacked accordions, fragmented messaging, and inconsistent task hierarchy the new modular system was built to replace.

"We need 7 documents" — the original document request screen with stacked, unordered to-dos.

Account Summary — tasks pinned to the summary page with inconsistent priority.

Upload modal — the edit-and-resubmit interaction that left users feeling stuck.

Messages — the predecessor to the secure message center, before agent-direct edits.

Compare mortgage options — dense comparison UI prior to component unification.

Neighborhood guide — a supporting view carried into the redesign's component audit.

From Stacked Accordions to a Modular System

The new design replaced the pinned accordion model with a single modular surface where every required document is visible at once — ordered by effort, surfaced gradually as the application progresses, and clearly marked across three stages: To Do, Processing, and Complete. The pill tab component unified pages that were formerly split apart, and a simplified, mobile-first navigation gave every internal department a consistent way to move through the applicant's pathway.

Complete Prototype

The full, fully functional Home Loans application prototype — navigate the menu, open the Summary, Documents, Messages, Profile, task flows, and the Design System, all live.

Key Learnings

On an enterprise project, the file is a product. Before any screen could improve, the team needed a shared, role-aware way to read the design — large orange labeling, a documentation legend, and conditional screen states did as much for velocity as any UI change. Organization was a deliverable, not overhead.

The biggest experience wins came from removing pressure, not adding features. Making documents predictable, ordered, and trackable — and connecting users directly to agents — reduced the anxiety that was quietly costing days of progress. Designing for the agent and the applicant at the same time is what turned a 2–3 month bottleneck into a process people could actually finish.