Mo Bus App
Case Study
2023
UI/UX design, Mobile app
Timeline: This case study took about 3 weeks to complete
Tools used: Figma, Notion AI, Maze
Challenges:
As it was an unsolicited study, there was a lack of access to application analytics and technical feasibilities. One of the main reasons why people are unwilling to use their app is because of the complexity, so when making any design changes in this study, I needed to make sure that the interface was not complicated to use.
How can Mo bus enhance their mobile application to encourage more people to use their app?
Overview
Why Mo bus?
Mo bus was launched for iOS and android in 2018, a month after the launch of this service in the state of Odisha. At that time I was a university student and this was the first initiative by the government to introduce public transport in the state. This service proved to very essential for me as I was able to get a direct connectivity from my university to my home and didn't have to take uber or taxis and pay 5-6 times more.
The app has been downloaded more than 1 million times on Android itself but it only has 2.5 stars from 8000+ reviews. This possibly aims towards soime serios problems in the app.
Market research
I was in Germany for over a year where public transport is very convenient. I noticed how simple and accurate the information was on their app. Bus, U-bahn, S-bahn, e-bike, taxi, car rental, everything was beautifully integrated in one single app. In India, public transport isnt properly developed and there are just a couple of apps for it. Most of the apps are limited to booking tickets for buses, trains or hotels. I looked at some of the applications that can be compared with the Mo bus app.
Coming back to my hometown, I noticed that the UI of the app has not been updated since the past 5 years. I conducted some preliminary market research and discovered some interesting facts:
The service is only operational in urban areas especially 9 cities
A large number of their user base consists of students and young adults
Along with the bus service, bicycle service was also introduced. There is a separate app for unlocking them.
Interview
Based on my research, I found the following key insights. Most of the interviewees:
Don't feel like using the app often although they use the bus service
Didn't even know that it was possible to buy passes and tickets for their trip through the app
Feel that the app displays way too much information which gets confusing
Find it difficult to trrust the timings shown in the app
To help me better understand the needs, I created a narrative for my key persona Anil, who is a trainee engineer based in Bhubaneswar, Odisha, which is one of the earliest cities to use the Mo bus service.
User research
Based on the user research, I was able to confirm that many people rarely use the app for booking tickets or planning their routes. They mostly use it to check whether any buses are available near their stoppages that will go to their destination.
Therefore, the key challenege statement was:
How to re-design the Mo bus app to include the public bicycle and show relevant information to encourage more people to use their app?
Before creating a user journey map, I needed to know the reasons why people use the Mo bus app and what are the challenges they face when operating the app. Since the major inconvenience that people face is related to the journey planner and inaccurate tracking, the goal is to design a modern interface that would show the distance to the nearest stoppage and all the different modes of transportation needed from start to the end of their journey.
After I got a better understanding of the needs and pain points for my persona, I created a user journey map.
To help me design the app appropriately, the following insights were used as references:
Modern interface to include Mo cycle in the app
Adding live tracking in the map and real-time departures of buses
Easier access to tickets and passes
Re-design the journey planner to show later departures and add the feature to set as reminder
After gathering enough data from the suer journey map, I started mapping out a few user flows that would determine the main things needed for the users to accomplsh their goals.
User flow
In the first scenario, it is the first day of work at Anil's new office, so he woke up early and tool a look at the journey planner to reach his workplace on time. Here, he buys the physical ticketinside the bus.
I mapped out the flow with all the pages necessaryin the app and all the possible turning points for Anil to successfully reach his goal and accomplish his task.
In the second scenario, as Anil takes the same route to reach his workplace, he decides to buy a pass instead. Here, I wanted to make the process of purchasing tickets and passes easier and quicker through the app. My solution was to make the ticket purchasing menu easily accessible and to make the purchased tickets available even when offline.
Wireframing
Based on the user flow, I started building the wireframes to visually display the features that can be added to solve the challenge statement.
I made the interface cleaner and integrated Mo cycle in one single app. This would reduce redundancy and make operating the app much easier.
I also revamped the journey details page to show the exact routes with navigation, all the way from the user's doorstep to the end of the journey.
As per the user interview, people didn't like the planner as it was not functional as per user expectations and there were also issues with tracking the bus timings. Through the bus departure page, people can know the timings of their bus for up to 4 hours from the current time and they also have the option to add it as reminder.
As I integrated Mo cycle app in this app, I came up with this new interface that will be easier to interact with while riding without being distracting and will show the total price in real time. This would encourage more people to avail this service as they won't have to install another app and neither have to pay a deposit.
A new pass or ticket booking page and ticket details page with access to it directly from the route page.
Through this page, people can get an idea of all the passes available with a bit of description about them or purchase a single ticket for their current trip. As it can be accessed from the route page, the destinationa nd pick up address won't have to be entered, hence reducing any confusion and possible human error.
Prototype
Objectives of usability testing
After finalising the user flows and the wireframes, I started creating interactive, high-fidelity prototypes, adding all the appropriate features to the app. After building the prototype, I did an unmoderated usability test for 15 testers on Maze. Through the heatmaps, I got an idea of whether the features are integrated nicely into the app or not.
The objectives of this usability test were:
Determine the smooth integration of the new features
Determine how easy it is for the users to access the ticket booking interface
Determine how much people interact with the map with navigation enabled when follwoing their routes
Usability testing tasks
For the usability testing, I created a couple of tasks to get an idea on the placement of menu icons, accessibility and also about the feature that people use the most.
The tasks were:
You have opened the app and typed in your destination stop. Now, you're going through the different routes available and you want to check the details of the route that you prefer
After confirming the your route, you are ready to book your ticket for the trip and you are checking the various ways to access the ticket menu
I tried to add various small quality of life improvements to minimise the user inputs. For example, current location is automatically detected and only the destination address is needed to be entered to search for routes.
When booking tickets through the route details page, tapping on the 'ticket booking' option takes the user to the ticket page with the current location and destination automatically entered under the single trip option.
Results
Observations
After analysing the prototypes and usability testing results, I observed the following:
A large number of people were able to access the ticket and pass menu and found it easy to book tickets online
The map changes were positive and people were interacting with it to view their route in details visually
The live arrival and departure of buses with an approxiamte time to reach destination, saw a lot of interactions
I focused on updating the home screen interface, making it more user friendly, accessible and visually appealing. I also added Mo cycle booking option and surprisingly, a lot of people were interacting with the QR scan button and Mo cycle button.
Trying out new transport apps in new places helped me a lot to think and analyse about this case study and to find ways to improve it.
Thank you for checking this out. If you enjoyed it and liked my work or have some suggestions, please feel free to contact me.
When designing the new features, I tried to match with the current design element so that it still maintains the brand recognition and doesn't feel like a completely different app.