Copilot Money

a money app that tells you what changed

Mobile AppData vizOnboarding & trustDesign tokensDev handoffPrototype
Brand
Copilot Money, New York
Discipline
Mobile app · UX/UI · data viz
Our role
Research, onboarding, data viz, prototype, handoff
Timeline (concept)
6-week design sprint

Manifesto: tell me what changed

Copilot Money · a NUUKE concept · sample data

A bank statement tells you what happened. Four hundred lines, all the same size. Nobody opens a money app to reread the past. You open it to ask one thing: what changed? Dining crept up. A subscription appeared. Savings grew. Let the app do the sorting. You read the one line that matters.

01 · The brief

A money app that tells you what changed.

Copilot Money is a New York subscription app built by founder and CEO Andrés Ugarte, a software engineer who quit his job in 2018 to make it; it launched publicly around 2020. It brings bank, card and investment accounts from 10,000+ US institutions into one view, with ML categorisation, budgets with rollovers, recurring tracking and net worth. The model is subscription-only: “no ads, no gimmicks” and no data selling. The day Mint’s shutdown was announced, in November 2023, was Copilot’s biggest day ever.

100K+
Subscribers, as of March 2024
$6M
Series A led by Adjacent, March 2024
$10.5M
Total venture capital raised
ADA ’24
Apple Design Awards finalist, Innovation

Design problems we chose

  1. 01

    Trust at the connect step

    Linking a bank is the scariest moment in any finance app. The copy, motion and security cues have to answer every fear before it becomes a bounce.

  2. 02

    Charts that answer questions

    Most money apps show what happened. People open them to learn what changed. Every chart has to earn its place by answering one question.

  3. 03

    Review as a ritual

    Checking new transactions should be a satisfying two-minute loop, and every correction should teach the model something.

Our goal

Every screen answers “what changed?” before “what happened?”, and the scariest step, linking a bank, feels like the safest one.

02 · Research

Three people, one question: where did it go?

We built personas from Copilot’s public audience (design-minded, Apple-first US professionals, many of them former Mint users) and tested every screen against them.

Personas are NUUKE research assumptions built from the brand’s public audience, not real customers.

03 · Journey map

A month with money, and where it hurts.

Tap each moment to see what Priya is doing, how she feels, and the design opportunity it gave us. The two lows (mid-month and a surprise renewal) are both things that changed without anyone saying so.

DelightFrustration🙂😐😣😕🙂😄

Stage 1 · Payday

Doing

Paycheck lands; checks the balance.

Feeling

🙂 Relieved, briefly.

Opportunity

Show what’s already spoken for (rent, recurring) so “available” is honest.

04 · User flow

Ten screens. One loop: review, understand, adjust.

Onboarding happens once; the daily loop is dashboard → review → what changed. Tap any screen to jump to it in the live prototype.

link4 newtap chipwhy?Connect accountsDashboardTo reviewPick categoryWhy this category?SpendingDining detailBudgetsRecurringNet worth

Tap any screen to open it in the prototype ↓

05 · Trust-first onboarding

Six moments between “hello” and “here’s what changed”.

We designed onboarding around the moment people are most likely to leave: handing a bank login to an app. Step through it and tap the numbered pins to see what we show at each moment and why.

Welcome

Your money, beautifully organized.

Bring every account into one calm view.

  • No ads
  • No data selling
  • Support from real people

1 month free, then $95/year

Connect an account

Step 1 of 3

Find your bank

Search 10,000+ institutions

US accounts only · also Venmo, Apple Card and Coinbase

HFHudson FederalPCPinecrest CULBLakeview BankNSNorthstar CardBTBayside TrustMVMeridian Invest

Bank names are invented for this concept.

Hudson Federal

Here’s what happens next

  1. 1You sign in with your bank on a secure connection screen.
  2. 2Your balances and transactions come back to Copilot.
  3. 3You choose which accounts to include.

We never sell your data or show you ads.

Continue to Hudson Federal

Step 3 of 3

Choose what to include

You can change this later in Settings.

  • Checking•• 4821 · $6,240
  • Savings•• 0937 · $22,180
  • Credit card•• 1180 · −$1,420
  • Side-business checking•• 5520 · $3,905

Last four digits only. Sample balances.

Include 3 accounts

Setting up

Sorting your history

1,284 of 2,314 transactions

Groceries 212 Coffee 96 Dining 141 Rent 12 Transport 188 Other 302

You can leave. We’ll let you know when it’s ready.

You’re all set

Here’s what changed

Last 3 months

Dining grew fastest

Up 44% since June, mostly weekend dinners.

12 transactions we weren’t sure about

Moment 1 of 6 · The promise

Say the deal before asking for anything.

What we show

No ads, no data selling, support from real people, as the first thing you read.

Why

Copilot’s early users asked for exactly this. One request, quoted by Apple: “Please don’t sell my data or put in ads. I’m willing to pay a few bucks for this service.” We answer it before it’s asked.

What we show

The trial and the yearly price, before a single account is linked.

Why

A paywall after someone has handed over bank access feels like a trap. Price first makes linking a choice, not an ambush.

Moment 2 of 6 · Find your bank

Search first, with the real number.

What we show

A search field that says “10,000+ institutions”, with popular banks as text tiles below.

Why

People know their bank’s name; scanning a wall of logos is slower. The number quietly says “yours is almost certainly here”.

What we show

“US accounts only” in plain words, right under the search.

Why

A visitor outside the US should find out at step two, not after creating an account and getting their hopes up.

Moment 3 of 6 · Before you sign in

Preview the hand-off before it happens.

What we show

Three numbered steps: sign in with your bank on a secure connection screen, balances and transactions come back, you pick the accounts.

Why

The jump to a bank’s login is where people bail. Previewed, the redirect becomes a step they were told about rather than a surprise.

Exact wording depends on Copilot’s connection partner; we’d confirm it with their engineering team before shipping.

What we show

The promise again, repeated at the scariest moment.

Why

Reassurance works where the fear is. Saying it once on a welcome screen isn’t enough.

Moment 4 of 6 · Choose accounts

Every account is opt-in, visible and reversible.

What we show

A switch per account, defaulting on, with a line saying you can change this later.

Why

Control lowers anxiety. Couples like Sam & Alex may want the joint account in and the side-business account out.

“Change this later” assumes accounts can be hidden after linking; to confirm.

What we show

Only the last four digits of each account.

Why

Enough to recognise the account, nothing someone looking over your shoulder could use.

Moment 5 of 6 · First sync

Show the work, not a spinner.

What we show

A live count of transactions being read, with categories filling up as they’re sorted.

Why

Watching categories fill builds trust in auto-categorisation before you have to rely on it. A silent spinner here feels like a black box.

What we show

“You can leave. We’ll let you know when it’s ready.”

Why

Nobody should have to watch a sync. A notification brings them back for the payoff.

Moment 6 of 6 · First insight

Pay off the scary step within a minute.

What we show

A first “what changed” card instead of an empty dashboard.

Why

The reward for linking a bank is an insight. It also delivers on the whole concept: tell me what changed.

What we show

“12 transactions we weren’t sure about”, with a button to review them.

Why

Admitting low-confidence guesses is more trustworthy than pretending the model is perfect, and it starts the review habit on day one.

Expected anxiety at each moment · our hypothesis

Peaks at the bank hand-off. That’s where we spent the most words.

06 · Data-visualisation lab

Same data, five charts, one right answer per question.

Before drawing a single dashboard, we put one sample month through every chart type and asked which one answers each question fastest. Pick a question, try each chart, and read our reasoning. The star marks our pick.

1 · Pick a question

2 · Try a chart

Sample household · SeptemberIncome $6,200 · spent $4,470 · kept $1,730
Rent: $1,900 of $1,900 budgetRent$1,900Other: $710 of $750 budgetOther$710Groceries: $640 of $600 budgetGroceries$640 ▲$40Dining: $520 of $400 budgetDining$520 ▲$120Shopping: $410 of $450 budgetShopping$410Transport: $290 of $300 budgetTransport$290│ = budget$200$400$600$800AprMayJunJulAugSepGroceries: $590, $620, $600, $630, $610, $640Dining: $360, $380, $390, $410, $430, $520Shopping: $480, $610, $350, $560, $520, $410Transport: $280, $310, $300, $320, $300, $290Other: $640, $700, $660, $740, $690, $710Dining $520▲ 44% vs. AprRent (fixed) not shownRent: $1,900 (43%)Groceries: $640 (14%)Dining: $520 (12%)Shopping: $410 (9%)Transport: $290 (6%)Other: $710 (16%)$4,470spent in SeptemberRent 43%Rent: $1,900Rent$1,900Other: $710Other$710Groceries: $640Groceries$640Dining: $520Dining$520Shopping: $410Shopping$410Transport: $290Rent: $1,900Groceries: $640Dining: $520Shopping: $410Transport: $290Other: $710Saved: $1,730Pay $6,200Rent $1,900Groceries $640Dining $520Shopping $410Transport $290Other $710Saved $1,730 · 28%
  • Rent
  • Groceries
  • Dining
  • Shopping
  • Transport
  • Other
  • Saved / income

07 · 3D wireframe

Take the dashboard apart, layer by layer.

From grid to motion, every screen is built in five layers. Scroll and the exploded view assembles into the final UI. Drag to look around it.

Scroll to assemble · drag to orbit

  1. L1

    Layout grid

    4-column grid, 20pt margins and an 8pt rhythm. Safe areas for the Dynamic Island and the tab bar.

  2. L2

    Wireframe

    Hierarchy first: the month’s one number, a pace chart, then “what changed” before any list of transactions.

  3. L3

    Content & data

    Real copy and sample data: spent so far, the budget, and three plain-English changes since last month.

  4. L4

    Colour & charts

    Navy canvas, green for money in, red-orange for money out, blue for the line that matters. Category colours carry identity.

  5. L5

    Motion & states

    The pace line draws in when data syncs, the “now” dot breathes, and a change card nudges once, never twice.

08 · Prototype

Tap through it. Then switch to the wireframe.

This is the prototype we’d put in front of ten Copilot-style users. Follow the journey on the left and flip between Sketch, Wireframe and Hi-fi to see how each screen evolved. All amounts are sample data.

Interactive prototype

Copilot daily loop

Eight tasks, ten screens. Everything that glows is tappable.

Final UI, fully tappable.

Your journey 0/8

Get started

Connect your first account

🔒No ads. No data selling.
Bank names here are invented for this concept.

October · spent so far

$3,182.40

of $4,600 budget · 13 days left

This month Last month

What changed

To review

Four new since yesterday. Tap ✓ to confirm, tap a category to change it.

☕Corner CaféToday · 8:12 am$6.50
🍜Lucia’s TrattoriaYesterday · 8:40 pm$48.20
🚇Metro TransitYesterday$2.90
🎬StreamBoxNew · monthly?$15.99

Lucia’s Trattoria · $48.20

Choose a category

Always use for Lucia’s
Future transactions only

Auto-categorisation

Why we chose 🍜 Dining

How sure we were

Very likely · 92%

What we looked at

🧾Your history
You put Lucia’s in Dining 14 times before.
🏷️Merchant type
Listed by the bank as a restaurant.
🕗Time and amount
Friday, 8:40 pm, $48: looks like dinner.

When you change it

We learn from your choice for this merchant. Past months stay as they are unless you ask.

Concept: the explanation pattern is ours. Signals shown are illustrative.

Spending · October

So far, against each budget.

🍜

Dining

$388 of $400 · 13 days left

What changed

$90 ahead of September by this date. Three more dinners out, all on Fridays.

MayJunJulAugSepOct

Top merchants

Lucia’s Trattoria
3 visits
$142
Noodle Bar 22
4 visits
$96
Taco Corner
5 visits
$71

Category colour

Budgets · October

69%
$1,418 left
$3,182 of $4,600 · on pace
🛒 Groceries$402 / $600
↻ +$35 rolled over from September
🍜 Dining$388 / $400
Close to the limit · 97%
🛍️ Shopping$210 / $450
↻ +$60 rolled over from September
🚇 Transport$132 / $300
↻ +$12 rolled over from September

Recurring

Next 14 days · $1,958.97

New subscription spotted

🎬 StreamBox · $15.99 / month

First charge Oct 16. Next expected Nov 16.

🏠Rent
Oct 31
$1,900.00
📱Phone plan
Oct 24
$35.00
🏋️Gym
Oct 26
$23.97
🎵Music
Nov 2
$10.99

Net worth

$148,600

▲ $3,480 (2.4%) this month

  • Stocks 60%
  • Bonds 20%
  • Crypto 9%
  • Cash 11%

Sample data for this concept.

…

09 · Spatial sketch

Net worth you can walk around.

Copilot already runs on iPhone, iPad, Mac, the web and Apple Vision. We sketched what net worth could feel like in space: every account a stack of coins, debt hanging below the line. Drag to orbit, scrub or play the year, tap an account to focus it.

Net worth · Dec sample

$150k

▲ $44k since January

Accounts · tap to focus

10 · Design-to-dev handoff

From token to SwiftUI, with nothing lost in between.

Founder Andrés Ugarte has said a native Swift app “makes a difference the moment you start interacting with it.” So our handoff speaks Swift. Change a token and watch the component and its code update together; turn on the redline to see the spec.

Live component · BudgetRow

Dining$520

Over by $120 · $35 rolled over

Sample data. The same component in the prototype’s Budgets screen.

Design tokens · change one and watch the code
TokenValueAdjust
color.accent#FF4433
radius.card18pt
space.inset16pt
space.gap12pt
type.amount.size20pt
type.amount.weightbold
// BudgetRow.swift · generated from design tokens
import SwiftUI

extension Color {
    static let cmSurface = Color(hex: 0x001533)
    static let cmAccent = Color(hex: 0xFF4433) // color.spend
}

enum Token {
    static let radius: CGFloat = 18
    static let inset: CGFloat = 16
    static let gap: CGFloat = 12
    static let amount: CGFloat = 20
}

struct BudgetRow: View {
    let category: Category

    var body: some View {
        HStack(spacing: Token.gap) {
            Text(category.emoji)
                .font(.system(size: 22))
                .frame(width: 44, height: 44)
                .background(Color.cmAccent.opacity(0.18),
                            in: RoundedRectangle(cornerRadius: Token.radius * 0.6))
            VStack(alignment: .leading, spacing: 6) {
                HStack(alignment: .firstTextBaseline) {
                    Text(category.name).font(.headline)
                    Spacer()
                    Text(category.spent, format: .currency(code: "USD"))
                        .font(.system(size: Token.amount, weight: .bold, design: .rounded))
                        .monospacedDigit()
                }
                ProgressView(value: min(category.progress, 1))
                    .tint(.cmAccent)
                Text(category.status)
                    .font(.footnote)
                    .foregroundStyle(.secondary)
            }
        }
        .padding(Token.inset)
        .background(Color.cmSurface,
                    in: RoundedRectangle(cornerRadius: Token.radius, style: .continuous))
    }
}

Illustrative SwiftUI for the concept. Color(hex:) is a small helper we’d ship with the tokens; Copilot’s real codebase isn’t public.

11 · Design system

Deep navy calm, with money in colour.

Colour tokens · click to copy

Type scale

  • Display / numbers$3,182.40SF Pro Rounded 800 · 44/48 · tabular
  • TitleWhat changedSF Pro 700 · 24/28
  • BodyDining is up $90 vs. September.SF Pro 400 · 15/22
  • LabelOCTOBER · SPENT SO FARSF Pro 600 · 11/14 · +0.12em

Components

🍜 Dining🛒 Groceries🎬 NewCategory chip · user-set emoji and colour
🍜Dining is up $90
vs. September
+$90
“What changed” card · one change, one number
Connect an accountNot nowButtons · green primary with navy text (contrast 9:1)

Hex values are our working approximation, based on a third-party analysis of Copilot’s UI, not official brand values. Copilot doesn’t publish its typography; SF is our inference (Inter stands in on non-Apple screens). Chart colours for categories were validated for colour-blind separation on the navy surface.

12 · Measure

How we’d know it worked.

KPI 01

Connect completion

We expect: More people who start linking a bank finish it, because every scary moment has an answer on screen.

How we’d measure: Step-by-step funnel from “Connect” to first successful sync, A/B against today’s flow.

KPI 02

Time to first insight

We expect: New users see their first “what changed” card within three minutes of opening the app.

How we’d measure: Install → first insight card view, median and 90th percentile.

KPI 03

Review as a ritual

We expect: Most days, the review inbox is cleared in under two minutes.

How we’d measure: Review session length and clear rate, by week of use.

KPI 04

Chart comprehension

We expect: People answer “what changed this month?” correctly in one glance more often with our chosen chart than with the alternatives.

How we’d measure: Five-second tests per chart type, same sample dataset, 30 people each.

KPI 05

Learning categoriser

We expect: Manual re-categorisations per user fall over the first 30 days as the model learns from each fix.

How we’d measure: Re-categorisation rate by weekly cohort.

These are the success measures we would agree with the client before launch. As a concept project, no results are claimed.

Sources for brand facts

NUUKE Marketing: Campaigns, creators and content, taken all the way. Visit nuuke.marketing (opens in a new tab)

In good company