← Back to list

The Space Between Navigation and Action

A Design Thinking story about closing the gap between planning and action

Nouran Mansour · 2026-01-04 23:36 · 2 claps · 3.4 min read
#ux-design #prototyping #low-fi-prototype #ironhack-prework #design-thinking
Open on Medium ↗
Wiki topics: UX · UI/UX Design PRD · Product Design 🔭 · Astronomy & Space

The Space Between Navigation and Action

A Design Thinking story about closing the gap between planning and action

Citymapper is a public transport navigation app used in many cities worldwide. It helps people plan routes using buses, trains, metros, walking, and cycling. The experience is fast and reassuring. Users quickly understand where to go and how long it will take.

But there is a specific moment where the experience pauses. The route is chosen. The user is on the platform. And the app no longer tells them what to do next.

That moment is where this project begins.

Listening before designing

Before designing anything, I spoke to five people who use public transport in their daily lives. Some commute every day. Some had used Citymapper while traveling abroad.

I asked them to walk me through a recent trip step by step. Not what they think they do, What actually happened.

Very quickly, patterns started to appear.

  • Citymapper shows the route but not the ticket price
  • The app does not tell them where or how to buy a ticket
  • They leave the app to search for machines or local ticket apps
  • Ticket zones and rules feel confusing and city-specific
  • They worry about buying the wrong ticket and getting fined

One person summed it up simply:

I know where to go, but I don’t know what to do next.

That sentence stayed with me as it explained not just a missing feature, but a broken flow — from planning to action. This is exactly what I set out to fix.

Research in service design supports this pattern. When an experience is clear up to a point and then stops right when the user needs to act, confidence drops and stress increases.

Finding the real friction point

After mapping the interviews and reflecting on the full journey, I realized the core issue was not simply the absence of ticket pricing or payment.

The real problem was this:

A Citymapper user loses confidence at the exact moment they need to act because the app stops at navigation and does not guide them to ticket purchase, creating a broken end-to-end travel experience.

Citymapper already answers where to go. It does not answer what to do next.

This break in the flow is what users keep running into. It became my guiding problem statement for the rest of the process.

Staying with the user a little longer

I didn’t start with ticket price charts or payment integrations. I started with one clear goal:

Stay with the user until the ticket is bought and they feel confident boarding.

To do that, I sketched a concept that:

  • Detects when a ticket is needed for the selected route
  • Shows the ticket price before any external search
  • Clearly highlights where and how to buy the ticket inside the same flow
  • Generates a single ticket that covers the entire journey
  • Leaves the user ready to board without exiting the app

In short, the app answers not only “How do I get there?” but also “How do I get onboard with confidence?”

This follows a core user-centered design principle: move complexity away from the user and into the system, so users spend effort only where it truly matters.

Making the idea tangible

To test the idea quickly, I created a low-fidelity paper prototype. No colors , No visual polish , Just the flow..

The prototype included:

  • A route results screen with a clear ticket indicator
  • A route detail screen showing coverage and price
  • A simple and reassuring confirm & pay screen
  • An active ticket view with a large QR code and validity time
  • A screen designed specifically for ticket inspection
  • A ticket history list for reassurance

Below are photos of the actual paper prototype I used during testing.

Paper prototyping made hesitation visible immediately. Users paused at exactly the moments where the app needed to speak more clearly.

What this process taught me

This process changed how I think about navigation tools like Citymapper. I realized that clear routes alone are not enough, and that trust is built at the exact moment users need to act. When mistakes feel costly, people look for guidance rather than options, and ticketing anxiety turns out to be emotional rather than technical. Working with low-fidelity sketches was a new experience for me, but I genuinely enjoyed it, and it helped surface flow problems much faster than I expected. I hope you enjoyed reading through this case study and that my ideas came through clearly. Thank you:)


메타데이터
post_id
51fc794ff4dc
slug
the-space-between-navigation-and-action-51fc794ff4dc
url
https://medium.com/@nouran.aa.mansour/the-space-between-navigation-and-action-51fc794ff4dc
canonical_url
https://medium.com/@nouran.aa.mansour/the-space-between-navigation-and-action-51fc794ff4dc
author_url
https://medium.com/@nouran.aa.mansour
status
ok
fetched_at
2026-06-22 17:31:34