Yardstick Money
UX
Context:
Client: Yardstick Engagement: Brand-to-product design system and MVP UI Timeline: 4-week rapid design sprint Deliverable: A complete iOS design system and enough product UI to launch a TestFlight beta
Yardstick set out to do something quietly radical: make personal wealth feel approachable. The product helps people see their whole financial picture — every account, every transaction — and understand how their habits compare to people like them. Founder Katherine Wilson came to us with a clear point of view and a brand deck, but no product. Our job was to turn that into something real, fast.
The target user isn't the seasoned investor the category usually speaks to. Yardstick is built for someone in their twenties just starting to think about building wealth — more likely to feel locked out of the conversation than fluent in it. That shaped every decision we made.
We worked in a four-week sprint, taking the project from zero interface design to a system and screen set complete enough to ship a TestFlight build and put it in front of beta users.
Problem:
Money is taboo, and the apps that handle it tend to make the problem worse. The visual language of personal finance is overwhelmingly technical and masculine — dense dashboards, aggressive charts, a tone that assumes you already know what you're doing. For someone tentatively starting out, that's not a tool, it's a wall.
We had three problems to solve, each layered on the last.
Translating a print-led brand into a living product. Katherine's brand deck was beautifully considered but built for print — editorial, typographic, not yet structured for an interface. We needed to extract its intent and rebuild it as a working system: a typographic scale, a colour model, and consistent rules for elevation, spacing, and radius, all assembled into a Figma design system a team could build an app from. The warmth had to survive the translation.
Making complex financial data feel calm. A holistic money picture involves a lot of data — income against outgoings, spending trends, peer benchmarks, net wealth. Shown badly, that's anxiety. The challenge was to present genuinely complex information as approachable, legible insight rather than a cockpit of numbers.
Solving the categorisation problem. For benchmarking and insight to mean anything, transactions have to be categorised accurately and real spending is messy. A single payment often covers more than one thing. We needed an interaction model that let people review, re-categorise, and split transactions without it ever feeling like accounting homework.
Outcome:
We delivered a complete design system and a product UI ready for beta, turning a print-focused brand into a coherent, buildable iOS app in four weeks.
A warm, editorial design system. We anchored the product in soft greens and warm neutrals with a serif display face for headings — a deliberate move away from the hard, technical fintech default. The result reads as calm and human while still feeling credible with money. The system codifies type, colour, elevation, spacing, and radius, plus a library of components and cards, so the team could build consistently from day one.
Onboarding that lowers the barrier. We designed a smooth flow that walks users from sign-up through profile setup to connecting their bank via open banking. Reassurance about security and consent is woven through rather than bolted on, meeting the user's hesitation exactly where it lives.
Financial Vitals wealth as health, not judgement. We distilled a person's whole financial position into four core signals: whether income outpaces outgoings, whether spending is steady, whether they're adding to wealth, and whether they're covered for emergencies. Framing money as a set of "vitals" reframes the whole experience — it's a check-up, not a verdict. Paired with peer benchmarking, it answers the questions people actually ask quietly ("are others my age investing?") without the shame.
Insight that's a pleasure to read. We turned dense data outgoings versus peer averages, recurring payments, category spend over time into clean, friendly graphs and cards. Each insight is written in plain, encouraging language, so the numbers inform rather than intimidate.
A categorisation model that respects real life. The work we're proudest of is the transaction flow. Smart categorisation handles most spending automatically, with a lightweight review-and-approve step for the rest. Where it gets genuinely hard, a single payment spanning multiple categories, we designed a split interaction that lets users divide one transaction across several categories (a £50 Amazon order becomes £40 household and £10 drinks) with a running assigned/unassigned balance so it always stays clear. A focused category search and a clean hierarchy make re-categorising quick instead of tedious.
The outcome was a product that does what Yardstick promised, taking the angst and admin out of money — delivered as a system the team could carry straight into a beta launch.
