UB Smart Bus Redesign 2022 (a UX Case Study)

Almost half of the population in Ulaanbaatar use buses as their primary type of transportation. The age ranges from kids to elders, basically anyone.
UB Smart Bus is primarily used to see where certain buses are by the users. Although the app serves it’s main purpose on a decent level, there are some issues in regards to usability and bad development.
In this article I will go through the process of reimagining the app in a way that the existing users wouldn’t be confused or overwhelmed by new and complex functions (try to make them feel at home 🏠).

The issues I found are :
- Results don’t pop up unless you type in the specific route code of the bus. For example “Ч:23” or “Ч:63” (who remembers the route code of any bus, except the ones you don’t take daily).

- Sometimes the bus just suddenly disappears out of nowhere.
- You never know if a bus driver will take a lunch break or just any break once he’s finished their cycle/lap (don’t know the term). This causes people who are expecting the driver to do a U-turn to keep waiting without knowing the driver is on his break. This problem happens to people who live near the last stop of a route.
- Confusing user flow. There is no navbar but it only appears if you go to one of the 3 main functions in the home screen.

Research
The initial part of my research was taking a look at the app stores, android and IOS. And from what I’ve seen, some of the problems I’ve stated above have been happening to other users as well. The app rating was 3 on IOS App Store and 3.2 on android Play Store. Some of the feedbacks were:

From the given feedbacks, the solutions I came up with are:

Prototyping
Looking at the possible solutions, I started brainstorming and started drawing wireframes ✏️.

From the wireframes I developed a general idea of how the home screen should look like.
It should have 3 sections:
- My cards (bus cards)
- Recent (the buses the users took recently)
- Favorites

The reason for putting a “Recents” in the home screen is there is only 1–3 buses people take on a daily basis generally. So it would be convenient for it to be right there on the home screen without going into the “Favorites” screen every time you want to look something up unless you really have to. The user can simply open the app and click only once to get the information they need.

As for the “cards” section, users will be able to add their bus cards, name their cards, and an option to charge their card through an external payment app of the their choosing.

I differentiated the cards by color based on what kind they are (child, student, adult, elderly people).

Routes
When you go into a route, you can see where the buses are. This is the most used and important function of the app. And that is why I kept the base idea basically the same as it’s very risky to completely modify it to the extent that the users will be overwhelmed, confused and having to relearn it. Especially when there are senior, elderly people who uses this app too. “Equity design”, PEOPLE ! 👓

So I added some ideas upon it.

As it’s shown here, I added an indication which lets the users know how far the bus is from its next stop (percent wise or it could be a circle progress bar). Instead of keeping the users predicting and guessing, this gives the users an idea of how close the buses are from it’s next stop.

As it’s shown above, buses will have 3 states.
First: Normal.

Second (with the clock icon): When the driver is near his lunch break and will most likely take a lunch break when he finishes his lap/cycle. This lets the users know that they can wait a little longer before leaving their house especially when its literally -20C degrees outside no one wants to stand outside and wait for a bus out in the cold ❄️.

Third (with the exclamation mark): This indicates the bus or the bus driver is having an unexpected problem and will probably not pick up anyone until they fix their problem. This is to prevent the users from having false hope. Because personally I came across this problem numerous times when I’m waiting for a long period of time and when the bus finally shows up, turns out the bus driver is having some sort of trouble with their bus and doesn’t take anyone in and just moves on.

Another thing I added is the option to set a notification on a bus stop. So the app notifies the user when a bus arrives at the users selected bus stop. This will be very helpful to users because now they can easily time when they should leave, since they literally set an alarm⏰ for it using this function.

The favorites section will be a basic list of routes the users added and an option to add a route. You can long tap on one of them to have an option to remove it from your favorites. Nothing special.

Testing

I used the usability test template made by Google’s UX Design course (thanks google!). This template gives the participant 4 objectives to complete inside the app and keep track of the order of navigation of each participant, the comments they made whilst completing the objective. And lastly rate them from 1 to 3 based on how easily the participants completed their objectives (1 being very easily and 3 being very hard).

I did an unmoderated usability study on 3 different people from 3 different age groups. My younger sister, one of my best friends, and my mom (highschool student, college student, adult) because these were the only available test subjects I could access at the time 👓.

1️⃣ From the results I’ve got, I found out that the younger partcipant (highschool student) found the new UI, the option to name their own card (customizability) and the general style of the app very enjoyable and completed all 4 objectives without any obstacles.

2️⃣ The college student found the newly designed home screen more convenient and took a liking to the new notification function.

3️⃣ The adult completed the objectives a little slower than the others, however, she completed the objectives once I gave her some instructions and she didn’t find the new UI intimidating which is huge!
That led me to think that having an “In-App tutorial” when the users first download the app could be a possible solution to this problem.