Public Transit Mobile App

MetroMaps

MetroMaps was designed to provide users with a single application that holds intuitive maps of metro systems across Europe. The application will be available in a variety of languages so that travelers from all over the world can navigate European metro systems smoothly. Since most users are travelers and they may not have cellular data when using the application, each city’s map will be downloadable on Wi-Fi. Users can select which maps they would like to download and have available offline.

Problem Statement: Travelers need a central platform to locate metro maps so that they can navigate European metro systems efficiently.

mockuper (3).png

The Process

Personas

MetroMaps will be useful for frequent European travelers, or tourists visiting several cities in one trip. Target MetroMaps users are represented by the following personas. For each persona, there is an accompanying user story that represents the persona's wants and needs.

 

Anna the Abroad Student

  • The abroad student represents the young backpacking student who most likely has experience traveling around Europe. MetroMaps provides these students with a single, intuitive application for using European city public transportation so that they can stay on budget.

  • User story: Students studying abroad need to be able to navigate European metro systems so that they can save money by using public transportation.

 

Connor the Consultant

  • This persona represents users who reside in Europe. This user is most likely familiar with the metro systems of different cities but is not always sure which metro lines are the best to take to get to their destination.

  • User story: European businessmen and women who travel often need to be able to navigate a variety metros so that they can get around European cities quick and effectively.

Fiona the First-Timer

  • This persona considers the wants and needs of users who are completely foreign to Europe. For example, a retired American couple visiting Europe for the first time will require a lot of instruction and strong conventions to guide them through the often frightening and overwhelming process of using foreign public transportation.

  • User story: Americans visiting Europe for the first time want to be able to get around the city via metro so they can experience the city like locals and have a fulfilling experience.

Empathy Mapping

(click to enlarge)

To gain a deeper understanding of the users I am designing for, I created empathy maps for each of the key personas. This process enabled me to put myself in the persona's shoes and consider what their wants, needs, and frustrations are when using European metro systems.

Primary User Empathy Map.png
Secondary User Empathy Map.png

Sketching Solutions

After determining who the target users are and what their wants and needs are in a metro mapping system, I entered the design phase. I began by sketching solutions that would solve the persona's current frustrations and help them accomplish their goals.

IMG_0203.JPG

These sketches play with the interaction flow of the map search process. In the top left sketch, users can type to search for a metro system by city or country. The screen on the top right shows the results page based on the search query.

IMG_0204.JPG

Once a city's metro system is chosen, these sketches play around with the functionalities MetroMaps provides - such as selecting a station and viewing inbound and outbound departure times.

Wireframes

After sketching possible design solutions, I assessed which designs meet the needs of my personas the most. I iterated on my designs and turned them into mid-fidelity wireframes. To ensure that the focus was on the application's interaction design and element placement, I kept the wireframes in black and white and used the infamous comic sans typeface. This helps make sure the designer and other stakeholders viewing the wireframes do not get caught up on visual design elements like color and typeface before the interaction flow is perfected.

Artboard – 2.png

Step 1: Search for a metro map by city or country

Step 2: Select map from list of search results

Step 3: View metro map

Artboard – 5.png

Step 4: Search for metro stations via the top search bar

Step 5: View a station's inbound and outbound train times

Color Scheme

To come up with the colors for the application, I took a photo of an Amsterdam metro car and used a color picker to draw out a cohesive color scheme of primary and accent colors. 

ColorScheme.png

High-Fidelity Mockups

Once I received feedback from my professor and classmates with some brief user testing, I iterated on the wireframes and began adding visual design elements to turn the designs into high-fidelity mockups.

 

To best demonstrate the interaction flow I envisioned for MetroMaps, I created a digital prototype on InVision that walks through the key features MetroMaps will provide users.

hifiphoto.png

Once a user selects a station, they can view inbound and outbound train departure times

Maps that have been "hearted" can be found by accessing this tab

Users can sort maps by popularity or alphabetically

Clicking this icon allows users to search for routes from a beginning point to a final destination

Once a city is selected, the search bar at the top of the map can be used to locate metro stations 

Interactive Prototype

View the full InVision project here: https://invis.io/XQQSOZDVF7S

Design Rationale

The idea for MetroMaps and thus several of the key interactions came from my personal experience traveling across Europe. Speaking with other students who have also experienced the difficulty of navigating metro systems abroad reaffirmed my decision to include the features that I did. The features I found to be most useful to the target users include:

  • Metro Map Search - The application features a metro map search functionality that allows users to search for a metro map my country or city. Users also have the option to browse metro maps and sort them by popularity or alphabetically.

  • Metro Station Search - Once the user has selected a city's metro map, they can search for individual stations and view inbound and outbound train times. Delays are signified in red.

  • Metro Route Search - Having the ability to search for train routes is essential for users to find this application useful. Users can enter their beginning and end destination and MetroMaps will provide them with the best route options and an estimated length of the trip. 

  • Save Metro Route - Users can save metro routes so that they can return to them another time without having to reenter the beginning and end destination addresses.

  • Download Metro Map - Because this application is meant to be used across European countries, it is important that users have the ability to download metro maps to be viewable offline. This is especially relevant to the international users who may not have an international phone plan and therefore will be on airplane mode while traveling.

User Feedback

Upon completing the digital prototype, I showed my designs to my peers to see what they think. They found the color scheme and layout to be aesthetically pleasing and modern. In terms of features, they particularly enjoyed the ability to search by both city and country and the ability to download the map offline. As students, they found the offline map viewing option to be useful since they do not usually have data while traveling abroad. 

Next Steps

Because this project was only a month long, there are a few other research methodologies and design adjustments I would have liked to make if given more time. This includes:

  • Expand Digital Prototype - There are a few interactions that I was not able to build out due to time constraints but that I would like to explore further. For next steps, I would like to fully prototype the interaction flow of the metro route search and how the application directs users to their destination.

  • Map Sourcing - Because this application will provide users with a selection of several European metro maps, it is important to figure out where the map and train data will come from and how we will content it to MetroMaps. Looking into publicly available European metro API's is one way I would approach this. 

  • Usability Testing - Finally, I would also like to conduct usability tests with users that fall into each of the three target user groups. Although I had the opportunity to speak with other students during this project, I would like to test the application on European and international users that coincide with the secondary personas.