Redesigning the UB Smart Bus app — UX case study

UB Smart Bus has been the sole public transportation application for Ulaanbaatar citizens since its release in January 2016. Although I was a fan of the idea of the product when it was first announced, the reality hit when I first opened the app.

While it was definitely useful, it took some time to learn and get used to the functions. And I was not the only one who thought that, according to its rating on App Store.

App Store rating of UB Smart Bus application

But interestingly, its rating on the Play Store on the other hand looks much different.

Play Store rating of the app.

Something must be working right, despite my bad experiences with it. So I decided to go through the reviews to see what makes this app so useful and what made them give the ratings they gave.

Translation: “New update is good. App tells when the bus is coming accurately.”

Although the app contains useful information, according to the reviews, it fails to present its contents in a way that is easily understandable by users.

My mother once even called me to ask where the bus she needed to use was, even though she already had the app. So there clearly is a problem regarding its usability.

Understanding the problem

During my last semester I took a class “Ergonomics”, and we were tasked to create an usability assessment plan for the product of our choosing, and I chose UB Smart Bus. Goals of the plan were to assess different parts of the app:

  1. Internal navigation
  2. Reachability
  3. Visual cues

I interviewed 3 people as part of the assessment. The interviews were simple: I gave them 3 tasks that I assumed was the most common usage scenario and see how long it takes to carry out those tasks. The tasks were:

  1. Present the participants two separate locations and find a route between them
  2. Give the participants a location and find bus lines that go through the area
  3. Give the participants a bus line and find the nearest bus to them

As they were all new users to the app, it took them some time to figure out those tasks, as expected. And for some of them, this was not a particularly pleasant experience, as they were seen frustrated when they couldn’t complete some of the tasks.

Goals

My main goal of this study and redesign will be making the user think less. This is a public transport application after all, they should just be able to get to Point A from Point B.

I will try my best to keep this redesign to the app’s current capabilities, but I will admit to adding two achievable new features without going over the top (but you should be the judge of that).

Pain points

  1. The search function is the weakest link of the app. It does not support suggestions while typing, and you have to know the numbers of the bus lines to get any results while searching.
  2. Lack of context for information and buttons. For example, when you search for a specific bus stops, it shows which bus lines stop there and how far they are. Our interviewees pointed out that it took them some time to realize the numbers beside the line names were actually how far they were.
  3. It is necessary to have prior knowledge about the whereabouts of Ulaanbaatar to be able to use this application. Unlike other public transport apps, it relies heavily on user’s pre-existent information about routes.

Suggested solution

The first problem that had to be resolved was in-app navigation. After I made a drawing of the current wireframe, it became easier to understand which part was useful, and which part was not.

Current app navigation.

Eliminating “User forum” and “User center” were the first choice I made regarding the redesign, as they served no purpose being separate functions here. Their functionality clearly works better on their App Store and Play Store page, as the creators of the app reply to reviews quote often.

After that, I had to decide which information was the most important and useful. The answer was obvious though, it was our Favorited lines and stops, and when the next bus is coming to the nearest bus stop.

Suggested initial app navigation.

And one of the things I have noticed while observing the users was the app’s reachability. Below is a natural reachability map on normal sized smartphones.

And here is the app layout overlayed on top of it. You can see (well, not really) on the right picture, the navigation menu is completely out of reach with normal hand usage. And on every page of the app, there is an ad space at the most usable area, and that definitely had to go.

Updated design

Since I am redesigning the app, I thought I might as well change the logo, and came up with a new icon.

Before and After
App interface. Before and After.
Initial wireframe ideas.
Low fidelity prototype

On the top of the homepage, I included the information about the “Nearest bus stop” and “Nearest charging station”. If you are not familiar, Ulaanbaatar’s public transport requires a pre-charged card to use, and you can only charge it at specific places. Although the current app includes the location of those places, reviews indicated that further information was needed on the map, so I included their schedule and whether they were open at the time.

Nearest bus stop and Nearest charging station information.

Below these two would be the Favorite/Pinned section. It’s hard to translate that to Mongolian, so I left the wording as it was, which literally says “Easy use”. In this part, there would be three types of pages that could be pinned: Bus line, Bus stop, and Charging station.

It was important to reorganize bus names, as it was somewhat confusing in the previous version. Not only shortening the bus names to its last stop makes it more simple to look at, but it gives the users information about which direction the line is going immediately.

The feature I added here was visualizing the route of the bus line. Users should be able to not only see where they are, but see where they can go with the simplest click of a button, and not think too hard.

It was important that there be micro-interactions and animations when toggling between pages, as users made complaints about lack of feedback when pressing buttons.

The next feature I added was to visualize every line that goes through specific stops and choose from there. In the example shown below, if the user wants to go “Зүүн дөрвөн зам” stop, they can simply see every line that goes there and choose the one that is nearest to them, which in this case was Line Ч:40 Улаанхуаран.

The next part is Search. This was probably the section that was changed the most. I placed the search button at the bottom, specifically the middle, because the users were shown using this feature the most. Instead of dividing the search of lines and stops, I placed them in one place and included filters instead.

One of the most requested features on the reviews was the capability to search lines with their names, not just with numbers, as most Ulaanbaatar citizens are familiar with the names of the buses.

Also, you may have noticed, if you are a prior user of the app, that I combined the bus stops. Previously on search results, if you search for a bus stop, it showed stops in different directions separately. Now if you search for “Зүүн дөрвөн зам”, there won’t three different results, just one.

With the help of reorganization of bus naming, I am expecting there to be less confusion.

Search and filter functions.

One of the things I had on my mind since the start was giving each button and information a context. No user should be confused about what that button might do.

Though I am not the biggest fan of hamburger menus, this was needed in this context. As only setting that could actually be changed was the language option, which did not need to be a separate page.

Instead, I tried to focus on making the how-to-use part more convenient for the users, so that even tourists or people from different parts of the country could understand it easily. I included illustrations to give each information more context (which I made them by myself, so if you want custom illustration, hit me up).

Conclusion

This was my first attempt at UX case study and redesign, so there probably is a lot of things I should have done differently. I probably should have interviewed and tested the prototypes with more people, but I am pretty happy with the results.

As this was an unsolicited redesign, I made some assumptions about the possible new features that may make the developers shake their heads (but hey, at least that would mean they saw it, yay!).

As the city grows and more and more people get stuck in traffic, public transport is one of the most obvious solutions. And we need and deserve better experience navigating through it.

Thanks for reading until the end! Hope you enjoyed this. If you have any feedback, I would love to hear that.

Check out my other stuff at behance.net/byturbold and instagram.com/justtorothings.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store