User Pain Points
Increasing Chicago's Public Transportation Retention and Revenue by Re-establishing Confidence in Users
This is a UX/UI case to redesign the mobile app - Transit Stop. However, the key focus here is to get inside my head and understand how I conducted my research and design process.
Case Study Overview
Transit Stop plays a major role in the daily life of hundreds of thousands of people. The Chicago Transportation Authority (CTA) operates the nation’s second-largest public transportation system; on an average weekday, 1.6 million rides are taken on the CTA. With an app used by hundreds of thousands of users on a daily basis, Transit Stop lacked certain qualities including clarity, simplicity, ease of navigation, high attention to core controls, and minimalism.
Tools used: Figma, Miro, Google Forms
Artboard Size (Aspect Ratio): 737 x 1330 (iPhone SE)
Timeline: 5 weeks
Industry: Transportation Navigation
Roles: User Research, UX/UI Design, Interaction Design, Visual Design
Challenge
The inspiration to redesign the application was solely based on my personal experience using Transit Stop when I first moved to Chicago. I was unable to navigate the app and became frustrated several times when trying to find a specific route. Additionally, there has also been a retention decrease in Public Transportation use due to reliability and safety.
Despite being the first app in Chicago to provide public transportation navigation, the UI of Transit Stop is not even in the race to compete with the polished UI of other competitors in the market. Transit Stop needs a revamp with the sole purpose to enhance the entire user experience.
Lack of User Engagement: The first impression of an application is crucial to a user. The original app does not leave the user feeling confident. In terms of UI, prominent features aren’t easily accessible and the application lacks minimalism and simplicity.
Aesthetics and Visual appeal: The interface violates certain aspects of design, from misaligned placement of texts to visual aesthetics. The design is outdated and could be improved.
Existing Transit Stop UI Design
Proposed Solution
Enhance the user experience by removing unnecessary complexity and poor navigation
Design a more personable and intuitive user interface by introducing new accessible controls
Design empathetic controls that solve reported user pain points
Stay consistent in branding. The redesign shouldn’t overwhelm the experience already provided to its existing users.
I was driven by the motive to make the app visually appealing and seamless to users. I also wanted to enhance the user experience by identifying pain points and areas of development. With a holistic approach, I gathered information and researched, ideated design principles, sketched, and created wireframes. Then I implemented the new UI design into the prototype, and finally ran usability tests.
I mapped out my research and design process into 3 major parts:
Experience
Surveys
Surveys were conducted to learn how likely users would be to use one form of public transportation over another. It was also used to learn how often, reliable, consistent, and safe each method of public transportation was. 6 questions were asked. 5 users responded to the survey. Some key takeaways from the survey were:
Users are more likely to use the train than the bus
Users find the train not safe to ride on
Users find the train unreliable
Interviews
A user-centered approach was used to create a questionnaire. I interviewed 5 people who regularly use the CTA. I learned about users’ habits and pain points. Some of the pain points interviewees identified were:
Lack of safety
Lack of cleanliness
Train and bus packed
Train and bus delays
Communication
Affinity Diagram
Based on the surveys, interviews, and frustrations, an affinity diagram was developed to understand the usability pattern. A human-centered approach was used to identify what users want the most in terms of user experience:
To feel safe
To ride on clean transportation
Reliable transportation
[More CTA Riders are getting attacked, with violence at a level not seen in over a decade: August 2022, source link]
Secondary Research
At this stage, I conducted secondary research to gain a deeper understanding of the frustrations users were experiencing. What I learned is, safety is a big concern among commuters, with violence at a level not seen in over a decade. As of July 19, 2022, there have been over 488 violent crimes committed on CTA property. With the rise of crimes committed on the CTA, we are equally seeing a decrease in CTA users.
Currently, the CTA brings in over $278.5 million a year to the city of Chicago. In 2019, the CTA’s average number of monthly riders was nearly 38 million, less than half as many riders have used the public transit system each month in 2022. If CTA fails to improve safety and reliability - CTA profits will be impacted.
Major Competitors
Competitive Analysis
Based on my research, I learned that there are 5 major mobile platforms that offer public transportation navigation. Some of the apps are Transit Stop, Transit, Uber, Google Maps, and Apple Maps. With the exception of Transit Stop and Transit, not one of these mobile apps are primarily public transportation platforms, and none of them offer the total user experience. However, each platform does bring different features to the table, such as reporting information, user journeys, and empathizing with the user.
Ideation
Goals for redesigning Transit Stop:
Enhance the user experience by removing unnecessary complexity and poor navigation
Design a more personable and intuitive user interface by introducing new accessible controls
Design empathetic controls that solve reported user pain points
Stay consistent in branding. The redesign shouldn’t overwhelm the experience already provided to its existing users.
Sketches
This was the first step to help me outline the app and visually imagine it.
Wireframes
This visual guide represents the skeletal framework of the app. It helped me arrange the interface elements while I focused on the functionality rather than what it looked like. The simplicity of the wireframes allowed me to quickly test ideas without diving into the details.
Medium Fidelity Mock-Ups
In a more in-depth iteration, I was able to communicate what the final interface would look like and give users a chance to preview the design and style choices before committing to building the app.
Feedback
To expand my point of view and to see if I was headed in the right direction, I shared my medium fidelity mock with 5 users that I interviewed. I took their feedback and used it to improve the UI design to help users achieve their goals. Their feedback included:
User insights from the survey
Implementation
UI Design: Home Page
Structuring the application’s home screen is the most integral part of the redesign process as it is the most important screen. Key changes and rationale were:
Increased Accessibility
Research shows about 75% of people rely on their thumbs to get things done on their phones. Positioning the settings controls and all significant controls on the bottom half of the screen increase accessibility.
Enhanced User Experience
Based on user feedback, 75% of users don’t feel safe commuting on the CTA. I added a “Share My Trip” control on the home screen that allows users to easily share their trip with friends and family, adding an extra layer of safety to their daily commute.
Added Personable and Intuitive Controls
Based on user feedback, users find that trains and buses are not clean - negatively impacting the overall riding experience. I added a “Report a Cleanliness issue” control on the home screen to give the user a more personable and intuitive control, allowing commuters to be proactive and help CTA tackle the cleanliness issue on the CTA. The report is sent to the CTA’s Sanitation Department.
Increase User Retention on CTA
Based on user feedback, users do not enjoy commuting on the train or bus when it is fully packed - negatively impacting their experience by feeling uncomfortable, standing, and being often face-to-face with other passengers in close proximity. 3 out of 5 users would rather use a different form of transportation (Bike/Uber) if the trains and buses are packed.
To improve this experience I added a live traffic feed on nearby stops. This allows users to know exactly how busy a specific stop is and allow users to plan accordingly so that they can have a joyful commute.
Decreased Bounce Rate
Based on user feedback, commuters want to know what public transportation stops are around them as soon as they open the app. The current version of the app does not showcase this, ultimately influencing the user to leave the app because they are not able to accomplish the task.
I added a nearby section to the homepage with relevant information about the commute (ex. stop, line, direction, and due time). This allows users to easily know what public transportation is around them at all times and find the nearest commute to their destination.
Increased Visibility
Research shows that 93% of navigation apps start with searching for a destination. Hence a bigger bolder search bar is introduced on the home screen.
UI Design: Settings page
The settings page is more organized and follows new user navigation - revealing to users where they are and helping them find whatever it is they are looking for. Key changes and rationale are:
Increased User Confidence
Reiterating, based on user feedback, 75% of users don’t feel safe commuting on the CTA. I added a “Manage My Trusted Contacts” control on the settings page to allow the user to have the option to turn the feature on or off and to pick and choose who they would like to share their trip with when navigating on the CTA.
Improved User Journey
Based on user feedback, Transit Stop offered poor navigation. I increased accessibility by adding a slider tab at the of the screen, which easily allows users to navigate to the Settings, Routes, and Reports pages all with a simple click.
Improved Visual Hierarchy
Based on research, a good settings experience is organized and intuitive, which allows users to confidently search for what they are looking for. I grouped controls into categories allowing users to find what they are looking for. I also established a visual hierarchy - bringing frequently used settings to the forefront and using plain language to help indicate functionality.
Try the App yourself
Take a look through the prototype to get a complete feel of how the app is supposed to function.
Usability Testing
I conducted usability tests through Maze.co by giving users 5 tasks:
Locate the Bus routes
The results for locating the Bus routes came back with a usability score of 89 out of 100 via Maze. Stating, “Super easy, found the button right away,” users found this task easy because the Bus routes control was easily accessible compared to the original version
Report an Incident
The results for Reporting an Incident came back with a usability score of 59 out of 100 via Maze. One user said, “It was a few steps to submit including the QR code, slightly confusing”. Users found the Report an Incident control easily but felt the navigation was a bit choppy and didn't like that they had to scan a QR code.
Report a Cleanliness issue
The results for Reporting a Cleanliness issue came back with a usability score of 90 out of 100 via Maze. Stating, “Very easy to report, found button right away”. 100% of users found that the CTA is not clean and believed added control would help improve the cleanliness of the CTA. Manage Trusted Contacts
Manage Trusted Contacts
The results for Managing Trusted Contacts came back with a usability score of 90 out of 100 Via Maze. Stating, “I would likely share with my emergency contacts (partner, siblings) and would like to have for my partner's trips." 80% of users who completed this task believe this added control would make them feel safe while commuting on the CTA.
Share Trip
The results for Sharing Trip reports came back with a usability score of 86 out of 100. 100% of users found this task easy to complete.
Conclusion
Once again, the project's biggest challenge was to provide the user with confidence, clarity, accessible control, easy-to-use navigation, simplicity, and visual appeal in the new redesign. I was able to create this by empathizing with the user, conducting competitive research, and listening to feedback before the final designs. By carrying out this process, I learned that users not only want to ride the CTA, but want their ride to be safe, clean, and enjoyable.
With this feedback in mind, I created my prototype for the Transit Stop app. I hypothesized that with this new UI design, Chicago Public Transportation services could increase their customer retention, and ultimately increase their revenue. Additionally, and equally as important, they could connect the community back to the city safely and happily.
The elements of my design were put to the test during a 5-task usability test. As a result, the number of misclicks was reduced by 46%, and the time per task was reduced from 7.92s to 3.91s.
The findings of this case study were backed by one man’s research. I believe that Transit Stop team, with more manpower, and access to more data, could use the process I’ve outlined above to build on these findings, and improve the overall user experience of Transit Stop.