PROJECT OVERVIEW
Rider is a Dedicated App focusing on passenger safety during public transportation. Our product aims to provide immediate help to people during incidents. Rider’s primary target users include people who take public transportation to places often and are concerned with their safety during trips and would like to have an avenue to avoid incidents and receive help.
PROJECT DURATION
March 2022 - April 2022
ROLE
UX designer leading the app and responsive website design from conception to delivery
WHY I DECIDE TO DO THIS TOPIC
I often take public transportations to places when I was in China. I've witnessed several incidents during the rides myself, and I have mixed feelings toward public transportation safety. That is when I started looking into the issues in public transit and decided to create an app in the Google UI/UX course, for people who are having similar experiences, for them to be able to ask for help.
THE PROBLEM
Due to the ongoing COVID-19 pandemic and recent inflation, many people have shifted to riding public transportation, in lieu of driving. This underserved community often faces the problem of not being able to receive help in emergency situations. The public transit company was also not able to collect enough data to improve their service for riders.
THE GOAL
Design an app that will provide help to anyone who is concerned about their safety before or during travel.
UNDERSTANDING THE USER
-
User research
-
Personas
-
User Stories
-
Problem statements
-
User journey maps
-
Competitive Audit
-
Ideation
USER RESEARCH: SUMMARY
I started by conducting research on issues that were discovered in news or reports about public transportation. After a period of data collecting, I developed a research plan that focused on issues that primary users encounter. I then went to bus stations to conduct interviews with people who are waiting for public transportation to arrive. Most interview participants reported feeling helpless when they witness or experience incidents, and they are not able to ask help or avoid incidents. They did not have any ideas to solve the issue. The feedback received through research made it very clear that users would benefit from having an app that ensures they receive help in dangerous situations, it can also help them save time if they are able to avoid incidents before the trip.
PERSONA: Janna
Problem statement:
Janna is a project manager who travels around cities who could benefit from the availability of incident records and the ability to report incidents. This can save her time during her commute, as well as help others.
USER JOURNEY MAP - Janna
.png)
Mapping Janna's user journey map revealed how helpful it would be for user to have an app that can check and report incidents.
PERSONA: William
Problem statement:
William is a high school student that takes the bus everyday to travel home and needs location tracking and record trip features to make faster emergency calls in case anything happens on the bus, because he wants to go home safe without having to be involved in potential incidents.
USER JOURNEY MAP - William
.png)
Mapping William’s user journal helped me better empathsis with the potential users who are troubled by possible encounter of incidents. It also revealed the opportunities of adding features such as location track or panic button to help improve the security during the trip.
COMPETITIVE AUDIT
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Rider app.
IDEATION
I did a quick ideation exercise to come up with ideas for how to solve the pain points that were addressed from other competitors. My focus was specifically on providing help through simple steps and modifications that companies can take.
STARTING THE DESIGN
-
Sitemap
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
SITEMAP
The difficulty to ask for help during emergency situation was a primary pain point for users. To help users solve this issue, other than having the SOS button throughout the whole App, I also incorporated the incidents page, users are able to avoid the potential danger by checking the page before the trip.
My goal on building the sitemap was to make strategic information architecture decisions that would improve overall user experience. The structure I chose was designed to make things simple and efficient.
PAPER WIREFRAMES
After ideating and creating a sitemap, I drafted some paper wireframes to think through the elements that were needed to show the main features.
I also included a frame for new users to set up their check in so they can avoid going through those steps in real travel time.
DIGITAL WIREFRAMES
SOS will be shown on the top of most screens to provide consistent availability to the users.
Users are able to see their location on the map during a trip, with this feature they can also report incidents quickly and accurately.
I created the initial designs for the Rider app. These designs focused on providing a check in flow along with video/audio recording, users are able to get help with simple steps and check/report incidents to receive/provide help to the community.
TESTED LO-FI PROTOTYPE
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of trip check-in and the reporting of incidents involving audio recordings.
USABILITY STUDY: parameters
STUDY TYPE
Unmoderated usability study
PARTICIPANTS
5 participants
LOCATION
United States, remote
LENGTH
20-30 mins
AFFINITY DIAGRAM
RESEARCH STUDY AND OBSERVATIONS
USABILITY STUDY: FINDINGS
These were the main findings uncovered by the first usability study:
Incident Customization
Most of users want to apply filters to the incident page so they can find desired information expediently.
1
Save Drafts
​
During the incident report section, users get frustrated when they can't save drafts, they want to modify the report in case anything happens previously unincluded.
2
Privacy
​
Users are concerned about privacy prior to being explained why location track is a necessity.
3
REFINE THE DESIGN
-
Mockups​
-
High-fidelity prototype
-
Accessibility
MOCKUPS
Based on the insights from the usability studies, I applied design changes like providing a filter in the incident section, users can customize the page which can help them find the useful information efficiently.
Additional design changes included adding a save draft button when they are in the process of writing a report, users are able to modify the report later.
Another main modification is adding a progress bar during the setup process, so users understand clearly how many steps it takes to set up the app. I also added an additional explanation of where and how the app will use the personal data.
HIGH-FIDELITY PROTOTYPE
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, I also expanded the setup page and added additional pages such as SOS/panic to further fulfill user needs.
ACCESSIBILITY CONSIDERATIONS
Highly contrasted color for important elements like SOS.
1
Adding a tutorial for the app so users can be shown how the app works up-front.
2
​ Clear labels for interactive elements that can be read by screen readers.
3
RESPONSIVE DESIGN
-
Information architecture
-
Responsive design
SITEMAP
With the app designs completed, I start working on designing the responsive website. Since users are most likely to use Rider on mobile, the website works different than the dedicated app. Instead, Rider’s website shifts its focus to engage with donations, volunteering, and app download.
DIGITAL WIREFRAME
After completing the sitemap, I then proceed to the digital wireframe, the main pages that were discovered are Homepage, donation, incident discover, and a page for app overview.
Lofi-prototype
The low-fidelity prototype of the responsive mobile version includes main flows like donation, App checking, and incident checking.
View Rider responsive Mobile
RESPONSIVE SCREENS
Responsive website mockup: Homepage and Donation
Responsive tablet and mobile mockup
GOING FORWARD
-
Take aways
-
Next steps
IMPACT
Almost all the users during the usability tests are willing to use the app in the future, they shared that the app made the trips seem safer and they could really get help with its help. One quote from usability tests was that”I could see the app really help with the ones who are uncertain in the trips, especially females. I would also encourage you to talk to companies about this app, it can help gather data and improve their services!”
ALL USER VALUE
With the help of Rider, all users can benefit from trip recording and incidents discovering features. For people who is concerned about their friends/families' safety, they can also access the website/mobile/tablet version to check incidents.
UNDERSERVED POTENTIAL USERS
In small cities where people in all ages take public transportations to go to places, they tend to worry more about the trip safety from the data I gathered in the user research, they prefer to take public transit in day time to avoid incidents. Rider can make sure those potential users have access to immediate help and get home safe.
BUSINESS VALUE
Based on the research early on, I discovered that companies are having a hard time to gather data. Rider can function as a responsible tool to help companies receive the incident reports. Buinesses that serve people in public transportations can benefit from Rider and improve their services for the safer experiences for all.
WHAT I LEARNED
I learned that even through the problem I was trying to solve can be improved from different angles, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful. There are so much we can do in the future to solve the issue, but making small changes also is a big step towards the goal.
NEXT STEPS
Conduct research on how successful the app is in reaching the goal to offer help during incidents.
1
Conduct second round of usability tests for the responsive website flows for iteration.
2
Connect with public transit companies for possible app development.