Project
Chicago Transit App
Timeframe
3 weeks
Skills
Research
UI/UX design
Material Design
Interaction design
Information architecture
Branding/logo design
Deliverables
Competitor analysis
Moodboards
Mockups
Prototype
Responsive website
Style guide
Project
Chicago Transit App
Skills
Research, heuristic evaluation,
user testing, UI/UX design,
IxD, IA
Skills
Research, UI/UX design, Material Design, IxD, IA, branding/logo design
Deliverables
Competitor analysis, moodboards, mockups, prototype, responsive website, style guide
Timeframe
3 weeks
Deliverables
Competitor analysis, moodboards, mockups, prototype, responsive website, style guide

OVERVIEW

The Challenge
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.

Fast Facts

The Solution
A mobile app that provides detailed commute information, delay notifications, and a high degree of customization.

INITIAL RESEARCH AND INSIGHTS

Competitor Analysis
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)

Competitive Analysis

Design Guidelines
We used the findings from our competitor analysis to establish a set of principles we could reference throughout the design process:

User Personas
We also partnered with another design team who conducted initial user interviews to better understand commuter needs to create two representative personas:

STYLE EXPLORATION

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.

 Refreshing & Happy  

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.

Bold & Vibrant  

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.

Structured & Organized  

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:

LOGO AND BRANDING

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

  • Using a play on the Spanish term ándale, and inspiration from
    the Speedy Gonzalez cartoon character, I landed on the the following app name:


unDelay

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:

DESIGN SOLUTION

I combined the many insights I uncovered through research, style exploration, user testing and branding to design the unDelay mobile app and marketing website. The app provides commuters with relevant information in an organized, straightforward manner, while allowing them to control their levels of customization and participation.
During the sign-up process, commuters can specify routes, set commute times, and choose a home screen widget.
When a delay occurs, commuters receive real-time alerts and detailed updates to help mitigate disruptions to their routine.
unDelay also provides alternate route suggestions, interactive tools and graphs, and the option to view or report congestion levels.
I also applied a similar aesthetic to create a responsive marketing website, where commuters can learn about the unDelay’s features, read testimonials, and find links to download and get started.
Finally, I drafted a style guide that details the visual elements of the mobile app and marketing website. It provides guidelines for consistency and cohesiveness across the unDelay brand as well as insight for future designers and developers working on the project.
View Style Guide
© 2021 Alice Gates