BigPay Design system · 2022 · 3 min read

One design system for the BigPay app, from colours to copy.

Role
Product designer
Year
2022
Platform
iOS and Android
Scope
Foundations, components and content rules

The problem

Years of shipping had left the app with several ways to show a date, an amount or a button.

The redesign needed one set of parts that every team could build from, and rules for the things components don’t cover.

The foundations

Material 3 underneath, BigPay on top.

Starting from Material gave engineers components on day one. Jost replaced the type, and every colour tone was generated from the two brand colours, so a lighter or darker step always existed when a screen needed one.

Colour · tones 100 to 0

Primary
Secondary
Green
Red
Neutral
Text
Fail
Success
Pending

Fourteen palettes in all. The later ones, pink to brown, colour the spending categories.

Type · Jost, 15 styles

Display57 / 64
Headline32 / 40
TitleMedium 22 / 28
Body16 / 24 · +0.15
LabelMedium 14 / 20 · +0.1

Same roles as Material, so Title Medium means the same thing in Figma and in code.

Icons · Material Symbols Rounded

homeexplorecredit_cardaccount_balance_wallet qr_code_scannersendreceipt_longsavings notificationslockvisibilitycheck_box

Rounded for all, outlined for most, filled for the ones that act as switches. Nine icons the library didn’t have, like DuitNow and Stashes, were drawn to match.

The components

22 components, each with its variants, states and specs.

The states mattered most. An inactive button is lighter and waits for the form to be complete. A disabled one is grey and comes with a reason. The two had been used interchangeably before.

Common buttons 56 · pill

ContinueCancelSkip
ButtonActive
ButtonInactive
ButtonDisabled

Text field 240 × 56 · r12

AmountRMMore than your balance Enabled · Active · Filled · Error

Switch 52 × 32

Round-upsTo the nearest ringgit
Freeze cardBlocks every payment

Chips 32 · r8

checkAllcheckTransferscheckTop ups
publicMY to SGcloseJane Lo
Filter chips select, input chips remove

Snackbar r12 · 48, 64, 80

Transfer sent12 Dec 2022 · 11:05 PM
close
Card frozen
close

Progress indicators

Repayment progress34%
Processing your transfer
  • Common buttons
  • Icon buttons
  • Segmented buttons
  • Chips
  • Text fields
  • Switch
  • Check box
  • Radio button
  • Sliders
  • Lists
  • Cards
  • Data table
  • Tabs
  • Top app bar
  • Navigation bar
  • Menu
  • Dialogs
  • Bottom sheets
  • Snackbar
  • Badges
  • Progress indicators
  • Container and divider

The rules

One way to write a date, an amount and a sentence.

Components don’t decide how money reads. Local transactions use the symbol, international ones the value and the ISO code, so mixed currencies line up. Dates spell the month, and the voice guide puts being clear ahead of being entertaining.

Data formats

Date
12/12/202212 Dec 2022
Date range
12-14/12/202212 - 14 Dec 2022
Time
23:0511:05 PM
Local
RM 12.8RM12.80
International
SGD4040.00 SGD

Voice and tone

cancel
Something went wrongWhat happened? What do I do now?
check_circle
Your transfer didn’t go throughYour balance is too low. Top up and try again. Top up

Casual by default, clear before entertaining. Buttons in sentence case, starting with a verb. Errors say what happened and what to do next.

The handover

Transition guides, so no team had to ask.

Every old icon, illustration and UI pattern was mapped to its replacement, screen by screen. Feature teams could move their own screens to the new system and know when a push, a slide or a bottom sheet was the right transition.

What I learned

The components took weeks. The rules about dates, amounts and tone took an afternoon each, and they did more to keep new screens consistent than any component did.

Like my projects? Email me jordychew93@gmail.com or LinkedIn↗