Case study · RouteSync

RouteSync

Most transit apps tell you you’re late. RouteSync tells you what to do next.

A product-design case study for delay anxiety: route planning, live recovery states, a 7-scene storyboard, and a 10-participant Nielsen usability test.

View Figma prototype →
57interaction states
7scene storyboard
10participant evaluation
RouteSync Home screen
RouteSync Map · Delayed screen
RouteSync Track route screen

Dominant hero state: Map · Delayed

Role

Led research + evaluation

States

57 interaction states

Testing

10-participant Nielsen test

Team

Team of 6

Context

AID · 2024

The product

RouteSync, screen by screen.

The hi-fi interface — calendar-aware planning, live tracking, and a clear next move when the route changes.

HomeHome
SearchSearch
MapMap
New TripNew Trip
NewsNews
Why it grabs attention

The UX is in the recovery moment.

RouteSync turns a messy commute change into one readable decision: what changed, what to do next, and how to recover without app-switching.

01Delay recovery

The key screen is not the map. It is the moment the plan breaks and the user needs a next move.

02State system

57 interaction states show product thinking beyond static UI screens.

03Tested concept

The 10-participant evaluation turns the case study into evidence, not decoration.

Project overview

A commuting companion, researched and evaluated end-to-end.

Problem

Commuters juggle weather, transit, calendar, and map apps — and still get caught out when a route is delayed.

Product idea

A calendar-aware companion that plans the route, watches for delays, and surfaces the next best move.

Target user

Alex — a busy Sydney professional whose workday is driven by calendar events and public transport.

My role

I owned the UX research and evaluation — persona, storyboard, thematic analysis, and Nielsen usability testing — and built UI in Figma. (University team project.)

Tools

Figma · Miro · DALL·E (storyboard, disclosed) · Nielsen heuristic usability testing.

Output

57 interaction states, a day-in-the-life storyboard, a 10-participant usability evaluation, and a clickable prototype.

The problem

Delay isn’t the problem. Unclear recovery is.

A commuter’s day is driven by the calendar, but the tools aren’t. Weather, transit status, maps, and the schedule live in four separate apps — so when a train is delayed, the real cost is the scramble to work out the next best route, fast.

How might we

How might we give a calendar-driven commuter one calm view of their route — and a clear next move when it’s delayed?

Framed from the team’s RouteSync evaluation report (UTS Advanced Interaction Design, 2024). No invented statistics.

UX difference

RouteSync is not another map app.

It designs the recovery moment: what changed, what to do next, and how to stay on time without app-hopping.

Who I designed for

Meet Alex.

I built the persona from the interviews and thematic analysis. Alex anchored every design and evaluation decision.

Alex persona artefact, built in Miro
User persona · Alex · 2024

Alex

32 · Full-time worker · Train commuter · Sydney

Goals
  • A predictable, on-time commute that fits around the day’s meetings.
Frustrations
  • App-switching, delay anxiety, unclear alternatives, and generic transit news.
Behaviour
  • Plans the day around the calendar; checks the phone on the move.

[Persona is a real project artefact (Miro). The refined card below is re-typeset for this portfolio — content unchanged.]

Research & method

From interviews to clustered themes.

I interviewed commuters, then ran a thematic analysis in Miro — clustering what I heard into the themes that drove both the design and the usability evaluation.

By the numbers

10participantsusability testing
45min / sessioncontrolled setting
3task scenariosplan · alert · delay
4usability findings3 major · 1 medium
2interviewssynthesised in Miro
01

Interview

Open questions on real commutes.

02

Affinity / thematic analysis

Notes clustered in Miro into themes.

03

Persona

Themes distilled into Alex.

04

Nielsen evaluation

Heuristic usability testing.

Affinity map, themes 1–3, built in Miro
Affinity map · themes 1–3 · 2024
Affinity map, themes 4–5, built in Miro
Affinity map · themes 4–5 · 2024

I then coded each usability session against Nielsen’s heuristics — task, violation, severity, and the fix:

Usability evaluation sheet coded against Nielsen's heuristics
Usability evaluation · coded against Nielsen’s heuristics · 2024

Themes that surfaced from the affinity map — in commuters’ own words:

Delays & anxiety

“Bus delays make me anxious about being late.”

Recovery

“I stay calm and find alternate routes during delays.”

Real-time need

“Real-time updates and personalised routes would help.”

Priorities

“Convenience is my top priority, followed by cost.”

Verbatim notes from the interviews, clustered in my affinity analysis. No invented quotes.

What the research told me

Three insights that shaped every screen.

01The alternative is the anxiety

Delays make commuters anxious — but they stay calm when they can quickly find an alternate route. The next move matters more than the delay.

02Real-time, route-specific

People already lean on live maps; they want updates and alternatives tied to their exact route, not generic transit news.

03The calendar drives the day

Convenience and a personalised route beat cost. The commute should plan itself around what’s next on the schedule.

Day in the life

Alex’s commute, scene by scene.

Seven-scene storyboard of Alex's commute
01Morning — Alex checks RouteSync over coffee and plans the day.
02At his desk — he reviews the day’s route and meetings.
03Heading out — a delay alert arrives on the way to the stop.
04Kerbside — he adds a stop and re-routes in a tap.
05On the bus — he checks route-specific news for his line.
06Evening — he’s home, the commute handled.
07Night — he sets tomorrow’s trips before bed.

Storyboard scenes generated with DALL·E for ideation (disclosed). The sequence and narrative are my own.

Design goals

Three principles behind every screen.

01

Calm over clutter

Surface the next action and keep the rest out of the way.

02

Always show the next move

When plans change, the alternative is one tap away — never a dead end.

03

One companion, not four apps

Calendar, route, live status, and news in a single, coherent flow.

From insight to interface

How each insight became a screen.

RouteSync Map · Delayed screen, annotated
Anatomy of the delay screen

When the plan breaks, the next move is one glance away.

  • 1

    Alternate route, inline
    The new route appears in context — no separate search, and never a dead end.

  • 2

    ‘Your New Action’ summary
    Plain-language next steps with times: walk to the stop, arrive, hop on.

  • 3

    Stay in control
    Exit Map keeps the original plan visible — the user decides, the app doesn’t force it.

02 The calendar drives the day

Trips seed from the schedule — the home plan and calendar start the route for you.

Seen in: Home

03 Real-time, route-specific

News and alerts are scoped to the active route, not a generic transit feed.

Seen in: News

UX flow

The core loop: plan, ride, recover.

Reconstructed from the prototype: the calendar seeds a trip, the trip is tracked live, and when a delay hits, the app routes the user to the next best option.

Plan
from the calendar→ Build trip
add stops→ Track
live route→ Delay
real-time alert→ Re-route
alternate shown→ Arrive
on time

[Flow reconstructed in Figma from the prototype — RouteSync, AID 2024.]

Early structure

From flow to wireframes.

Before the hi-fi UI, I mapped the journey and blocked out every screen as low-fidelity wireframes — proving the structure before the polish.

RouteSync flow and low-fidelity wireframes in Figma
Flow & lo-fi wireframes · Figma · 2024
Design system

A small, consistent system.

Documented from the shipped screen library — one accent, a clear type ramp, and a handful of components reused across all 57 screens.

Colour

Primary#00A9CA
Urgency#E5484D
Ink#1A1A1A
Surface#FFFFFF
Tint#E3F1F6

Core components

Tab barRoute cardTrip cardSearch fieldFilter chipsMap controlsNotificationNews cardCalendar cell
High-fidelity UI

The interface, screen by screen.

Real screens from the 57-state prototype — a calm cyan system, calendar-aware planning, and clear delay handling at every step.

Plan the day

HomeHome
CalendarCalendar
Search routeSearch route

Track & recover

Map viewMap view
Track routeTrack route
Map · DelayedMap · Delayed
Track · DelayedTrack · Delayed

Trips & updates

New TripNew Trip
Trip ViewTrip View
NotificationNotification
NewsNews
EventsEvents
State-driven design

Designing for the moment it goes wrong.

A commute isn’t one screen — it’s a system of states. I designed the loading sequence and the delay-recovery states so the app stays calm and clear even when the transit network isn’t.

Loading sequence · 7 frames

Seven-frame loading animation sequence

7-frame loading animation — view it live in the prototype →

Delay-recovery states

Map · Delayed

Map · Delayed

The map surfaces the alternate route inline, with the next action spelled out.

Track · Delayed

Track · Delayed

Live tracking flags the delay and re-times each leg so the user can adapt.

Prototype & outcome

A clickable prototype, end to end.

The full flow is clickable in Figma — plan from the calendar, track live, hit a delay, and recover with an alternate route. A high-fidelity concept prototype, not a shipped product.

Open the Figma prototype →
Team project (6)AID · UTS 2024Concept — not shippedNo usage metrics
What testing revealed

Four findings, four fixes.

The 10-participant evaluation pinpointed exactly where the prototype broke down. Each finding mapped to a Nielsen heuristic — and to a concrete fix.

Major

User Control & Freedom

The delay notification had no dismiss — users were forced to act on it.

Fix applied →

Added a dismiss button to the pop-up.

Major

Visibility of System Status

The ‘Heavy Delays Expected’ button was easy to miss, so users couldn’t find the reroute.

Fix applied →

Enlarged the delays button and raised its prominence.

Major

Consistency & Standards

The new suggested route was hard to tell apart from the original trip.

Fix applied →

Recoloured the new-route changes so they stand out.

Medium

Visibility & Feedback

No confirmation that a new trip had been created.

Fix applied →

Added a confirmation screen on trip creation.

From the team’s 10-participant Nielsen usability evaluation (AID 2024). Real findings, real fixes — full coded sheet shown in the research section.

Every major usability issue from testing was fixed before final hand-off.

Reflection

What I’d carry forward.

“The screens people remember aren’t the happy path — they’re the moment something breaks, and the app still has their back.”

Designing RouteSync taught me to treat states — loading, delay, recovery — as first-class screens, not afterthoughts. Testing with 10 users showed how small visibility issues (a hidden delays button, an unconfirmed action) quietly erode trust. Given more time, I’d run a second round on the reroute flow and validate the alternate-route logic with live transit data.