Designing a user-centric public transportation app for Chicago suburban trains.
What is the CTA?
The CTA stands for the Chicago Transit Authority. The Ventra app holds all information for Chicago’s public transportation systems; including the CTA rail stations (inner city trains), Pace (city buses), Metra (commuter trains for both Chicago and its surrounding suburbs), as well as Divvy bikes (shared biking system).
Problems
The Ventra app holds the information for all public transportation options in Chicago - which often overrides the general riding experience.
Currently, the application is just being used for buying tickets. The layout consists of unused information (such as misplaced hyperlinks and overloaded information), which can confuse users.
Many users note using up to 3 different apps and websites to get current and accurate information.
Project Overview
Using User Experience design methodology, I have built and designed an interactive prototype of my own public transportation app as an alternative to the existing Ventra app. I created a new app dedicated to the public transportation of the Metra (commuter rail system serving Chicago and its surrounding suburbs), filling in the gaps that the Ventra application is missing while incorporating my own features and designs to fulfill the user's needs.
My Role:
User Research
User Personas
User Flow
Low fidelity Wireframes
Visual Design
Prototype Mockups
Entire product design from research to conception, visualization and testing.
Recognition:
This project was recognized and awarded a prestigious grant by the Richter Grant committee, funding the entirety of the project and its research.
Duration: Jan 2022 - May 2023
Figma
Photoshop
Procreate
Canva
Flaticon
Project specifics:
Design process
Competitive Analysis
With so many transportation apps out there, I conducted a competitive analysis to better understand my competitor’s user experiences and identify areas of improvement. Thus providing my application with valuable insights on design and interaction. While both direct and indirect sources offered a lot of useful features, all four sources had usability gaps that I set out to fill.
Before “My Metra” was developed in any way, we had to take into consideration the pain points of the Ventra app. I conducted several in-person research interviews as well as an online survey.
My research encompassed:
-Uncovering problems in the Ventra design
-Learning more about users’ behavior and preferences
-Discovering opportunities to improve the design
Following my research guide, I conducted and followed a structured interviewing process that allowed a variety of results based on their experiences. The in-person interviewees were additionally given a usability test of the Ventra app to give direct insight into the user's thoughts and difficulties.
Understanding the problem
*View interview Guide - HERE
The targeted demographic includes users who live both in Chicago and the Chicago suburbs, ages 18 and up, with a variety of occupations and cultural backgrounds. This ensured that the information being gathered is diverse and accurately displays the ridership of the Metra train line. In-person responses were evaluated through an assessment spreadsheet including questions and recorded answers. Survey responses were automatically recorded and results will coincide with the in-person results when being evaluated. Interview responses were used to evaluate not only the pros and cons of the current Ventra app but the user's experience taking the Metra including all frustrations and concerns. This information is vital to the success of the project as the app is centered around the needs of Metra Users.
Using the quantitative and qualitative data from interviews and survey results, I defined the pain points and stories of my users through the user personas of Professor Adam Young and Business Analyst Maria Woods to obtain a deeper understanding of my user's needs to create a successful and usable application.
Empathizing with our riders
From this research, I developed an empathy map to better visualize users’ attitudes and behaviors to help gain a deeper understanding of the end users. The mapping process also reveals any holes in existing user data that could be applied to my new application.
Information Architecture - Sitemap
This sitemap, informed by interviews and surveys, was organized in five key stream lines: 1. Personalized Home, 2. Map/GPS, 3. Tickets, 4. Notifications, and 5. Account. The framework the site map provides, along with the user insight collected thus far, would act as a guide moving forward in the design process.
Wireframing the solution
Based on the problems that were identified in my user research, I began gathering potential solutions to those issues. While addressing the pain points of my user's needs is the first priority, I also saw an opportunity to incorporate my own features in addition to this app. Several versions of low-fid wireframes were sketched out based on gathered research and overall functionality. 91% of participants were able to complete all tasks successfully with version 1 of wireframes. These wireframes were ultimately chosen to be the key guide in building the high-fidelity prototype.
*View written wireframes - HERE
*Spreadsheets of interview results available upon request
Bringing My Metra users together (High-fidelity prototypes)
*Link to high-fid designs - HERE
Creating a notification section that pushes alerts (such as mechanical issues, weather delays, accidents, etc.) that are reported by the Metra users themselves.
Solution #1 - Notification Alerts
Solution #2 - Personalized Homes
Allowing users to personalize their homepages by favoriting information such as tickets, stations/lines, and alerts that apply to them specifically.
Solution #3 - Payment
Correcting the automatically saved credit card information by changing permission to include a save option or one-time use option.
Allowing users to visually track incoming trains with information on current delays and arrive times. In addition of a delay report button to keep others informed of possible delays.
Solution #4 - Live Tracking
Adding information and visual symbols to indicate which train cars have accessibility for those who are disabled or traveling with heavy cargo such as strollers or luggage.
Addition #1 - Accessibility
Information, and visual symbols to indicate eco-friendly train cars (to begin making an impact on net-zero greenhouse gas emission trains vs regular trains)
Addition #2 - Eco Friendly trains
Addition #3 - Popular Times
A popular time chart of potential train crowding depending on weekday and time
Project Takeaways
1.) Solving small problems can have big results
Valuing and solving the small problems of the Ventra application unsurfaced several opportunities to further develop the user experience of My Metra. It was incredibly rewarding to hear from my participants wishing my designs would be implemented in the future.
2.) Be open to research and let ideas go
I came into this project with some concrete ideas of how the digital interface could look like, but user research would suggest otherwise. Although the users took a liking to the feature, I needed to put the needs and challenges of the users first.
3.) Usability studies are my new best friend
Usability studies give vital insight from how real users interact with the My Metra application. This allows me to verify that the navigation and tasks function properly for ease of use.
Next Steps
If it were to continue, I would explore the following:
The Figma prototype will be handed off to a developer along with a detailed design system to ensure a smooth implementation of the design.
Feature enhancements: Further development of the report section and detailed holiday notifications.
Given the opportunity, I would love to pitch the My Metra application the the Chicago Transit Authority to assist Chicago and Chicagoland passengers commute with ease.
