Sophie Nguyen

Self-initiated redesign · 2025

Myki Mate — a top-up that survives a moving tram

I top up my myki one-handed on a moving tram while the reader at the stop judges me. The official flow takes eleven taps and treats auto top-up like a state secret. I wanted to know: could I get it under four taps — and would anyone else care?

Role
Research, UX & UI — solo
Timeline
6 weeks, evenings
Tools
Figma, FigJam, Maze
Platform
iOS / Android concept
Two phones showing the Myki Mate top-up concept beside sketches and a myki card
Final concept, balance front and centre

self-initiated — PTV did not ask for this

01

The problem

Topping up a myki should be a 20-second task. Instead it sits behind a login, a card-number lookup, and a payment flow that forgets everything you told it last week. Auto top-up — the actual fix — is buried three screens deep and explained in tariff language.

My hypothesis going in: people don't want more features, they want certainty — did it work, and is the money there yet?

A caveat I want to be upfront about: this is a self-initiated concept. Real constraints — a legacy back-end, concession fare rules, offline readers — would complicate everything I drew here. The point was to practise a tight loop: observe, design, test, repeat. And to work out my frustrations constructively.

02

Research & personas

I did nine five-minute intercept interviews at stops on the 86 and 96 tram lines, and read two years of r/melbourne myki threads (a rich seam of pain). Then an affinity mapping session to stop myself from cherry-picking the quotes that agreed with me.

Affinity map of sticky notes from commuter interviews, grouped into themes
Affinity map — 9 interviews, 4 themes survived

the 'certainty' cluster is the fat one

The daily commuter

Myka, 29 — Richmond → CBD, 5 days a week

I just want to know it worked. Show me the balance.
  • Tops up under time pressure, often one-handed
  • Trusts auto top-up in theory, not in practice
  • Checks balance more often than she tops up

The finding that changed the design: everyone described the balance check and the top-up as one task. The existing app treats them as separate destinations. I had them in different sections too, until the affinity map made that untenable.

03

User flow

  1. 01

    Open app

    Face ID straight in — no password wall

  2. 02

    Balance, front and centre

    Card art you can flip for details

  3. 03

    Top up

    Saved amount pre-selected, one edit max

  4. 04

    Confirm

    Sticky footer button, total visible

  5. 05

    Receipt

    New balance + when it lands on the card

v1 had 7 steps. Testing killed 3.

The flow is deliberately boring. One job per screen, and the balance — the thing everyone actually came for — is the home screen, not a tab.

"Did it work?" is the whole product. Everything else is garnish.

04

Wireframes

Three pencil wireframe iterations of the balance and top-up screens with red annotations
Iterations 1–3 of the balance screen

this screen took 4 iterations — v1 hid the balance behind a card

My first wireframe was a dashboard — pass history, zones, offers, the lot. Classic beginner's abundance. Walking through it with two commuters (paper prototype, tram stop, slightly awkward) made clear that everything except balance and top-up was noise. Iteration three is almost empty, and it's the first version nobody got lost in.

05

Hi-fi & prototype

Three hi-fi Myki Mate screens in a deep green palette
Final screens — balance, top-up, receipt

kept the myki green; checked contrast to AA

Visually I stayed close to the myki green — it's the one piece of brand equity commuters actually trust — but flattened the decoration and pushed type sizes up, because this app gets used in glare, at arm's length, while moving.

06

Usability testing

Six participants, moderated, tasks completed on a moving 86 tram (yes, really — the environment is the point). Two findings stung:

  1. F01People thought the top-up was done too early

    4 of 6 participants believed the payment completed at amount selection and put their phones away before confirming.

    FixA sticky footer button that follows you, and an explicit receipt screen with the new balance and when it lands on the card.

  2. F02Everyone tapped the card art expecting it to flip

    I'd drawn the card as decoration. All six participants tapped it expecting card details on the back.

    FixShipped the flip. If users unanimously expect a behaviour, that's the spec.

  3. F03Auto top-up copy confused almost everyone

    The tariff-style explanation ('authorise recurring debit upon threshold') lost 5 of 6 participants.

    FixPlain language: 'We top you up when you drop below $10. Cancel anytime.' Comprehension went to 6/6.

07

Outcome & reflection

Final round: 6/6 task success, average completion 22 seconds — I timed the real flow at 1 minute 41 on the same route. Small sample, self-initiated, so I hold those numbers loosely.

What I'd do differently: talk to concession users first. I designed for full-fare commuters and bolted concession logic on at the end, and the fare rules are genuinely hard — my 'simple' flow quietly assumed them away. A real version of this project starts there, not with people like me.

What I'd keep: testing in the actual environment. Two of my three big findings only happened because the tram lurched at the right moment.

next time: concession fares from day one

Next project

02CareLoop

worth a look →

Appointment booking for a community health provider whose patients mostly just called.