EV logo
Loading...
EARL VARONA
Facebook icon
LinkedIn icon
MTRO DC UI Screens

MTRO DC

Washington, DC Transit App Design

Project Overview

About the client

MTRO DC started as a passion project by iOS Developer Hino Banzon in 2015 to help him, and his friends commute around Washington, DC.

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
  • Interaction Designer
  • User Interface 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.

Brand 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.

Mockup design

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
MTRO Interaction - Getting directions

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
MTRO Interaction - Turning on dark mode

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.

Marica Degnan

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
Jan Ole Kjellesvig

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
Dave Anderson

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
Hino Banzon

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

Hino Banzon

Product Developer, MTRO App
Oddbjorn Sjogren

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
Walter Ramirez

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
Linda Laegreid Johannessen

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

Linda Laegreid Johannessen

Founder & CEO, Yay Media AS
Yun Choe

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
Ashanthi Mathai

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

Ashanthi Mathai

VP of Marketing, Specialists On Call
Anonymous male profile image

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
Paul Klinger

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

Paul Klinger

Director, Sevenoaks Retreat Center
Jeff Feiertag

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

Jeff Feiertag

IT Coordinator, MCFRS
Arthur Magida
Quotation mark icon

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

Arthur Magida

Author, The Nazi Seance