UX Research
UI / UX Design
Interaction design and iRise prototyping for the DSF (Digital Strategy and Fulfillment) Home Lending loan servicing experience — mapping the end-to- end customer journey from SIMO (Single-Instance Mortgage Operations — the bank's internal system for tracking individual mortgage application milestones) email notification through e-Sign Consent to the loan status dashboard.
One loan servicing journey. Two paths. One coherent experience.
Wells Fargo's Digital Strategy and Fulfillment (DSF) was undergoing a major enhancement cycle to modernize the Home Lending customer experience. A key piece of that work was the loan servicing flow — the sequence a customer moves through after receiving an email notification to review their application status, sign loan documents, and manage outstanding conditions for a Home Mortgage (HM) or Home Equity (HE) application.
As the Interaction Designer on the DXD team (project ), I was responsible for mapping the end-to-end signing journey, defining the two parallel user flows, producing annotated interaction specs, and building the iRise prototype used for stakeholder
alignment and Baseline engineering handoff. The work lived inside a cross-functional squad including DXD leads, a visual designer, content strategist, product manager, and engineering — all working in parallel sprints.
Project at a Glance
2
Distinct user flows designed: HM standard and SIMO access-code paths
5
Screens mapped in the end-to-end signing journey: Email → Sign On → Welcome →
e-Sign Consent → Dashboard
2+
Sprint cycles ahead of dev — DXD working in parallel to Baseline engineering
HM & HE
Dashboard designed reconciling Home
Mortgage and Home Equity disclosure variants
The Problem
Two loan products. Inconsistent flows. No clear servicing path.
Home Mortgage and Home Equity customers were entering the loan servicing experience from different starting points — but the DSF was trying to push them through a single combined flow. The result was a diagram that confused both the product team and engineering: which screens were new, which were reused, and how the SIMO (Single-Instance Mortgage Operations — the bank's internal mortgage tracking system) email access-code path differed from the standard HM sign-on path wasn't clearly defined.
On top of that, the loan-specific stipulations — HM STIPs versus HE STIPs (STIPs, short
for stipulations, are the outstanding conditions a borrower must satisfy before a loan can close, such as submitting additional income documents, insurance confirmations, or appraisal sign-offs) — required a new dashboard view that didn't yet exist, and the relationship between the e-Sign Consent screen, the SIMO Dashboard, and the downstream Loan Summary and STIPs view needed to be modeled before engineering could scope the work. The team needed clear flow separation, annotated screens, and a working prototype — not a combined diagram that collapsed two distinct loan servicing experiences into one.
The Approach
Split the flows. Map every screen. Prototype before spec.
The first decision was structural: separate the two loan servicing experiences into discrete flows rather than a single hybrid diagram. Each flow had its own entry point, its own email notification type, and its own path through the loan status dashboard — designing them as one was the root cause of the confusion.
01
Flow Separation & Screen Inventory: Produced the two-flow diagram (v6) that replaced the prior hybrid diagram, clearly marking which screens were net- new versus which could reuse existing DSF views. This gave the Baseline engineering team a clean scope boundary and eliminated ambiguity about which components required custom build versus integration.
02
SIMO Email Coordination & Annotationy: The SIMO access-code email was a new customer-facing artifact — sent when a customer needed to track their application status and sign required documents. I coordinated with the visual designer (Angela Shields) and content strategist to define the email's content structure, then annotated how the access code handoff connected to the Sign On entry point and the downstream SIMO dashboard experience.
03
Sketch Concepts → iRise Interactive Prototype: Screen concepts and UI compositions were designed in Sketch first — establishing the visual layout, component structure, and interaction states for each new screen (SIMO Email, e-Sign Consent, Dashboard SIMO, Loan Summary). Those Sketch designs were then built into a fully interactive, functional prototype in iRise, animating state transitions — the e-Sign Consent modal, the SIMO dashboard load state, document routing logic — in a way static specs couldn't convey. The prototype was used in the DXD internal review (11/30 with MMT) and in Listening Lab validation sessions before any engineering began.
04
Dashboard STIPs Design — HM vs. HE: The Loan Summary dashboard needed to reconcile two distinct disclosure stacks: HM STIPs (outstanding conditions the borrower must satisfy to close a Home Mortgage) and HE STIPs (equivalent conditions for a Home Equity loan). I designed the dashboard view to surface both disclosure types in a unified layout — using the existing HE Disclosure and HM Disclosure views as the base, with a new Loan Summary panel as the landing state that routed customers to the correct documents.
05
Sprint-Ahead Delivery & JIRA Story Handoff: DXD worked at least one full sprint ahead of Baseline dev and QA. Each screen and interaction was tied to a JIRA story (DSAF project key) with links to SharePoint-hosted spec documents. All DXD artifacts — flows, specs, prototype links — were versioned and managed in the release-level folder structure Vikas Jain maintained, ensuring engineering never waited on design to begin a sprint.
The Solution
A prototype-first approach to cross-team alignment
The solution wasn't a single screen — it was the system of artifacts that made a complex, multi-LOB loan servicing interaction legible to every stakeholder: product, engineering, legal, content, and executive reviewers. The iRise prototype was the center of gravity for all of it.
KEY ARTIFACT — SIMO EMAIL
The SIMO email was the entry point for the access-code loan servicing path — sent to customers like "Pat Smith" when Wells Fargo was reviewing a property appraisal or required document action.
iRise Prototype
Animated flow from email to dashboard
The iRise prototype covered both flows end-to-end — capturing modal transitions, the e-Sign Consent acceptance state, dashboard load behavior, and document routing logic. Used directly in Listening Lab sessions as the validation artifact before any engineering began.
Interaction Specification
Annotated how the dashboard SIMO state differed from the standard HM dashboard — giving engineering a clear delta against the existing codebase.
Selected Work — Final Design
SIMO Email — Access Code Notification
The SIMO email was the entry point for the access-code loan servicing path — sent to customers like "Pat Smith" when Wells Fargo was reviewing a property appraisal or required document action.
e-Sign Consent — new screen definition
The e-Sign Consent screen was net-new to the DSF: a step between sign-on and the SIMO dashboard where customers explicitly consented to electronic signing.
Dashboard Design
STIPs dashboard — HM vs. HE reconciliation
Designed the Loan Summary landing state to surface both HM and HE STIPs — the outstanding borrower conditions for each loan type — in a unified view, with the existing HE Disclosure and HM Disclosure and Your Documents panels available via navigation.
Loan Summary
HM/HE Disclosure View.
The Impact
Flow clarity unblocked a stalled sprint. Prototype drove alignment.
By separating the HM and SIMO loan servicing flows into two discrete diagrams and anchoring cross-functional reviews in the iRise prototype, the DXD team gave Baseline engineering and the Mortgage Management Team a shared artifact they could act on. The review which used the prototype as its primary presentation — consolidated weeks of pending decisions into a single session. iRise's interaction and functional specification exports became the direct build documents for the Baseline engineering team — developers implemented from those specs without needing additional design clarification. The work shipped to the live Wells Fargo loan servicing dashboard, deployed across Home Mortgage and Home Equity lines of business.
A combined flow that covers two experiences serves neither
By separating the HM and SIMO loan servicing flows into two discrete diagrams and anchoring cross-functional reviews in the iRise prototype, the DXD team gave Baseline engineering and the Mortgage Management Team a shared artifact they could act on. The review which used the prototype as its primary presentation — consolidated weeks of pending decisions into a single session. iRise's interaction and functional specification exports became the direct build documents for the Baseline engineering team — developers implemented from those specs without needing additional design clarification. The work shipped to the live Wells Fargo loan servicing dashboard, deployed across Home Mortgage and Home Equity lines of business.
A combined flow that covers two experiences serves neither
The original diagram tried to show HM and SIMO paths in one linear sequence. Separating them wasn't just clarity for its own sake — it revealed scope that had been hidden: the SIMO path required three new screens the prior diagram had obscured. The structural decision changed what engineering had to build.
The Sketch → iRise → spec export pipeline eliminates handoff ambiguity
Designing in Sketch first established the visual and structural intent. Building that into iRise made the interactions tangible — the e-Sign Consent modal, the SIMO dashboard load state, the branching logic between HM and HE flows — things that read ambiguously in a static redline. Exporting the functional spec directly from iRise meant developers received a single, authoritative document that reflected exactly what had been validated in the prototype. No translation loss between design intent and engineering implementation.
Artifact naming and versioning is a design discipline
Working in a large financial institution with multiple parallel workstreams meant every diagram, prototype, and spec had to be versioned and linked to JIRA stories. Without that hygiene, DXD's sprint-ahead cadence would have created confusion rather than clarity — prior work would have been treated as current, and engineering would have built to the wrong version.
Content and interaction have to be designed together, not sequentially
The SIMO email's access code — a short, system-generated alphanumeric — had to work as both a security mechanism and a clear call to action. Getting the content structure right (the code's visual weight, the CTA copy, the appraisal status message) was as much an interaction problem as a content one. Bringing the content strategist in during flow definition, not after, was essential.
