MTRO - iOS Transit App Design

Project Overview

About the client

MTRO DC started as a passion project by an iOS Developer in 2015 to help Washington, DC commuters get around the city.

Summary

The first version of the MTRO DC app was developed in 2015, and its design hasn't been updated since. The first version was a barebone application that gives users access to bus routes and rail lines in the area, as well as their arrival times and service alerts. The new version will add new features and functionalities, improve the application's aesthetic design, and prioritize user interaction and usabilities based on user needs.

Objective

The objective of this project is to redesign the app's interface, aesthetic, and interaction journey, as well as add new features and functionalities. The project will go through the process of discovery, strategy, and mapping to help guide us to our final outcome.

Project Year

2019

My role

User Experience Designer
Product Designer
Interaction Designer

Tools

Adobe XD
Adobe Photoshop
Adobe Illustrator

Team

Hino Banzon - iOS Developer

Discovery

At the beginning of the project, we started by analyzing the first version of the application and then identify what's missing and what we can do to improve them.

Identify Use Cases

Looking into the use cases, we were able to identify the application's primary functions.

Getting to a desired destination
Knowing the bus schedule
Finding a bus route
Finding the nearest bus stop or metro station
Saving a bus route
Getting notified for transportation update
Learning about the bus stop’s or station’s accessibility information

Identify Features

After identifying the use cases, we were able to identify the features that needed to support the use cases.

Map
Directions
Bus stop information
Bus route information
Metro line information
Metro station information
Favorites
Alerts

Identify Components

Breaking down the features, we were able to identify its supporting components. This allows us the option to research the technology that supports these components, and whether or not it makes sense to incorporate them in this version of the redesign.

Routes and Lines

Route name or number
Route destination
Stops/station
Image or color
Accessibility info
Alerts
Date

Stops and Stations

Location or name
Routes
Image or color
Time
Date
Accessibility info
Alerts
Rename

Other

Metro map
Current location map
Favorites list and categories
Directions
Notifications

User Profile Development

Once we understood the technology we needed in the application, we looked into understanding the users that would need this technology.

Identify User Types

We looked into the current users of the application, and then we grouped them into two main user groups.

Local

Frequent user
Commutes to DC over 2 days out of the week
Example: full-time workers, students, and locals
Primary activities: work, school, and events

Visitors

Less frequent user
Commutes to DC a few times a month to year
Example: weekend visitors, tourists, and suburb locals
Primary activities: tours, events, and shops

Develop User Personas

Using the two main user groups, we then created a persona for each of the groups to better understand the features that would work best for them.

User Journey and Mapping

After identifying the technology and the user's needs, we were able to map out their journey through the application.

User Journey

Going back to the use cases, mapping out the user journey helps us understand the process or steps needed for the user to perform each of the use cases.

Mapping the Application

Combining the user journey maps, we were able to effectively map out the structure of the application. This structure becomes the foundation on the screens we needed to build going forward.

Wireframe

Building the wireframes allows me to primarily focus on the structure and goals of each screen based on what we've learned about the technology and user's needs.

Sketching Wireframes

Sketching the wireframes by hand allows me to quickly put my ideas on paper, and then analyze them before taking the time to go digital.

Digital Wireframes

Once I had a clear idea of the general structure of each screen through sketching, I then created the wireframes in digital format using Adobe XD. Using Google map screenshots and Google's Material Icon sets, I was able to quickly generate high-fidelity wireframes that are a lot more informative.

Visual Elements

By using the existing design elements and retouching them, I was able to quickly redesign them for the new application. I also took the idea of Google's Material Icon and redesign our own version of icons to match more with our brand design elements.

Mockup Design

After establishing the visual elements, I was able to incorporate it with the wireframes of each screen to create the mockup. I only used nine example screens here, but there were over 50 screens (x2 for dark mode) to show different iterations to display different states and interactions.

Prototype and Interaction Design

By using the prototype feature of Adobe XD, I was able to quickly create a prototype to display the user interaction animation.

Prototyping Design

Although it's possible to prototype the entire application, I chose to only select several essential interactions for animation.

Interaction Animation Design

The interaction animation can be recorded into small segments that allows me to quickly share with my developer. The prototype itself is also shareable.

Finding Nearby Bus Stops

This feature allows the user to quickly find and get information on any nearby bus stops.

MTRO Interaction - Finding a bus stop nearby

Getting Directions

This feature allows the user to navigate to a selected destination using the city's transit systems. The application calculates the data from the city transit's API and then provides the user navigation options. When the navigation gets activated, the app will then provides the user the step-by-step information on where and how far to walk, what bus route number, or Metro rail car to take, and what stop or station to get off.

Finding Bus Routes and Rail Lines

This feature provides the user with a list of available bus routes and rail lines in the Washington, DC area. The information is complete with daily operating schedules, alerts, and route maps to help users with their commuting plans.

MTRO Interaction - Finding a bus route or rail line

Turning on the Dark Mode

The dark mode feature provides the user options of not only making the app more comfortable to use at night but also helps saves on battery life.

Take Away

Although the new design is still in development, continuous testing will be needed to ensure the app's usability and features to work well as it should. Integrations with wearable devices like the Apple Watch and other smartwatches are recommended since this will only improve the usability of the application. The goal of the design is to not occupy the user's attention but to quickly inform and guide the user in the background.

His attention to detail and willingness to go the extra mile in making sure the job is done correctly...

Marcia Degnan

Creative Director & CEO, Vivid Creative, LLC

He has done a tremendous job and every piece of design we receive is very well thought through.

Jan Ole Kjellesvig

Founder & COO, Yay Media AS

Earl has a great design sense. The visual communications he creates for clients are fresh, engaging, produced strong results..

Dave Anderson

Marketing Director, Yay Media AS

His designs are effective and elegant and he’s always thinking about the User.

Hino Banzon

Product Developer, MTRO App

On several occasions we have given him a vague idea of what we are trying to achieve and he has come back with truly unique and great ideas.

Oddbjorn Sjogren

Founder & CTO, Yay Media AS

I found him to be an extremely dedicated and caring individual and one that is adaptive to many situations...

Walter Ramirez

UX/UI Designer, Specialist On Call

He’s trustworthy, and has a great personality, making him a pleasure to work with.

Linda Laegreid Johannessen

Founder & CEO, Yay Media AS

It was a pleasant working with Earl. He was always very responsive and we are very pleased with his work.

Yun Choe

Office Manager, Oak Endodontics

Earl worked very collaboratively with my team and delivered a high quality product.

Ashanthi Mathai

VP of Marketing, Specialists On Call

He quickly grasped the nature of our business and was able to translate that information into our unique web design...

Ricardo Hunter

President, Head Injury Rehabilitation & Referral Services

Earl is the best! He explains things in ways that even I can understand...

Paul Klinger

Director, Sevenoaks Retreat Center

I’m consistently impressed with the quality of his work.

Jeff Feiertag

IT Coordinator, MCFRS

He was especially careful to get a sense of the tone I sought so it would reflect my sensibilities and personality...

MTRO DC

Washington, DC Transit App Design