Improving Public Transport Digitally
I attended Wizeline's UX Academy, a 3-week UX intensive course with 10 other students, with the aim to “digitally improve the public transportation system in Ho Chi Minh City". Each student, individually, was asked to go through the full UX cycle of discovering a problem with public transportation and coming up with a solution. This is how I built a prototype for a Facebook Messenger Chatbot called Bus Bot.
Challenges
To digitally improve the public transportation system in Ho Chi Minh City.
Design Process
- Discovery
- Solution
- Iteration
1️⃣ Public transportation info isn’t accessible
Convenience is a must
Over the weekend, I interviewed 4 adults between the ages of 25-28 in order to gather the information I needed. These adults spoke to me on a 1:1 user research where I had a pre-written script and voice recorded the interviews. Here are the high-level findings:
✅ Positives comments
- Interviewees regard convenience as a priority when it comes to transportation
- Interviewees use apps and websites daily and have experience in using digital travel products and/or services
- Interviewees commented that bus tickets in Saigon are very affordable
- The majority of interviewees prefer not to be amongst Saigon's traffic and pollution
❌ Negatives comments
- Interviewees regarded public transportation as outdated and dangerous.
- Walking and/or waiting for public transportation can be irritating due to the climate
- Two interviewees expressed that the public bus system does not cater to English speakers
- Two interviewees find the bus system confusing i.e. bus times, stops and fees
Finding relevant information in English is a big problem
Speaking to the locals
Created personas, empathy maps, and customer journey map to understand more about the user's problems.
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4966b044-c0c1-417d-9109-7bc301fe0a1d%2F01c083ec-777c-426b-b53f-86d52ab208a3%2FPersonas.png?id=07822ef9-2bb9-4f91-8963-15a95c1ac452&table=block)
Recommending a fully digital solution
- Develop a website that allows anyone to access travel information, plan their commute and search for the nearest stations.
- Develop a Chatbot that can tell users relevant information regarding public transport
- Develop an app that shows buses and their routes in real-time (on a map) with key indicators for bus stops.
2️⃣ Building a Chatbot for Public Transportation
How would this Chatbot work?
After deciding to build a Chatbot, I proceeded to do some rough sketches including the overall user flow - this is important as I wanted the conversational UI to perform the core function in the least few steps as possible:
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4966b044-c0c1-417d-9109-7bc301fe0a1d%2F2239dc9a-bef0-48d3-826f-5e3bfaf14df9%2FUntitled.png?id=09ae21ac-2241-463f-acc2-22104a2c00e9&table=block)
Paper prototypes to refine the design
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4966b044-c0c1-417d-9109-7bc301fe0a1d%2F238e79bc-287b-4095-8bc4-5702de15b02c%2FUntitled.png?id=bbf83c0f-cb68-42c5-98f9-175603b6814e&table=block)
With the first round of usability tests completed using the paper prototype, I moved on to creating refined wireframes & user flows with annotated wireframes.
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4966b044-c0c1-417d-9109-7bc301fe0a1d%2Fbdcd9a90-12e3-465a-8d84-2913310b9847%2FUntitled.png?id=483073b0-543b-43ef-9919-e08b000665a0&table=block)
Making the Chatbot more real
Conversational UI
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4966b044-c0c1-417d-9109-7bc301fe0a1d%2Faa24eb11-75c7-4049-a3f2-1bbd0d5d1af1%2FUntitled.png?id=4e82179f-3a4a-45b3-bb23-0d52e6a258f1&table=block)
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4966b044-c0c1-417d-9109-7bc301fe0a1d%2F2d09129b-fdee-4040-bf67-8b878362ebb3%2FUntitled.png?id=fbcd838a-61f5-4102-ad8b-4744d13ee401&table=block)
Conversation Flow & Loops
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4966b044-c0c1-417d-9109-7bc301fe0a1d%2F67d8d224-e7b4-492c-9a6c-396a7817477a%2FUntitled.png?id=b1c54521-c660-475f-a007-3b25a6bc0886&table=block)
Prototype was built to conduct a second round of usability testing
I built a clickable prototype, with Invision, using the above wireframes. The second round of usability testing was conducted. It was time to present to our class (of UX Academy) our proposed design solution to digitally improve the public transportation system in Ho Chi Minh City.
Ideas for the next iteration
Testing results
- Fixing usability issues
- Reduce steps to plan a route - currently 4 steps
- Display route and buses earlier to provide value sooner, try condensing bus and route information into one card
- Copy changes to avoid confusion, for example, edit trips, view details and reminder prompt
- Start with where you're travelling from - most users were confused as other travel applications often start with travelling from and then travelling to.
- One common feedback is how the UI display multiple buses on a single route - test understandability on cards displayed.
Iterations
Not enough time.
Pro’s and Con’s of this Chatbot
As a last step of the Academy, UXers are required to create a final presentation for the class about our solution.
👎 Limitations
There are limitations when it comes to building a Chatbot. Here I discuss why these solutions have their trade-offs:
- User needs to have a smartphone or device laptop with an internet connection otherwise this solution will not solve their travel needs
- Device screen size limits how much information we can show, so we decided to walk the user through a step-by-step process instead of giving them all the information at once.
- Using the Messenger platform provides a wide range of limitations (and value, discussed below), for example, limited interaction and animation to provide a delightful experience, limited opportunities for branding, and so on.
- The solution was designed for iOS 10 so it doesn't take into account older versions of iOS or Android thus limiting the number of users
- No advanced filtering options that some power users might be familiar with, especially with other travel apps on the market
- Chatbots are not the norm yet - even though 35,000 Chatbots have been developed on the Messenger platform it's not a familiar interface for a mass audience.
👍 Value
So why build a Bus Bot and not some other digital solution to solve the problem at hand? Hmmm...
- Chatbots are cool! We could leverage this new technology trend and possibly change the perception of the bus system into something positive, feedback that came up very often from our user research is transportation system is old and outdated.
- Messenger platform provides us with very thorough design and coding guidelines which could help us ship the MVP much faster than traditional development, thus costing us fewer resources. We don't need to reinvent the wheel here.
- Convenience is a huge factor when deciding whether or not to use public transportation. With over 11% (or a billion) of the population using Messenger, it's highly likely users won't need to download a new app and are familiar with the user interface creating less friction for product adoption.
- Mobile device usage has taken the world by storm! By leveraging existing user behaviour on their devices, we know that the majority of users only use 5 apps regularly on their smartphones.
Next Steps
Although the 3-week intensive course was over, I have plans to improve this design solution with the results from my usability tests by:
- Build all interactions
- Increase the fidelity of the prototype
The prototype was very limited and did not show the full range of the design solution thus requiring a lot of imagination from the user.
Making the experience feel more real. Most users eventually understood that this was the UI of Facebook's Messenger application, however, it would have been beneficial if they understood the context earlier to avoid confusion.