Case Study · 2025–2026 · Fintech UX · iOS

CreditWise.
The rebuild is here.

A fintech app for credit-score improvement. v1 was honest class work — UX thinking solid, visual execution generic. v2 is the rebuild: restrained palette, tokenized components, real edge states, no decoration that doesn't earn its space.

RoleSolo · Research, design, system, build
DomainFintech · Credit · Mobile / iOS
Surface5 hero screens · 2 edge states · wireframes
Statusv2 design system shipped · usability testing in plan
01 / Welcomev2
02 / Dashboardv2
03 / Score Detailv2
04 / Marketplacev2
05 / Card Detailv2
The thesis

I picked fintech as my first end-to-end UX project because I wanted to learn the hardest domain. Financial anxiety is real. Trust is everything. The design has to disappear out of the way of the user. v1 didn't reach that bar. v2 does.

— The rebuild closed the gap
01 — Before & after

The Dashboard, v1 vs v2.

Same screen, same flow, two years of growth between them. Everything the critique names is visible in the side-by-side: the palette, the icons, the trust signal, the component discipline.

v1 · Before Dashboard
CreditWise v1 dashboard — the original class-project version
  • Bright green score circle — one of five competing colors
  • Multicolor progress bars fighting for attention
  • Emoji on the "encrypted and secure" trust line
  • Generic stock icons in the bottom navigation
→
v2 · After Dashboard
  • One primary blue with three semantic status colors
  • Restrained data display, clear visual hierarchy
  • Trust signal in plain language, no decoration
  • Consistent Tabler outline icons throughout

All twelve v2 screens — color and wireframe — are live and clickable. Browse the full v2 screen set ↗

02 — What v2 fixed

Same flows. Different discipline.

The flows from v1 still hold — they were the strongest part of the original work. What needed rebuilding was everything that sat on top of them: palette, components, typography, signal language. v2 is a tokenized system rebuilt from the wireframes up.

Five execution gaps in v1, each paired with the v2 fix. Not "I'll redesign it someday" — actually rebuilt and shown above.

Gap 01
Palette
v1 was

Five competing colors. Green, yellow, red, blue, plus accent. No signal hierarchy. Bright fintech-positive defaults that read as friendly-startup-template, not financial app.

v2 is

One primary blue. Three semantic states. Blue (#2563EB) for action and trust. Green for excellent, amber for fair, red for error. Each color has one job. Calm beats bright when the user is anxious about money.

Gap 02
Iconography
v1 was

Generic stock icons. The wallet logo specifically read as clip-art. Standard rounded glyphs throughout — the default Material/Feather set every class project deploys.

v2 is

Tabler outline icons, used consistently. One icon set, one weight, one style — never mixed with other libraries. Applied across all twelve screens, never decorative.

Gap 03
Trust signals
v1 was

Emojis on security messaging. "Your data is encrypted and secure" paired with a winking face. The casual tone actively undermined the trust signal.

v2 is

Plain language. No decoration. The encrypted-and-secure banner was pulled from every screen except sign-up, where it earns its place. Trust signals state themselves once, at the right moment, then get out of the way.

Gap 04
Layout
v1 was

Layout overlap on Score Improvement Plan. Header collided with the action card below. A QA-grade miss any production review would catch.

v2 is

A real component library with spacing tokens. 24px outer padding, 16px between sections, 10–14px inside cards, 8px between row items. Documented in a design system reference. Overlap is structurally impossible.

Gap 05
Metrics
v1 was

Class-project projections presented as outcomes. The original brief had usage numbers that were aspirational, not measured. Calling them "results" was a junior mistake.

v2 is

Honest about its status. v2 is a design system rebuild — not a deployed product. No invented metrics. Real usability testing is on the roadmap, and when it ships, the numbers go in.

The wireframes from v1 held up. The hi-fi didn't. v2 is what happens when the hi-fi catches up to the thinking.

v1 → v2 retrospective
03 — The system

Tokens, not vibes. v2 runs on a documented system.

Every spacing value, every radius, every color decision is documented and reused. The screens above aren't one-off Figma frames — they're built from a tokenized component library that another designer could rebuild from the README.

Color tokens

Five jobs. Five colors.

Primary action#2563EB
Success / excellent#059669
Warning / fair#D97706
Error / critical#DC2626
Text primary#111827
Spacing scale

A real grid.

24px · outer screen padding
16px · between sections
10–14px · inside cards
8px · between row items

Radius: 36 / 14 / 12 / 10
Frame · large · standard · small

Typography

Inter. One family.

52 / 500 · display
28 / 500 · h1
20 / 500 · h2
17 / 500 · subtitle
15 / 400 · body
13 / 400 · small
11–12 / 500 · caption

04 — The edges

Where v1 stopped. Where v2 keeps going.

Real software has empty states, network errors, and broken connections. v1 didn't have them. v2 does — and they don't just say "error," they give the user productive things to do instead.

06 / Error StateEdge
07 / Empty StateEdge
Error

"We couldn't load your score" — then three things you can do instead.

The error state doesn't end at the error. It surfaces three productive alternatives: check your connection, browse card recommendations, read credit education. The user came here for a reason — the error shouldn't kill the session, it should redirect it.

Empty

First-time user. No data. One next step.

Empty states earn their keep by reducing the cost of the first move. v2's empty state has one clear primary action, not five. The user knows what to do without thinking about it.

· · ·
05 — Structure before style

The wireframes held up.

Every v2 hi-fi screen traces back to a wireframe. The gray-bar style isn't low-fi — it's deliberate. Forcing yourself to evaluate layout without content makes the structural decisions visible. If the wireframe doesn't work in grayscale, no amount of color will save it.

Welcome
Dashboard
Score
Marketplace
Card Detail
06 — The evolution

What v1 taught me. Why v2 looks different.

Lesson 01

Hard domain forces real thinking.

Picking fintech as a first project meant I couldn't coast on intuition. Financial anxiety, trust signals, regulatory framing, multi-state flows — the domain refused to let me design pretty surfaces over unclear thinking. Every later project benefitted from that discipline.

Lesson 02

Wireframes are the contract. Hi-fi is the execution.

The lo-fi flows from v1 are the same flows v2 ships. The further from structure, the more visible the experience gap. v2 caught up to the structural thinking that was already correct in v1.

Lesson 03

Tokens beat vibes.

v1 was screen-by-screen Figma frames with eyeballed spacing. v2 is a tokenized system documented well enough that another designer could rebuild it from the README. The system is the deliverable, not the screen.

Lesson 04

Don't dress up projections as outcomes.

v1's brief had projected engagement numbers that read like results. Hiring managers see through that immediately. v2 ships honest: design system rebuilt, real usability testing on the roadmap, no invented metrics in between. Every case study after this one — Violet, Sheffield, Confection — uses only real, defensible numbers because of what v1 taught.

Built. Broken. Rebuilt.

v1 was the work.
v2 is the work I should have shipped first.

CreditWise v2 is the rebuild of a class project, done after I learned what a class project teaches: that the gap between thinking and execution is everything. The flows held. The system caught up. Real usability testing is next.

See what changed Read again