Designing a Delhi Metro app for tourists
The following project was done as a design sprint exercise. I was given three data points and was asked to design an app using those data points in the most interesting and useful way.
Task Statement

Imagine that you are working directly with Delhi Metro Rail Corporation (DMRC). Through the deal you have access to the following:

  • Real time running status of every metro train
  • Live crowdedness of every metro train
  • Pricing from any location to any location

You have to design an Android or iOS app that makes use of these data points.

Initial Thoughts

New Delhi being the capital city of India, sees a lot of influx of people from all over the world. From tourists visiting nearby cities, to college students doing internships in the city, a lot of new people come to New Delhi every day.

Now, everybody loves an economical and fast way to move around in the city. Nobody likes to hire expensive taxis and auto-rickshaws. Delhi Metro offers just that - an economical, fast and efficient mode of transport. But, for new people in the city and for people who’re visiting just for a day or two, understanding Delhi Metro can be an intimidating task. With so many stations, metro lines and just the vast expanse of a city, one could do with a little help with Metro, when going from point A to point B.

This is what I set out to design. An easy and user-friendly way to use metro without having to understand the complexity of it, in the form of an iOS app.

Research

Having travelled in Delhi Metro before, I was pretty familiar with the working of the stations, ticketing, platforms and the trains. Still, I wanted an in-depth view of it’s working. I wanted to research on how Delhi metro helps you plan a journey.

I visited the following page to understand how Delhi metro website shows the fare, timings, stations, distance etc.

http://www.delhimetrorail.com/metro-fares.aspx?fs=SAQY8wVbPA8lld&ts=SAQY8wVbPA8lld

I also explored the android apps offered by DMRC. With clunky interface, the experience these apps offered was sub-par and the flow was not streamlined at all. These apps just had a bunch of information options for users to view.

https://play.google.com/store/apps/details?id=com.sraoss.dmrc&hl=en

Approach and Understanding the User

I started from the very basic need of a user - Getting from point A to point B.

Now, the user might not know the nearest railway station, and they shouldn’t have to. Once the user enters his current location and the destination, the app must fetch the optimum metro route for the user, starting from the nearest metro station.

Along with this, the user must be shown all the important information like station status, travel time, fare, crowdedness of trains, departure and arrival time, platform number, etc in the most contextual and streamlined way.

When designing screens and displaying information, the only guiding principle I follow is what would the user want to see at this step.

Mapping the flow
Paper Wireframing

Once I settled on a flow, I moved on to sketch the screens. I am a big fan of using the good old paper and pen for sketching and wireframing.

Here are the sketches of the main screens:

Visual Mockups

Home screen

This screen asks the user one simple question - Where do you want to go? Here the user can enter any destination that need not be a metro station.

The map shows the current location of the user. Incase the user is new to city, the map can be really helpful.

Once the user taps the input field, he’s taken to the next screen.

Destination

Here the user enters the destination where he wants to go and hits enter (return).

Metro Stations

Once the user enters the destination, the app fetches the optimum metro route starting from the nearest metro station.

  • This view shows how far the nearest metro station is and the user can even navigate his way to it.
  • It also shows the status of the station. For example, the station might be closed due to construction. In that case it will show the next nearest station.
  • Since we have access to pricing from any to any other location, this view shows the fare and the journey time in the most visually comprehensible way.
  • When you click “See Metro Trains” buttons, you’re taken to the trains overlay.

Trains Overlay

This screen actually shows up as an overlay when the user taps the “See Metro Trains” button.

  • It saves the user the trouble of another step and shows the list of trains as a horizontally scrollable, easy distinguishable cards.
  • A part of the next card is visible so the user knows that there are more items to scroll.
  • I used diffused shadows so that it gives the effect that the cards are hovering over the stations screen.
  • When you tap the easy accessible “X” button, the list of trains fades back and reveals the stations screen.
  • On tapping “start journey” on the card, the user is taken to the transit screen.
User Interface Prototyping

I used Framer to put together a simple prototype of the entire experience.

Feel free to explore the Framer prototype here.