Gas prices are at an all time high, leading people to consider using the public transportation system again despite lingering concerns about the physical safety and hygiene due to the pandemic. The Tap app, originally created to help people in Los Angeles commute on the public transportation system in an efficient and hands-free manner, lacks the necessary features to help commuters feel safe on public transportation.
Tap LA is an app that’s used by commuters using public transportation in the Los Angeles area to help them navigate their routes on public transit and upload their funds onto the TAP card that’s used to pay for their fares.
However, since its release in 2021, not only is it ineffective in doing some of the jobs it was meant to do, it has failed to address some major concerns of its riders in a post-pandemic lifestyle.
“I keep having to check Google maps to check how many stops before mine."
“I don’t really use the Home page on the app at all. I really only need the cards on there to load money so I can pay for my ride."
-Review from the App Store/Play Store
.png)
Immediate growth potential for the government
Future growth potential for the Government
When diving into the project, at first, we wanted to understand our users problems due to rising gas prices.
1st Survey: 27 participants who use cars as one of their modes of transportation
2nd Survey: 17 participants who use public transport as one of their modes of transportation
6 user interviews: Participants who have experience with public transportation in large metropolitan cities
Although people are unsatisfied with the high gas prices, they have to unwillingly spend on gas due to essential travel and thus look more for convenience than saving.
We learned that most people in California did not have any option other than to drive to get to their destinations due to limited transportation options.
So, we decided to refocus our target user to those who live in large metropolitan cities who do have access to other forms of transportation.
Graph taken from the Bureau of Transportation (on top) in LA County showing sharp drop in public transportation usage and slow increase in usage of public transportation options. Pie graph (on bottom) show percentage of people who took Public Transport according to 2nd survey.
Graph taken from the Bureau of Transportation (on left) in LA County showing sharp drop in public transportation usage and slow increase in usage of public transportation options. Pie graph (on right) show percentage of people who took Public Transport according to 2nd survey.
Ridership on public transportation significantly dropped in early 2020 due to the pandemic and matches the data from the Bureau of Transportation.
Since then it has steadily increased, but still is not quite at the level it used to be despite the progression back to a pre-pandemic lifestyle.
Tap LA is an app that’s used by commuters using public transportation in the Los Angeles area to help them navigate their routes on public transit and upload their funds onto the TAP card that’s used to pay for their fares.
However, since its release in 2021, not only is it ineffective in doing some of the jobs it was meant to do, it has failed to address some major concerns of its riders in a post-pandemic lifestyle.
Volunteers are having a hard time signing up and finding important information to make their jobs easier.
After interviewing our stakeholder, Mr. Orchard for the website redesign, we came to the conclusion that volunteers are our primary users. However, the dated website hasn’t been updated since 2003. New volunteers, primarily college students and people in their 20s, are not used to jarring visuals and poor website design of the early 2000s.
As a non-profit with limited budget, having to maintain the website in the long run would have been difficult for the organization. Thus, they were not able to give enough thought to usability, visual communication and design, and information architecture as the primary focus of the website.
Furthermore, we discovered that they are not accepting new volunteers in the pandemic, relying only upon returning volunteers through a limited and inconvenient RSVP system, and Reading Clubs are only conducted virtually. These changes are not reflected in main homepage at all. We were only able to discover such key information when we read their newsletter tucked away in a sub-page.
.png)
.png)
.png)
“I’m not sure how to Sign Up? The RSVP link just takes me to a list of all the Volunteers and doesn’t let me join the list..."
“I can’t figure out how to navigate to upcoming events. The navigational menus are very confusing."
Comments taken during usability testing of the original website.
How many participants?
Who?
Potential volunteers in their 20’s
What was being tested?
The users were given two tasks:
Task 1: Find out how to sign up to make an appointment to volunteer at a school/event and find its location
Task 2: Find out about future events hosted by the organization and navigating to its dedicated page.
Task 1: 7% success rate from users who were able to find how to to sign up and find the locations of the schools. Only one user was able to partially complete the task!
Task 2: 43% success rate from users who were able to find out about future events and was able to navigate to that page. Most users were able to partially complete the task. Only one user could fully complete the task!
.png)
.svg)
Based on our research, we came up with this persona:
Michael’s experience with the website would go something like this:
.svg)
.png)
.png)
.png)
.png)
We decided to use color styles similar to original because we wanted to work within the requirements for the app’s brand image.
Since some of the original colors did not pass the contrast ratio for background and text accessibility, we upgraded the color scheme. We also condensed the amount of color styles to give the app a more streamlined and professional look.
We used text styles that will have bolder headings and improve visibility. Readability is important for the app, so we stuck to black and white text for better contrast.
We created two major flows that a potential volunteer might go through. They are “Sign Up” and “Browse.” For the scope of the project, we focused on the “Sign Up” since that is where the majority of volunteers were facing issues.
.png)
Scenario: Let’s assume that we have a new user who wants to volunteer and sign up for reading clubs. The front page is not as intuitive regarding volunteer sign-ups so they would like to navigate through the menus? Where would they first want to click?
Most users would want to click on the “How to Help” tab to find any volunteering information and would also look to sign up through the tab.
Reality is, the “How to Help” tab has NO actionable course the user could take to actually sign up. The sign up section is rather in the “Reading Club” tab, a terminology new volunteers wouldn’t be able to understand.
In addition, the repetitive side menu with the same exact information as the top one can make our user’s experience navigating through the website even more confusing.
Thus, the informational structure of the website definitely needs more improvement.
.svg)
Solution:
.svg)
After working on wireframes, we decided to get feedback on color, sizing, typography, menu navigation and various UI elements from peer review session.
.png)
Initially, we were leaning towards a fun, colorful design that would reflect the value of the brand which is to make reading fun for kids. But, having too many colors can look haphazard, and busy. There would be a lack of priority in the UI when users need to take an action. It would also lack the professional look of the brand that many of our adult volunteers of college age are looking for.
So we decided to :
Round 1: Tested Wireframes
Round 2: Tested High Fidelity Prototype
Task 1: How would you activate the safety feature?
Task 2: How would you find info about health protocols on public transit?
There was a 100% success rate of completing the tasks from 7 users in both rounds.
Round 1: Tested Wireframes
Round 2: Tested High Fidelity Prototype
Task 1: How would you sign up to volunteer at a school?
Task 2: How would you waitlist for a school?
There was a 100% success rate of completing the tasks from 5 users in both rounds.
Based on feedback from user testing on wireframes, these were some changes made on the final prototype:
.png)
.svg)
An important feature like safety needs to be highlighted right when the user initially interacts with the app which will be during boarding public transit such as a bus or train.
When our user opens the app, they will scan their card to board the bus. As the card is scanned, it will immediately direct the user to turn on safeRide Mode.
.svg)
Our most important physical safety feature, the safeRide Mode, helps commuters feel safe on public transit.
The safeRide Mode button turns into a direct link to alert the nearest authorities or security personnel if commuters feel like they are in danger.
Since accidents happen, we also included multiple failsafes in the event our user accidentally sends an alert.
Accessibility is important for a safety feature, so SafeRide Mode is accessible from any screen when activated.
.png)
.svg)
A simplified Cards page as the main screen highlights all the important health and safety protocols and contains the TAP card as well.
The banner at the top keeps users up to date on latest covid-19 tracking updates on case statistics.
Important health and hygiene information such as Routine Sanitization, Free Masks, and Live Crowding Information is highlighted right on main Cards page.
You can also see Routine Sanitization and live crowding information from the Trip tools page.
On the mobile version of the website, this is what the volunteer sign up process would look like.
We focused on optimizing the sign up process, improving it stylistically, making the rules and information clear for virtual sessions and added rules for a waitlist system for easier sign ups. View the Figma prototype below! You can maximize it to full screen and click through the pages.
Initially, we were leaning towards a fun, colorful design that would reflect the value of the brand which is to make reading fun for kids. But, having too many colors can look haphazard, and busy. There would be a lack of priority in the UI when users need to take an action. It would also lack the professional look of the brand that many of our adult volunteers of college age are looking for.
So we decided to :
Task 1: 7% success rate from users who were able to find how to to sign up and find the locations of the schools. Only one user was able to partially complete the task!
Task 2: 43% success rate from users who were able to find out about future events and was able to navigate to that page. Most users were able to partially complete the task. Only one user could fully complete the task!
How many participants?
Who?
Potential volunteers in their 20’s
What was being tested?
The users were given two tasks:
Task 1: Find out how to sign up to make an appointment to volunteer at a school/event and find its location
Task 2: Find out about future events hosted by the organization and navigating to its dedicated page.
