Wells Fargo Home Mortgage

1. The Situation

Wells Fargo Home Mortgage set a strict internal business goal to compress the end-to-end mortgage lifecycle—from opening to closing—down to a highly efficient 28-day timeframe. However, legacy internal workflows were heavily manual and fragmented. Customer service agents and lenders followed rigid physical scripts, took application details down by hand during live calls, and were forced to manually retro-enter data into disparate legacy systems after the call concluded. This dual-handling of data created massive administrative overhead, increased data-entry errors, and severely bottlenecked the 28-day closing target.

2. The Task

As the solo UI/UX Designer, my mission was to architect a unified, natural digital workspace that consolidated these manual workflows into a seamless, step-by-step internal web application. I needed to partner with cross-functional Business Analysts to dissect complex lending regulations and employee scripts. My task was to translate these intricate compliance steps into an intuitive screen flow that allowed agents to naturally capture and input data in real-time while actively speaking with mortgage applicants.

3. The Action

• Cross-Organizational Brand Governance: Recognizing the need for enterprise alignment, I proactively partnered with Wells Fargo’s consumer-facing design team in San Francisco. I translated their consumer brand guidelines into a distinct, high-density visual framework tailored specifically for complex, data-heavy internal software.
• The "Macro-Systemic" UI Framework: Utilizing my background in web development and content management, I engineered a custom web app template built on fluid, predictable layout principles. Instead of a rigid, fragmented atomic structure, I focused on cohesive page architecture. I balanced text spacing, vertical rhythm, and color contrast to enforce a strict typographic hierarchy. This structural integrity ensured that as pages dynamically expanded, elements like footers scaled predictably without distorting the visual flow.
• Environmental & Cognitive Accessibility: I designed the interface with a deep empathy for the user's high-stress physical environment—a noisy, crowded call center. To minimize cognitive load while agents actively navigated phone conversations, I intentionally "chunked" deep mortgage forms into micro-steps. I engineered a neutral, low-strain color palette to prevent eye fatigue during 8-hour shifts, pairing it with high-contrast, purposeful Call-to-Action (CTA) buttons to guide the agent's next action without requiring vertical scrolling.
• Proactive Defensive Design (Error States): Moving beyond basic "happy path" mockups, I designed comprehensive error validation systems into the wireframes synchronously. I explicitly mapped out inline validation, shifting input states, dynamic error messages, and contextual alternative flows. This strict attention to edge cases guaranteed that developers had a bulletproof roadmap for handling data-entry friction in real-time.
• Cross-Platform Parity (Web to Desktop): In addition to the web templates, I translated this cohesive visual language over to native Windows-based applications. By blending Wells Fargo's custom branding with native Windows form elements, I created a unified cross-platform experience that felt consistent to the end-user while respecting the technical constraints of native desktop rendering.

4. The Challenges & Handoff (Overcoming Friction)

• Engineering Empathy & Implementation Guardrails: Faced with an engineering team that struggled to interpret traditional design specs and spacing redlines, I took proactive action. To protect the visual hierarchy and design intent, I stepped directly into the production layer, hand-coding the structural HTML and CSS templates. This eliminated ambiguity for the developers and ensured absolute fidelity in the final product.
• Navigating Low Tech-Maturity: The department was navigating significant organizational growing pains, operating with junior-level developers who often reviewed technical requirements late in the lifecycle. When engineers pushed for changes that compromised user flow, I stepped up to advocate for user-centered design principles. I worked side-by-side with them to find creative technical workarounds that maintained a high standard of usability without exceeding their development velocity.

5. The Result

• Securing Internal Buy-In: By delivering an exceptionally polished, institutional-grade visual interface, I elevated the internal perception of the software team. This high-end execution directly justified keeping product development in-house, successfully securing the pipeline for future internal project funding.
• Cross-Functional Acclaim: While formal usability metrics were handled externally by Business Analysts, the application received widespread critical praise from internal stakeholders and leadership. My contribution established a new benchmark for internal tool design at the company, leaving a lasting structural blueprint for how Wells Fargo approaches custom data-entry applications.

The legacy design

This comparison showcases the evolution from the highly vibrant, high-density layout of the original legacy interface to a more structured visual hierarchy. By intentionally limiting the color palette, reducing competing visual elements, and utilizing strategic negative space, the redesign successfully lowered cognitive load for the internal agents. The resulting interface delivers a visually clean, conservative aesthetic perfectly aligned with a trusted, institutional banking environment.