Comutr

Comutr is an iOS app concept that seeks to streamline the average Chicago Metra train commuter’s experience. It would allow the user to quickly view all Metra train lines, check train times/alerts and buy tickets on their phones while also providing a better visual experience.

DESIGN ROLES

Identity

Personas

Research

User Flows

Wireframes

UI Elements

Prototype

Testing

Identity

Comutr is a brand that needs to be both professional and friendly. Starting the day with a long commute is not always the most positive experience. The logo was typeset in DIN—a classic German typeface with a long history in the early 1920’s railway and transit signage world. It is a business minded font that also was overhauled in the 90’s to be more friendly and open to variation.

comutr2_fonts

The final mark was italicized with a fading swash to show movement and forward motion. Shades of mint and citron were chosen to make the overall design tranquil with a dash of playfulness. Overall, the color scheme is mostly monochromatic, to leave space for each train line to have its own vibrant color. The typeface Lato was chosen for the rest of the app design to compliment DIN’s simplicity and utilize its many different weights.

Personas

A lot of train app users feel that their mobile train schedule experience is just “ok” and lacking in intuition. There seems to be a lot of opportunity for identifying and streamlining what an average user would find beneficial. Below are some of the invented characters that drove Comutr.

Molly | Opera Singer

Molly has an important audition for a summer program in Chicago. She is planning on staying with some friends who live in a suburb near the train line outside of the city. She wants to plan her train routes from a suburban stop to the downtown station in advance.

James | Analyst

James works from home. He doesn’t have a car, and depends on public transit to get him where he needs to be. He wants a visually pleasing app that will show him when the very next train will arrive at his station, and which stops it will make along the way.

David | Videographer

David is a videographer who commutes to the downtown Chicago area. He drives to a suburban station everyday and takes the train downtown. He wants an app that can buy tickets and monthly passes with ease.

Anna | Mother

Anna is a stay-at-home mother whose husband works downtown. Anna wants to easily be able to look up train schedules and see what time they will be coming into the station. She also wants to see alerts if a train is running late.

User Research

Research for Comutr began with a competitive SWOT analysis of other train apps to better define where Comutr could fit with its audience. A short survey was then conducted and a small sample of in-person interviews were performed.

Evidence suggested that there was still room to create a streamlined and more enjoyable train app experience. Comutr began by comparing and contrasting what options already existed in terms of a train app for the area. I chose to look closely at the onTime: Metra app, the Metra Web App and the Ventra App. All three had some huge overlapping areas where there was room for praise, improvement and simplification.

After doing a SWOT analysis on all three I started to see where Comutr could live as a viable option. It needed to be focused on trains (as opposed to Ventra serving the both bus and CTA), it needed to be more visual and include a maps, have the ability to buy tickets through the phone and integrate the current location/buying ticket flows so potential commuters did not feel so disparate.

User Flows

While mapping user flows, I thought a lot about where a user should start and how to quickly direct them toward major paths of navigation. Below is the path that seemed to work best in terms of initial flow. Users are directed toward three interconnected paths – current location, plan a trip and the main menu.

Wireframes

The next step in my process was to do iterative sketches. I tried to put myself in the shoes of each of my personas and think about the most basic way to direct them to train schedules and buying tickets.

Since Metra lines are priced by zone, I had them start with a beginning station and an end station. After sketching and getting a basic idea, these translated to low-fidelity wireframes in Sketch and were built upon from there into a fully faced prototype.

Sketches

UI Elements

To better regulate consistency and clarity for the Comutr project, I created a simple system of UI elements and standardizations that built on the original identity. This went through several iterations, since the hierarchy had to work with the different train line colors without clashing.

Prototype

This interactive prototype focuses on looking up a user’s current location, checking out a train route by zones and times, and finally, purchasing tickets. Through further testing, I have seen opportunities for adding favorite routes, GPS tracking functionalities, and notifications for which side of the track a user should be standing on.

View Other Case Studies