Skip to content

example-workflow.md

Latest commit

 

History

History
112 lines (86 loc) · 4.84 KB

example-workflow.md

File metadata and controls

112 lines (86 loc) · 4.84 KB
Raw

Example Workflow: Fintech App Onboarding

A complete walkthrough of the research-first methodology applied to designing an onboarding flow for a fintech app.

Step 0: Discovery

Design Brief:

I'm designing an onboarding flow for new users of a personal finance app that helps them connect their bank accounts and set a budget and should feel trustworthy and simple. The user's job: Get set up without feeling overwhelmed. Main objection: "Is my financial data safe?". They should remember: How easy it was. Constraints: iOS app, light + dark mode.

Step 1: Research

Queries Used (7 variations):

1. search_screens("onboarding", platform="ios")          → broad landscape
2. search_screens("fintech onboarding", platform="ios")  → industry focus
3. search_screens("bank connection", platform="ios")     → specific pattern
4. search_flows("onboarding", platform="ios")            → journey view
5. search_screens("permission request", platform="ios")  → trust patterns
6. search_apps("Mint", platform="ios")                   → competitor
7. search_apps("Revolut", platform="ios")                → competitor

Deep Dives (8 screens):

get_screen_detail(url="...", include_similar=true)  → for each of the best 8

Findings (specific, not generic):

  • Mint: 4-step onboarding, bank connection on step 3 (not step 1), uses Plaid
  • Revolut: Shows security badge ("Bank-level encryption") BEFORE asking for data
  • Robinhood: Single-question-per-screen pattern, progress bar at top
  • Cash App: Minimal onboarding — just phone number, everything else deferred
  • Chime: Explains "why" before each permission ("We need this to...")

Step 2: Analysis

Pattern Table

Aspect Mint Revolut Robinhood Cash App Pattern
Steps 4 5 6 2 3-5 steps
Progress indicator Dots Bar Steps None Bar or dots
Trust signal placement End Before data Middle None Before data entry
Bank connection timing Step 3 Step 4 N/A Deferred Not first step
Permission explanation No Yes No No 50/50 split

Steal List (7 items):

Source What Why It Works How I'll Use It
Revolut Security badge before data entry Kills trust objection at decision point Same placement
Robinhood One question per screen Reduces cognitive load Apply to our flow
Chime "Why we need this" microtext Transparency builds trust Below each field
Mint Bank connection NOT first step Builds relationship before asking for trust Step 3 of 4
Cash App Deferred non-essentials Gets user to value quickly Skip budget setup to later
Revolut Biometric setup with playful animation Makes security feel easy, not scary Custom illustration
Robinhood Confetti on completion Emotional payoff for completing onboarding Completion celebration

Step 3: Design Decisions

Typography

  • Font: SF Pro (iOS native)
  • Headlines: 28px, weight 700, -0.02em tracking
  • Body: 17px, weight 400, normal tracking
  • Captions: 13px, weight 400, 0.01em tracking

Color

  • Primary: #10B981 (green — financial growth, not fintech-blue)
  • Neutrals: System gray scale
  • Trust accents: #3B82F6 (blue for security indicators)
  • No indigo.

Flow Structure (4 steps)

  1. Welcome — Value prop + "Get started" (no data yet)
  2. Profile — Name + email (low friction)
  3. Connect Bank — Plaid integration (security badge visible)
  4. Done! — Confetti + "Set up budget" (deferred, optional)

The Soul (20%)

  • Green accent = growth, positivity (not the usual fintech blue)
  • Confetti celebration on completion (steal from Robinhood)
  • "Your data is encrypted with 256-bit AES" in plain English, not jargon
  • Progress bar fills with green (visual satisfaction)

Step 4: Quality Gate

Category Status
Primary action obvious? ✅ Single CTA per screen
Trust signals present? ✅ Security badge before bank connection
Works on mobile? ✅ iOS-native design
Squint test passes? ✅ Clear hierarchy, green accent visible
Something memorable? ✅ Confetti + green growth theme
Letter-spacing correct? ✅ Tracked caps, tight headlines
No AI slop? ✅ No indigo, no blobs, specific copy

Key Takeaways

  1. Research prevented a mistake: Without research, the obvious choice was "ask for bank info immediately." Research showed that all successful apps defer high-trust actions.
  2. The steal list created the design: 5 of 7 steals made it into the final design — each traced to a specific app and reason.
  3. Time saved: ~45 minutes of Mobbin research replaced ~4 hours of manually downloading and testing competitor apps.