A friendly, intuitive app for navigating commuter transport services and planning journeys in many cities, with maps and schedules available for offline use.


metro app storyboard

Wireframe Demo


The idea for this app was borne from my frustration of using transport apps!

When travelling, a transport app may require an internet connection, which can be a problem if you do not have a local SIM or you may not be able to access the internet while on a train! Often, there is no information or orientation for someone who is completely unfamiliar with the city and ticketing system. And additionally, the signs and announcements may be in a language that you cannot read or understand, which makes it very difficult to navigate the transport system!

Even when using a transport app in your own city, schedule information is generally absent. So, planning a trip at a particular time is not possible in the app. The user interfaces are prohibitive, you cannot explore the travel times across the city, and it is difficult to visualise the route for your planned journey.

There are many areas for improvements. These are the areas I have identified:

  1. Allow different views of the transit system for a clearer overview, and easier selection of stations for planning a route.
  2. Include schedule information with different views.
  3. Allow the map and the schedule to be viewed simultaneously and to be toggled easily.
  4. Show a step-by-step route for your planned journey.
  5. Allow the user to simulate the journey and be notified when they should transfer.
  6. Make the map and the schedule data available for offline access.
  7. Be able to view journey times between stations on a real "slippy" map to explore the transit network for a city to estimate journey times.

Design Process

After outlining my motivation, I made a storyboard.

Then, I made some rough drafts of some screens on paper to solidify my thoughts on each section

I wrote a short design document v0.1 to outline the characteristics of the app in more detail and create some low-fidelity draft screens in Inkscape.

I created the screens with higher fidelity in Adobe XD and made a wireframe demo.

Creating the wireframe demo prompted some questions and I resolved these issues during this process. I created a new version of the design document to specify the changes explicitly.