UX Annotation Document · Horizon Splash Portfolio

Capital One
Builder Program

Design Rationale & UX Methodology

Project
Capital One Builder Program App
Deliverables
4 UX Artifacts + 31-Screen Prototype
Document Type
UX Annotation / Design Rationale
Year
2025
Interactive · Skip to Prototype Try the live Builder Program experience →
01 · Key Personas
02 · User Journey
03 · Card Sort
04 · Interactive Prototype
01
Deliverable · Key Personas

Who the Builder
Program Is For

Three distinct user archetypes — each with different levels of financial literacy, credit history, and emotional readiness — all converging on the same need: a structured path to credit.

Underbanked Newcomers
Struggling Borrowers
Young Adults Building Credit
Key Personas

Loads from horizonsplash.com

Deliverable 01 · Key Personas
Three Paths
to Credit

Each persona was defined by their core financial need at sign-up — establish credit, rebuild credit, or start off right — and by the primary emotional state that shapes how they experience every screen: Confused & Anxious, Frustrated & Uneasy, or Curious & Overwhelmed.

↗ Open Full Size
View Deliverable
keypersonas.png
Design Intent

One Flow, Three Mental Models

All three personas move through the same 7-phase onboarding sequence, but the emotional stakes are completely different. The interface had to earn trust from someone who has never had U.S. credit, reduce anxiety for someone who has failed before, and feel approachable for someone just starting out.

Key Tension

Trust Before Data Collection

Every persona must provide SSN, employment details, and bank credentials before approval. The prototype sequences trust-building elements — the 256-bit encryption badge on S2, an SSN notice on S3, and two alternative bank linking paths on S17 — specifically before each sensitive data request.

Key Finding

Shared Anxiety, Different Trigger

Newcomers worry about identity theft. Struggling Borrowers worry about repeating past failures. Young Adults worry they're making the wrong move. The card sort revealed these as three versions of the same fear — leading to contextual trust signals placed at the exact moment each persona's specific anxiety peaks, not in a generic footer.

02
Deliverable · User Journey Map

5-Phase Journey from
Sign Up to Build Credit

End-to-end emotional arc mapping what users do, think, and feel across Sign Up → Provide Info → Accept Terms → Link Bank → Build Credit — with pain points and design opportunities at each stage.

Phase 1 · Sign Up
S1
Landing
S2
Acct Setup
Phase 2 · Provide Info
S3
Basic Info
S4
Contact
S5
Finances
Phase 3 · Terms + Identity
S6
Terms
S7
Sec Q's
S8
Acct Verify
S9
Address
S10
Approved!
Phase 4 · Onboarding
S11
Card?
S12
How It Works
S13
Miss = Close
S14
Ways We Help
S15
Score Goal
S16
Activity Goals
Phase 5 · Link Bank
S17
Choose Bank
S19–23
Link Form
S24
Congrats
Phase 6–7 · Build Credit + Recovery
S25
Dashboard
S26
No Score
S27
Jun Missed
S28
Missed!
S29–30
Recovery
S31
Red Dash
User Journey Map

Loads from horizonsplash.com

Deliverable 02 · User Journey Map
Curious → Worried
→ On Track

The emotional arc dips through Uneasy (Provide Info) and Worried (Link Bank) before recovering at Build Credit. Each sentiment drop in the journey map corresponded directly to a screen redesign decision — the map was used as a defect log, not a decoration.

↗ Open Full Size
View Deliverable
userjourney.png
Design Intent

Map the Dip, Fix the Dip

Every sentiment dip was treated as a screen-level design problem. The Provide Info dip drove the decision to split personal information across three screens (S3, S4, S5) with a single clear purpose each, rather than one long scrollable form — directly targeting the "too many questions" pain point.

Key Finding

Three Distinct Friction Peaks

Too many questions on Sign Up, strict penalty language on Accept Terms ("One mistake and I'm out?"), and bank login trust on Link Bank. The journey map isolated these so each could receive a targeted fix — screen splitting, a visual checkbox checklist, and two alternative linking methods respectively.

Opportunity

Save & Resume Prevents Drop-Off

The Provide Info and Link Bank phases are the longest in the flow. If a user exits mid-way, losing all progress is a critical failure. The prototype addresses this with explicit step progress dots and phase labels that anchor users' place — making the flow feel finite and recoverable rather than endless.

03
Deliverable · Card Sorting

Issues & Emotions
by Persona

Card sorting exercise mapping key issues, user actions, and emotional reactions for each persona — revealing the hidden mental models users bring into the onboarding flow before they tap anything.

Card Sorting — Issues and Emotions by Persona

Loads from horizonsplash.com

Deliverable 03 · Card Sorting
What Users Think
Before They Tap

The card sort revealed that each persona arrives with a fundamentally different internal question — "Will this be safe for me?" vs "What if I can't make a payment?" vs "Is this even the right move?" The prototype answers all three questions passively, through interface elements, without asking which one applies.

↗ Open Full Size
View Deliverable
cardsorting.png
Methodology

Emotions as Navigation Signals

Rather than sorting by feature category, the card sort organized by emotional state. Confused and Anxious users need different screen pacing than Frustrated or Overwhelmed users — even when completing the same form. This drove single-purpose screens over combined steps throughout the prototype's 31-screen flow.

Key Finding

Safety Is the Universal Unlock

Every persona needed safety reassurance before they could proceed comfortably — but each framed it differently. This led to the 256-bit SSL badge on S2, the encryption notice before SSN on S3, the two-path bank linking on S17 (instant login OR manual routing entry), and the "all set" confirmation modal after linking before asking to activate the card.

Design Impact

Contextual Trust, Not Generic Footers

The card sort pinpointed exactly when each persona's anxiety peaks during the flow. That's why trust signals in the prototype appear as inline banners immediately before the specific field that triggers concern — SSN entry, bank login, and the penalty agreement checkbox on S6 — rather than passively sitting in a terms footer.

04
Deliverable · Interactive Prototype

31-Screen Interactive
Mobile Prototype

Full mobile prototype covering all 7 phases — from Landing through Account Setup, Personal Info, Terms & Identity, Onboarding, Bank Linking, Dashboard, and the complete missed payment recovery flow. Navigate directly in the phone frame below.

Deliverable 04 · Interactive Prototype
31-Screen Live
Mobile Prototype

Tap through the complete Builder Program flow — account creation, personal info across three screens, terms agreement with visual checkboxes, identity verification, approval, card receipt confirmation, credit score goal setting with an interactive vertical slider, bank linking with two methods, and the full dashboard.

The prototype includes two distinct dashboard states (credit score visible vs. not yet available) and the full missed payment recovery sequence — red-screen alert, "What's Happens Next" extended tracker with 12-month timeline, and the overdue red dashboard with improved utilization score.

↗ Open Full Screen
Screen Inventory · 31 Screens
S1–S2
Landing + Account Setup
S3–S5
Personal Info (3 screens)
S6–S10
Terms + Identity + Approval
S11–S16
Onboarding + Goal Setting
S17–S24
Bank Linking + Activation
S25–S27
Dashboard (3 states)
S28–S31
Missed Payment Recovery
S36
Card Not Yet Received Branch
Open Prototype
horizonsplash.com · capitaloneapp.html
What to Look For

The Onboarding Sequence (S11–S16)

After approval, navy screens S11–S16 walk users through program rules before dashboard access. Two payment tracker visuals — 5 green checks for graduation, 2 checks + 3 red X's for failure — make consequences tangible before the user has made a single payment. The vertical score slider on S15 sets personal stakes immediately after onboarding.

What to Look For

The Bank Linking Flow (S17–S23)

S17 shows eight banks with instant login modals. S19–S23 show the manual routing path in four progressive states — empty, routing detected (with auto-filled bank name), dropdown open, and fully complete. Two paths serve two trust levels. The "You're all set" modal closes the anxiety loop before asking to activate the card via CCV entry.

What to Look For

The Missed Payment Path (S27–S31)

Navigate to S27 to see the JUN missed payment on the dashboard, then continue to the red-screen sequence. The extended tracker on S29 visually adds 6 more empty months after the missed slot — making the extended timeline concrete without shame-based language. S31 shows the recovery dashboard with a restored 22% utilization score and overdue payment label.