Brookwell prototypes — Jesslyn Ruswan

Three Brookwell screens: the welcome screen, account creation, and a checking account with accrued yield — Welcome, sign-up, and a checking account already earning yield (open in the story)
Overview

Alice’s customer journey in eight stages: GTM, PII, KYC, open, card, fund, earn, and pay — Alice’s eight-stage journey became the backbone of every flow (open in the story)
Persona

Lo-fi take one: clear actions, but only one card in view

Approach

Take two: a stacked wallet keeps every card in view

Approach

Take three: the stack opens into a sheet with balance and actions

Approach

Hi-fi: take three’s structure in soft metallic cards

Approach

Adding money speaks bank: Apple Pay, deposits, and transfers

Solution

Every sign-up step says why it’s asking

Solution

Accrued yield sits under the balance, so growth is always in view

Solution

Every account and its 30-day growth, one switcher away

Prototypes

The balance shrinks into a pinned bar as you scroll

Prototypes

Tap a slice of the bar to see one category’s share

Prototypes

Categories, a monthly breakdown, and the details behind any purchase

Prototypes

From an empty wallet to a new card with spend limits

Prototypes

Soft metallic card colors, modern enough for Gen Z

Prototypes

The global palette every token draws from

Design system

Semantic color tokens for surfaces and text, each mapped to a base token and a use case — Tokens named by their job, so engineers pick by use, not hex (open in the story)
Design system

Type scale in Neue Haas Grotesk Display: Headline 1, Headline 2, Body 1, and Caption, with size, line height, letter spacing, and token — One typeface, four styles (open in the story)
Design system

Annotated handoff spec for containers: account summary, account information, and transaction list, with anatomy and behavior — Handoff specs annotate each component’s anatomy and behavior (open in the story)
Design system

Story Prototypes