Ann Marie Designs ◂ Prev
▸ Case 03 / 03
All work ▸
Springboard Bootcamp · 6 months

PLANR: A Public Transit Planning App

A prototype iOS app that helps DC commuters plan, save, and navigate public transit journeys — my first-ever UX case study, from a 6-month Springboard bootcamp project.

PLANR home screen — saved journeys and stations
Skip to work ▸

Quick look

This is the bare-bones, image-first version — this was my very first UX project, and there's a lot of process behind it most people won't read. Want the research, personas, and iteration? Read the full write-up →

Research

7 interviews. 1 metro station. A lot of sticky notes.

Recruiting at the metro

I recruited most of my 7 interview participants old-school — flyering my local metro stop during rush hour, gift card in hand. Turns out $15 to Amazon goes a long way when someone's just trying to catch a train.

Recruiting interview participants at the metro station during rush hour

Affinity mapping the interviews

3.5 hours of interview recordings and 18 pages of notes, sorted onto a wall by hand. Planning kept coming up more than mapping — people already knew how to get somewhere, they just didn't know the best time to leave.

Affinity map of interview notes on sticky notes, grouped by theme

Turning interviews into personas

From the 7 people I talked to, I built 3 personas — John, Leslie, and Hayden — to represent frequent high-stakes riders, frequent low-stakes riders, and suburban commuters.

Three personas — John, a healthcare worker; Leslie, a PR professional; and Hayden, a suburban commuter

Sketch to system

From paper to a working style guide, fast.

Round one: paper

The very first sketches — working out the core screens (saved stations, saved journeys, creating a new journey) with pencil and a notebook, before touching Figma.

Early paper sketch — creating and saving a new journey Early paper sketch — saved stations and saved journeys

Round two: refining the flow

A second pass on grid paper, tightening the navigation and mapping out how each screen actually connects to the next.

Refined paper sketch — home, saved journeys, and journey detail screens Refined paper sketch — add station and station detail screens

Wireframes, digitized

Once the core flows felt right on paper, I rebuilt them in Figma — same structure, now testable and shareable.

Full set of PLANR wireframes built out in Figma

Locking in a style guide

A simple color, type, and icon system kept the hi-fi screens consistent as I moved fast through iterations.

PLANR font system — headers and body text, light and dark

Mapping the flows

Before jumping into hi-fi screens, I mapped three core "red routes" — plan a journey, save a station, check saved journeys — screen by screen, to make sure the flows actually held together.

Red route flow diagrams mapping the core PLANR user journeys across screens

The final product

Four core screens, from planning to riding.

All four final PLANR screens shown together

Outcome

On the final MVP prototype, users hit a 96% success rate in unmoderated testing (Maze, n=26). It was my first time designing an end-to-end product, start to finish — and it's still the project that taught me the most.

📖

Want more detail?

Curious about the research, personas, and iteration behind it? Read the full case study →

All done here

Back to all work →

See all work ▸