top of page
BLOG
ABOUT
WORK
モバイルアプリ・2023

MO BUS APP

ROLE :
UX・UI
DURATION :
2 MONTHS
TOOLS USED :
FIGMA, NOTION, MAZE

Mo bus was launched for iOS and android in 2018, a month after the launch of this service in the state of Odisha. This was the first initiative by the government to introduce public transport in the state and it proved to be an essential part in the day-to-day life of the people to get a direct connectivity to any place in the state.

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.

GOALS

The goal of this case study was to know the exact reasons behind the low app store ratings and find out ways to enhance Mo bus mobile application and increase user approval rating

PROBLEM STATEMENT

Mo Bus app has been downloaded more than 1 million times on Android itself however it has 2.5 stars from 8000+ reviews in Google play store.
The app was also removed from Apple app store recently.
While being one of the best services in the city, the mobile app which provides route information and booking service has not been popular among the users. This possibly aims towards some serious problems within the app.

Current Mo Bus application design

MARKET RESEARCH

I was in Germany for over a year where public transport was very convenient. I noticed how simple and accurate the information was on their public transport app.
Bus, U-bahn, S-bahn, e-bike, taxi, car rentals, everything was beautifully integrated in one single app.
In India, public transport isn't 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.

Analysis of Chalo and Jelbi in tabular format

I researched on a few mobile apps which included one direct competitor and one indirect competitors.

After conducting a preliminary market research, the following facts were discovered:

  • The service was only operational in urban areas especially 9 cities

  • A large number of their user base consisted of students and young adults

  • Along with the bus service, bicycle service was also introduced but there was a separate app for unlocking and using them

USER RESEARCH

I conducted phone interviews with 5 people who have used the Mo bus service. Every participant was asked the same set of questions and their responses were documented. Based on my research,  the following key insights were found. Most of the interviewees:

  • Didn't feel like using the app often although they used the bus service

  • Didn't even know that it was possible to buy passes and tickets for their trip through the app

  • Felt that the app displayed way too much information which made it confusing

  • Found it difficult to trust the timings displayed in the app

Phone interviews with 5 participants to know the actual problems with the application

To help me better understand the needs, I created two user personas and provided narratives to each of them. Emmanuel, who is a business major university student and Isha, who is a trainee engineer based in Bhubaneswar, Odisha.

First user persona
Second User persona

USER JOURNEY MAP

Based on the user research, I was able to confirm that many people rarely used the app for booking tickets or planning their routes. They mostly used it to check whether any buses were available near their stoppages that would go to their destination or not.


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 used the Mo bus app and what were the challenges they faced when operating the app.
Since the major inconvenience that people faced was related to the journey planner and inaccurate tracking, the goal was 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.

User journey map for one of our personas

To help me design the app appropriately, the following insights from the user journey map 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 adding a feature to set the timing as reminder


After gathering enough data from the user journey map, I mapped out a few user flows that would determine the main things needed for the users to accomplsh their goals.

User flow for the second task
User flow for the first task

USER FLOW

Two user flows were created following two separate scenarios.

In the first scenario, it is the first day of work at Isha's new office, so she woke up early and takes a look at the journey planner to reach her workplace on time. Once she is inside the bus, she buys the physical ticket.
I mapped out the flow with all the pages necessaryin the app and all the possible turning points for Isha to successfully reach her goal and accomplish her task.

In the second scenario, as Emmanuel 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.

Here, I wanted to integrate bicycle booking app into this one app. So, I thought of an interface that would fit together with the Mo Bus app.

Sketches for cycle booking flow
Sketches of different pages of Mo Bus application

SKETCHING

One of the most frequent complaints that users had as per the user interview was over-complicated interface with too much unnecessary information.

So, I created few sketches using FigJam to come up with some quick design ideas while keeping in mind the user needs.

DIGITAL WIREFRAMES AND USABILITY TEST

Based on the sketches, I started building digital wireframes to refine the frames and properly display the features that could help us solve the challenge statement.
I started with re-designing the home interface and integrating bicycle booking in one single app. This idea behind it was to reduce redundancy and make operating the app much easier.
I also revamped the journey details page to show the exact routes available to the user, all the way from their doorstep to the end of the journey.

Digital wireframes for Mo bus application with Mo bike integrated

As per the user interview, users didn't enjoy using the planner as it was not functional as expected. There were also issues with tracking the bus timings.
While designing the departure page, I wanted the users to be able to know the timings of their bus for up to 4 hours from the current time and to also have the option of adding it as a reminder.

Unlocking and reserving bicycle within the app was also integrated into one app. I came up with a new interface that would make interacting with the app easier while riding without being distracting. I also added a new feature that would 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 which is currently needed to use the bicycles.

Before building mockups, I conducted a short usability test with a couple of participants to check the user flow and how easy it was for users to go from one page to another.
Maze app was used for this purpose. Each user were given some tasks to follow in order to complete the usability test.

Iterated digital wireframes after usability study
Mockups of the mobile application
Updates designs with added ui elements in mockups

MOCKUPS

After observing the results from the usability test, I started working on the mockups.
I maintained the brand identity by using the exact same color palette and fonts as the original app.

I made changes to improve the app's overall look and feel. One of the prominents changes made was with the navigation bar.

I also maintained a consistent look across pages by adding a uniform back button.

HIGH FIDELITY PROTOTYPES

Various small quality of life improvements were added to minimize 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

Complete flow of the prototype
Prototype of Mo Bus application on iPhone 15 Pro Max
Prototype images of Mo Bus app on iPhone 15 pro max

FINAL TESTING

A final test was conducted to make sure everything was working perfectly and satisfied the needs of the users. This was an unmoderated test for 15 users on Maze. The heatmaps provided a clear view of how users were interacting with the pages and how much time was it taking for them in a single page.

This test had a few objectives:

  • To determine the smooth integration of the new features

  • To determine how easy it was for users to access the ticket booking interface

  • To determine how much people interacted with the in-built map with navigation enabled when follwoing their routes


I created a couple of tasks to get an idea on the placement of menu icons, accessibility and also about the features that people used 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 your route, you are ready to book your ticket for the trip and you are checking the various ways to access the ticket menu

After analysing the prototypes and test results, I observed the following:

  • A large number of people were able to access the ticket and pass menu and found it easier 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


Trying out new transport apps in new places helped me a lot to think and analyze about this case study and 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 and provide your feedbacks! 

View My Other Cases

ありがとう

Meet The Amazing Team

Case study image list
TO TOP
Mo Bus App
bottom of page