Goal card
Three densities of the same card, sharing one set of tokens: full width on the goal screen, half width on the home grid, and a compact row inside search and transfers.
- surface/card
- text/amount-lg
- text/amount-sm
- space/card
Mobile UIVessel
Savings goals that survive a bad month
A savings app that treated every missed deposit as a failure, told in red, to people who were already having a difficult month.
- Product UI
- Content design
- Motion
- Client
- Vessel
- Discipline
- Mobile UI
- Engagement
- UI/UX design
- Platforms
- iOS and Android
- Duration
- 9 weeks
- Delivered
- 2024
01The problem
What we walked into
Vessel helps people save toward specific things: a deposit, a course, a trip home. The mechanic worked. The interface did not forgive.
Every goal carried a progress ring that turned red the moment a scheduled deposit was missed, and a home screen that summed up all of your shortfalls in one number at the top. People who missed a month did not adjust their goal. They stopped opening the app, and a third of them never came back.
The team had already tried softening the copy. The problem was structural: the interface was designed to report on a plan rather than help someone continue one.
02Goals
What the work had to achieve
Agreed in the first fortnight, written down, and used to settle every argument afterwards.
- G01
Make progress the headline, not the gap
Show what has been saved before showing what has not. The shortfall stays visible, but it stops being the first thing the screen says.
- G02
Give a missed month somewhere to go
A missed deposit should open a decision, not a dead end. Skip, reduce, extend, or pause, all available in one place.
- G03
Remove the red
Reserve destructive colour for genuinely destructive actions. Falling behind on savings is not an error state.
- G04
Keep the honesty
None of this can hide the numbers. Softening the tone must not soften the facts about where someone actually stands.
03UI approach
The decisions that shaped the interface
Four moves that did most of the work. Everything else on the project followed from them.
- 01
Rewriting the goal card
The ring became a horizontal bar with the amount saved set large and the target set small beneath it. The projected completion date replaced the shortfall as the secondary line, which reframed the card from a report into a forecast.
- 02
A recovery sheet, not an error
Missing a deposit now opens a sheet with four routes forward, each showing its effect on the completion date before you commit. The most common choice in testing was reduce, which the old interface never offered at all.
- 03
Colour re-scoped
Amber for behind-schedule, ink for neutral, green reserved for goals completed. Red now appears in exactly two places in the app, both of them account closures.
- 04
Motion that rewards the deposit
A single 240ms fill on the progress bar when money lands, and nothing else. Every other transition in the app was reduced to a cross-fade so the one moment worth celebrating stands alone.
04Components and design system
What got built underneath
The reusable parts, and the tokens they were built from. This is the layer that keeps the interface consistent after we leave.
Progress bar with forecast
One component carrying two data points, the amount saved and the projected date, so a goal can never be shown without its context.
- progress/track
- progress/fill
- progress/behind
- motion/fill-240
Recovery sheet
A four-option decision sheet with live preview of the consequence on each option. Reused later for card replacement and direct debit changes.
- sheet/surface
- sheet/handle
- space/sheet-inset
05Outcomes
What changed after release
Measured by the client, on their own reporting, over the period noted against each figure.
- Goals continued after a missed deposit
- 2.4xGoals continued after a missed depositCompared with the same cohort behaviour before the redesign.
- Goal abandonment within 30 days of a miss
- −58%Goal abandonment within 30 days of a missMeasured over the two quarters after release.
- Places red still appears
- 2Places red still appearsBoth are account closure confirmations.
- Chose reduce over skip
- 61%Chose reduce over skipAn option the previous interface did not offer.
The reduce option had been in the backend for two years. Nobody had ever drawn a screen for it.
We had spent a year writing kinder error messages. The problem was that we were showing an error at all.
06Gallery
Screens and system, laid out
Layout diagrams of the interface as delivered, with a note on what each one is doing.
- 01 / 04
Goal detail
Amount saved set large, target and forecast date underneath, shortfall present but no longer shouting.
Interface layout diagram from the Vessel project.
- 02 / 04
Recovery sheet
Four routes forward from a missed deposit, each previewing its effect on the completion date.
Interface layout diagram from the Vessel project.
- 03 / 04
Colour re-scope
The revised status palette, with red removed from every non-destructive context.
Interface layout diagram from the Vessel project.
- 04 / 04
Goal card densities
One component, three densities, sharing a single token set across home, detail and search.
Interface layout diagram from the Vessel project.
07Take it with you
The one-page version
Everything above, condensed to plain text. Copy it into a brief, or download it to circulate internally.
Case study summary
Plain text, ready to paste into a brief or a board pack. Saves as baseline-studio-vessel-savings-summary.txt.
BASELINE STUDIO / CASE STUDY SUMMARY
================================================================
Client: Vessel
Project: Savings goals that survive a bad month
Discipline: Mobile UI
Engagement: UI/UX design
Platforms: iOS and Android
Duration: 9 weeks
Year: 2024
OVERVIEW
================================================================
Vessel is a goal-based savings product whose interface reported on missed deposits in red and gave people no route back to their plan. A third of users who missed a month never returned.
We rebuilt the goal card around progress and forecast rather than shortfall, replaced the missed-deposit dead end with a four-option recovery sheet that previews the consequence of each choice, and re-scoped the colour palette so red now appears only on destructive actions.
Delivered across 9 weeks: 22 redesigned screens, a recovery sheet pattern later reused across the product, a three-density goal card component spec, and a revised status colour set tested at AA.
Results: goals continued after a missed deposit rose 2.4x, 30-day abandonment after a miss fell 58 percent, and 61 percent of people chose to reduce their goal rather than skip it, an option the previous interface never offered.
OUTCOMES
================================================================
2.4x Goals continued after a missed deposit
Compared with the same cohort behaviour before the redesign.
−58% Goal abandonment within 30 days of a miss
Measured over the two quarters after release.
2 Places red still appears
Both are account closure confirmations.
61% Chose reduce over skip
An option the previous interface did not offer.
CONTACT
================================================================
Baseline Studio
studio@baseline.design
+1 (415) 555 0142
Figures describe a specific product, team and period, and are
published to explain the work rather than to predict a result.05Start a project
Working on something similar?
Tell us where your product is getting stuck. We will tell you honestly whether this is the kind of problem we are good at, and what we think it would take.
- Prefer email
- studio@baseline.design
- Current availability
- Taking on two engagements for the coming quarter.
- Typical reply time
- Two working days, from a partner rather than a form.