Ventra Chicago Mobile App

How Might We help everyday commuters effectively manage their travel passes and reduce their handoff to 3rd-party apps?

Mobile App
Commuting
Public Transport
UI Design
UX Design
Design System
Team Project

Problem

Users are abandoning the Ventra app in favor of 3rd-party apps for transit information and navigation. They only use Ventra for managing their Ventra cards and passes. However, the intricate architecture and inefficient workflow of this app hinder users from efficiently doing so.

Solution

Find pain-points and understand the needs of everyday commuters by utilizing various user research methods, then create an overhauled app experience by following iterative user-centered design approach.

Result

A mobile and a wearable application design that leverages the best heuristics and usability standards to improve the workflow and remove roadblocks to help users manage their Ventra Cards and Metra Passes conveniently.

Screensot showing three different wasys to pay for CTA and Metra: Ventra card, Ventra app on phone and Ventra smartwatch app.

About Ventra Chicago App

CTA helps 1.7 million daily weekday commuters in reaching their destination. Ventra is the companion app built for passengers to manage their Ventra Cards and purchase Ventra and Metra Passes. In addition to that, the Ventra app also provides the most accurate and up-to-date information about the trains and buses because the Chicago Transit Authority itself maintains it. However, our research says that most of these features are poorly designed and barely serve the purpose on top of randomly crashing at crucial times. It needed a significant overhaul in user experience.

My Role

Competitive Review
Contextual Inquiry
Creating Persona
Journey Mapping
Hi-Fi Prototyping
Mockups
Design System
Usability Test Moderation
Final Design

Utilizing the UX Process to find answers and create solution

Since this app has been around for a few years, a growing number of 3rd-party apps have caught up in many places where this app is lacking. Due to this, usage of the Ventra app is now only limited to managing the Ventra and Metra cards. That is why we decided to do some exploratory research.

UX Process Screenshot. It shows the process we followed, starting from Competitive review to Interviews to personas to usability tests.

Comparing with the competition

In our competitive review, we investigated several popular transit applications: Google Maps, Transit, Ventra, CityMapper, and Transit Stop. These applications had features that Ventra did not have, such as a map view, map and text view of routing, step by step commute information (e.g., est time to arrive, to walk, and disruptions). We noted down what each app does best, even the best features of Ventra itself.

Competitive Review Screenshot Mockup. It compares UX of many 3rd-party apps such as Google Maps and CityMapper with Ventra App.

Learning user behavior from Interviews

We wanted to know the experiences of everyday commuters with CTA trains and buses. Being commuters ourselves, we used our knowledge to create the questionnaire. The interviews helped us gather vital information about their commute problems and the reasons why people prefer 3rd-party apps over the Ventra app for transit information.

Image showing Screensot of Interview script.

Getting concrete data from Survey

After learning about commuters' past experiences and future expectations, we decided to create a survey to get specific information from participants. We asked them about the app they regularly use to aid their commuting experience, for what purpose do they use that application if they ever missed essential announcements and other commute related questions. We gathered statistical evidence of the information we found through analysis, competitive review, and interview sessions.

Consolidating exploratory research into distinct Personas

Based on the collected information, we created two personas based on two distinct profiles of users that we generated from our exploratory research. The first one being a person who works in a company and the second one being a person who is studying in DePaul University.

Image of a persona named Lily Ford. Shows her bio, personality, goal and frustrations.Image of a persona named Jake Shapiro. Shows his bio, personality, goal and frustrations.

Mapping the lives of users

We also mapped their journey to getting a Ventra card and using it to accomplish their daily tasks such as commuting to the office or college. The users’ journeys helped us in finding the problem areas and opportunities for the Ventra application to provide a better service.

Journey Map of Lily Ford. Shows how she goes about commuting everyday without a Ventra card.Journey Map of Jake Shapiro. Shows how he goes about commuting everyday without a Ventra card.

Utilizing Usability Tests to evaluate solutions

Ventra App Usability Test

To begin with, we tested the usability of the Ventra app to find out exactly where the app is lacking in usability standards. We treated this as our baseline test on the System Usability Scale (SUS). We tested the prototype with 5 users. The calculated SUS score was 58.7, lower than average and desired score of 70.

Testing Metrics
  • Ease of Use

  • Satisfaction level

  • Findability

  • Usability

Screenshot of the current Ventra App.

Paper Prototype Usability Test

Then we created a paper prototype with numerous improvements and tested it with users. The calculated SUS score for this test came out as 62. Then we compared the SUS score and the metrics with our baseline test.

Photo of a person using the Paper Prototype during the Usability Test session.

Mid-Fi Prototype Usability Test

Based on our paper prototype and the feedback from the previous usability test, we created a digital and improved version of the prototype to test it with another set of users. The SUS score got calculated as 55 which accounts as extremely poor usability. This score was even lower than our baseline test.

Screensot of Mid-Fi Mockup for the new Ventra App.

Hi-Fi Prototype Usability Test

Based on all the collected feedback, we iterated the design with more improvements and made it more realistic. The challenge was also to overcome the poor results from the Mid-Fi testing. Hence, we went back to the drawing board and came up with better solutions. Then we tested it again and compared the score with baseline and previous test SUS scores. This time the SUS score reached 67, very close to desired score of 70.

Screensot showing High Fidelity mockups of the newly redesigned Ventra app. Click to open image in full screen.

Final Design

To improve upon the feedback from the Hi-Fi prototype, we decided to enhance the design further and create a final design that can achieve a high level of visual fidelity and more improved usability. We used Adobe XD to create the final prototype based on the Design system components we created.

View Interactive Prototype
Multiple Devices Mockup image showing 2 different devices: smartphone and smartwatch.
Mockup image of newly designed Ventra app on a Galaxy Watch.
Mockup image of a person wearing a Smartwatch and using Ventra Watch App.
Isometric Mockup image of Ventra app running of android phones.

Learnings

  • Creating a Design system is essential for a mid to large scale product and doing it early on saves a ton of time in creating the design.

  • When in conflict over two variations from two designers, test them. It is the easiest and quickest way to resolve conflicts. We are not the end-users.

Liked what I did? Want to have a chat?

Let’s catch up for Coffee! Here’s my email: cyogesh56@gmail.com

Email copied to your clipboard.
Can't copy Email to your clipboard.

LinkedIn

Medium

EyeEm

Want to see more projects?

Continental case study cover image. Click to open case study.

Continental Desktop App

Communication Assist case study cover image. Click to open case study.

Communication Assist Desktop App