Public transportation is an inevitable part of many people’s day, but it often proves to be frustrating, crowded, and unreliable. The Chicago Transit Authority (CTA) offers a variety of tools to lessen these frustrations, but commuters need a convenient, effortless way to learn about transit delays as early as possible so they can find alternative solutions and minimize how it affects their daily routine.
A mobile app that provides detailed commute information, delay notifications, and a high degree of customization.
Our design team looked at Citymapper, Transit, Transit Stop, Ventra, and Waze to determine which approaches were successful, and which patterns to avoid in order to offer an optimal user experience.
Sans serif fonts, which are clean, modern, and easy to read (all apps)
Default CTA transit colors are easy to recognize and understand (all apps)
Cards and lists provide clear structure and organization (Citymapper, Transit)
Ample white space makes information less overwhelming and easier to digest (Transit)
Transit timetables and commute information is disorganized and inconsistent, which makes it hard for the user to understand and process quickly (Transit Stop, Citymapper)
Large, bright blocks of color lend a heavy, busy appearance (Ventra, Transit Stop)
Giant, playful icons look juvenile and less professional, which can diminish an app's credibility (Waze)
We used the findings from our competitor analysis to establish a set of principles we could reference throughout the design process:
We also partnered with another design team who conducted initial user interviews to better understand commuter needs to create two representative personas:
After we completed our initial research, I created three distinct moodboards to provide a variety of inspiration and help establish an aesthetic direction for my upcoming designs.
Light, invigorating colors invoke a sense of calm and ease during stressful commutes; rounded icons and buttons provide a softer, more mellow look and feel; and a friendly, easygoing appearance encourages new users to try out the app.
A strong color palette with pops of color is exciting and attention-getting; soft corners on icons and buttons lend balance to the striking hues; and the urban edginess channels the very metropolitan setting where commuter apps are used the most.
A stable, solid color palette creates a sense of order for what can often be a hectic commute; angular line icons and buttons provide a geometric, systematic look and feel; and clean lines and grids provide a sense of ease of use and understanding.
I conducted a series of testing with five potential users to determine preferences regarding the look and feel of the different moodboards, and a clear preference emerged:
users liked the Refreshing & Happy moodboard because it evoked a sense of calm and serenity. One user said: “I don’t ever feel this calm when I think about my commute, but it sure would be nice.”
user provided informative feedback for the Bold & Vibrant moodboard, which was clearly the least favorite across the testing group. She said, “Well… this is cool and edgy, but that’s something I’d want from a fashion app, not a transit app.”
users gravitated immediately to the Structured & Organized moodboard. One user stated: “I feel like this is straightforward and easy, like I won’t even have to worry about my commute. That’s how it should be.”
I used a quick brainstorming exercise to compile words and ideas associated with commuting, which produced the following insights:
Delays are unavoidable
Commuters tend to be hurried, impatient, and stressed
The purpose of the app is to help commuters find ways to remedy delays whenever possible
I also used words and phrases from the brainstorming exercise as inspiration while sketching ideas for a potential logo. Then, I narrowed down the options and created digital versions:
I ultimately opted for a two-tone, minimalist logo with circular arrows that represent a round-trip commute. The italic typeface conveys forward movement and symbolizes the resolution of a commuter delay, while the overall symmetry provides a sense of order and organization: