Hong Kong’s Bus App

Background

The colorful double decker buses of Hong Kong are almost as iconic to Hong Kong as its skyline. And having lived there for more than 10 years, I can safely say that these buses, and the vast system of public transport they symbolize, are as crucial to Hong Kong as the glass skyscrapers. However, the app that CITYBUS NWFB, the operator of most of Hong Kong’s buses, offers barely lives up to the reputation of the efficient public transport system of this busy city.

Currently, the app is the only source of information regarding the arrival time and how far away the bus is from a given bus stop, designed to allow users to gage a more accurate sense of not only the arrival time but the traffic situation.

The App

The application itself is easy to use, despite the interface being visually unappealing. The purple and yellow/orange colors reflect the colors echo the company’s logo, and users are presented with many options of route search based on the bus number, destination, previous searches etc.

The landing page shows several options designed to help users to get to their destination via bus

The Issues

However users are presented with the app’s drawbacks from the get-go. The many ads that are present at each step of use hinder usage and efficiency–speaking from personal experience, there have been instances where I would have been able to rush onto an incoming bus if I hadn’t mis-clicked on an ad. The abundance of ads is to the point where it suggests that the developers were on a very tight budget, and were relying on ads to keep the app running.

There are ads present at every step of the search process–one mis-click would lead to an automatic redirect to the app store or a video that does not allow you to close for at least 10 seconds.

What annoyed me more, however, were the poor affordances in this app. While the app appears to have minimal functionality, there were several added functions that I discovered during this assignment. The first function is the change directions option after clicking into one direction in the Route Number search. This is through clicking the arrows pointing to opposite directions, placed on the right of the selected direction. This is a useful function that increases efficiency of use, as one won’t have to go back and choose the opposite direction of the bus. However, this functionality is not immediately obvious as the icon lacks affordances that show that it can be clicked. Many other icons that can be clicked on have a rectangle with rounded corners, an affordance that helps indicate that it is a button.

Pressing on the arrows (indicated with red arrow) allows users to view the stops of the bus going the other way without having to go back to the previous step of the search process (example shown in following image)

Another function that is not immediately obvious is the press to alight function. Buses do not always stop at stations, therefore people must press the alight button placed on the railings within the bus before the desired stop. The CITYBUS app allows you to do this remotely by pressing the small round ‘push once’ button next to the desired stop, which is a great function in cases where the bus is crowded, and is a great accommodation for disabled people. However, this was a function I only discovered while spending an extended time on this app for this assignment–not once in the last few years of using the app did I notice or use this function. In retrospect, the alight button does show some level of affordance that are intended to remind the viewers of the function. The yellow bar one the left is indicative of the rails within the buses where then alight buttons are often placed on; however, the round icons with light grey ‘push once’ are not only hard to notice but do not resemble the alight buttons.

The alight button present in Hong Kong’s buses–when crowded, they are hard to get to.

The Solution

The app boasts a meager 3 stars one the Apple’s App Store based on over 9000 reviews and a considerable amount of negative reviews from disappointed and annoyed users. Other than technical issues such as speed and the inclusion of too many ads, the main issue I had with the application was due to the affordances — the poor consistency with the icons made it difficult for people to recognize certain functions that would aid efficiency of the app. This can be remedied with better affordances that would not only indicate the functions but also improve the learnability of the app.

Personally I found the switch directions function and stop bus function to be the best yet hidden features of the app. I would redesign icons to make these functions more obvious, as shown below:

For the switch directions app, simply adding a rectangular outline like the other press-able icons in the app would make it more noticeable.

For the alight function, redesigning the icon to more closely resemble the alight buttons found in the buses would be helpful (red color and rectangular shape), and so will more clear writing such as ‘PUSH TO STOP’. Highlighting the station chosen by the user would also help with memorability of the function.