Background
The Digital Mortgage Experience (DME) guides Bank of America clients through one of life’s biggest milestones: buying or refinancing a home.
It consists of 4 responsive web application flows: prequalification, pre-approval, mortgage, and refinance.
Problem
The 365-page DME was outdated, not aligned with the modern design platform, and not fully WCAG 2.1 compliant, creating accessibility barriers for users and regulatory risk for the bank.
A traditional process would have required over 730 designs, which exceeded our team capacity.
Result
Through a system-focused approach, we delivered a modern, accessible experience while reducing design output by 84%.
End users
•
First-time homebuyers: New to the mortgage process, often anxious, and need guidance, clarity, and transparency at every step.
•
Experienced homebuyers: Familiar with mortgages, value efficiency, self-service, and quick access to key information.
•
Current homeowners looking to refinance: Those who already have a mortgage and want better terms, lower rates, or cash-out options.
Internal users
•
Tech partners: Need clearly documented design assets for efficient migration.
•
Accessibility partners: Need to review designs and add accessibility annotations at the component and page level.
•
Approvers: Require clarity on design changes to make informed decisions.
•
Migrate all 365 DME pages to Bank of America’s latest design system platform and infrastructure.
•
Ensure full WCAG 2.1 compliance.
•
Maintain functionality and content while improving clarity, consistency, and usability.
Rather than redesigning 365 pages individually, we focused on system design, crafting reusable components and page archetypes. This approach streamlined delivery for internal teams while creating a cohesive, accessible experience for end users.
Research & audit
We started by reviewing prior research and mapping high-level user flows to understand the DME's structure. Then, we audited every interface element, sorting them into design system components or custom builds. Patterns emerged, which we converted into reusable components and page templates, establishing a consistent, scalable foundation.
Design explorations & proposal
We explored multiple layout options to document how each element and pattern would transition, ultimately landing on a migration guide that clearly captured visual references and technical identifiers of “what it was” and “what it will be” across desktop and mobile breakpoints.
The guides were organized into:
•
Design system elements: tokens, components, native overrides, containers
•
Custom builds: DME-specific elements and patterns
We presented the guide to the tech team and iterated based on feedback, ensuring it was practical and easy to implement. To show how components worked together, I created 8 page templates with specs and delivered 80 mockups, covering every unique page structure, pages with custom components, and any screen with content or design pattern updates, providing a clear, scalable blueprint for the team.
Review & refine
To ensure consistency across the BofA ecosystem, I collaborated with other XD teams, sharing best practices and aligning on design approaches. I also led reviews with XD, product, tech, business, and accessibility partners to ensure alignment on strategy and handoff approach.
These reviews surfaced a gap between design and development libraries: designers were using text components with bundled font properties, but developers didn’t have equivalent components and had to adjust text manually. I bridged this gap by adding text property annotations to the typography migration guide and other components with styling gaps, improving clarity and implementation accuracy.
Accessibility was another key focus. Using Mac VoiceOver, I experienced the DME as screen reader users would and worked closely with accessibility partners and the content designer to ensure the experience was inclusive and clear for all users.
Throughout the project, I refined documentation, migration guides, page templates, mockups, and custom components based on team feedback, and delivered a polished, scalable set of designs to the tech team in Q1 2024.
Working closely with tech, we resolved 154 DME-specific defects and 3 enterprise-level defects (including 1 critical Sev 1), leading to a successful deployment. I visually QA’d all 365 pages, prioritizing defects by severity to address critical issues first under a tight timeline.
I collaborated with developers to refine custom components, balancing design intent with technical and scope constraints, and helped establish a streamlined defect-documentation process that aligned with their workflow, enabling the team to filter and prioritize issues by flow, page, breakpoint, defect type, component, and severity.
The DME migration successfully launched in November 2024 as a modernized, WCAG 2.1-compliant set of responsive web flows. See it live!
Our approach:
•
Reduced design workload by 84%.
•
Established scalable migration methods recognized by leadership.
•
Selected as a case study to socialize across XD teams.
•
Resulted in individual recognition for impact and collaboration.
The project extended nearly two years due to pauses and roadmap shifts, but key takeaways include:
•
System-focused design saves time and increases consistency: Reusable patterns reduced manual effort and delivered a cohesive experience.
•
Close collaboration with developers: Early working sessions and tailoring the QA process made it easier, and more likely, for developers to address minor aesthetic defects. Building that give-and-take early on really paid off.
•
Early accessibility involvement: Accessibility partners are usually assigned near design handoff, but suggesting to engage them during discovery could have uncovered issues sooner and made WCAG 2.1 integration smoother.
