CapMetro 2.0 Revamp
This project was a class group project done for Human Computer Interaction course at University of Texas at Austin.
CapMetro 2.0 is a revamped public transport application for the Capital Metropolitan Transportation Authority, which provides a reliable and secure public transit experience by providing public navigation throughout the city.
Project Overview
Project Duration
Sept - Nov 2022 | 3 months
​
Role
I collaborated with four other UX designers on the project's research, ideation, and prototyping.
Team
Team of 4 UX Designers
Problem Definition
The issue with the current system is that application features, navigation, data flow, and features do not match the actual user flow. With improved user flow, appropriate navigation, and intuitive design, CapMetro 2.0 will provide users with a great user experience and make them feel more at ease due to enhanced Usability and Usefulness.
Usage Research
We conducted usage research on the existing application and documented the frustrations and pain points of the users. We conducted interviews with 7 participants to find pain points and experiences from current or past users.
​
7
Users Interviewed
1
Interview Moderator
6
User Types
3
Note Takers
3
Usage Settings
1
City
User Statements Raw Data
WAAD Work Activity Affinity Diagram
-
To build the WAAD, we started out by refining the notes we wrote during the user interviews and wrote the points one by one on sticky notes.
-
After creating sticky notes of the statements from the answers we received during the interview, we started grouping the ones which were closely related to each other and discussed which category they fit into.
-
It took a lot of discussions and iterations for everyone to decide on the final categories, which were relevant to our CapMetro 2.0 system, and then we started creating sub-categories which explained the user’s pain points, interests, and expectations.
.png)
User Pain Points
Bus Schedule
Users are not able to find and comprehend the bus schedule
Ticket Orders
Users find it confusing to buy tickets online on the application
Notifications
No real time notifications about stops, and system statuses
UT ID Bus Pass
Users have to always carry their University ID Card to use as a bus pass
Navigation
The navigation through trip planner feature is not intuitive
Tracking
No real time tracking
User Personas
After the brainstorming session, we derived that CapMetro is primarily used by students, especially international students, locals that do not have their own vehicles and people who are new to the city of Austin and are yet to get settled. Thus, we finally narrowed our user types to three different categories
New Worker in City | Local USA citizen | International Student
Flow Diagram
We revised our initial flow model such that it shows how users interact with the CapMetro app, how it obtains its data from the CapMetro database, and how it then assists users in purchasing bus tickets.
Wireframes
We started with the following order:
-
Paper Sketches
-
Low fidelity wireframes
-
Medium fidelity wireframes
-
High fidelity wireframes
After developing mid-fidelity prototypes, we ran a pilot test with three users, and based on their feedback, we revised our design. After several iterations of mid-fidelity prototype, we finally created a high-fidelity prototype while taking into account the problems encountered by the test subjects.
Scenarios & Designs
User Scenario 01
Goal to Figure out CapMetro usage and buy a CapMetro Pass
​
Turkish-born Alex martin is a recent arrival in Austin. He's been here for two weeks for a business meeting. He commutes daily to the Fairmont hotel for work while staying in a hotel. Alex looked for nearby transportation options to commute to work every day using Google. In Austin, he discovered CapMetro as a local bus transit system. Alex had never heard of CapMetro or the existence of the app to use the service. To find out how to utilize the CapMetro Bus, he headed down to the hotel lobby. The hotel employees advised him that he required a pass in order to travel. A 30-day CapMetro pass was given to Alex at the hotel foyer. For the pass, he had to shell out $30.
User Scenario 02
Goal To find all possible options of buses and the fastest route to reach the destination
​
Cris is a UT Austin graduate student. He relocated from New York to Austin. He has a student ID that entitles him to limitless Cap Metro travels. He downloaded the CapMetro app, which he used for two weeks. He permanently turned to using Google Maps. He travels to school and navigates Austin via CapMetro. The CapMetro app displays a list of all the buses and their schedules for the day to assist in planning the trip. Google Maps provided a more accurate prediction of the bus arrival times, the distance covered between stops, and any potential detours he could take to get to his destination. In the end, he uninstalled the CapMetro application.
Evaluation
We did a self and peer evaluation of our HiFidelity wireframes.
Here are a few of the findings and the recommendations to make the prototype better that were proposed using heuristics.
1. Visibility of system status
​
Finding 1:
We did not include notes explaining the table better. User might not understand the difference between the blue and black dots and whether both are stops or signify different things.
Finding 2:
We did not explain what the dots and flash icons around the current position mean and why some stops have flash icons and some don’t.
Recommendation:
-
We can include a map legend or notes to explain what the dots, flash icons, and figures mean.
-
We should show users their current location on the map and follow the same color code for stops in the map that is being followed in the table for intuitiveness.
2. Error Prevention
​
Finding 1:
Negative actions like “Delete” should not be in the same color as “Add to Cart” or “Show Ticket” button, while also being in the same location on a ticket.
Finding 2:
We are showing advertisements of other transportations in between the trip planning results with similar UI.
Recommendation:
-
Delete buttons should use red or other alert color to differentiate the option.
-
We should use different colors or other design patterns to differentiate Ads of other transportations and CapMetro’s own system.