KMB App1933

Web DesignAdd-on new features for Bus App

Overview

Project Background

The Kowloon Motor Bus Company (1933) Limited (KMB) is a bus company operating franchised services in Hong Kong. It is the largest bus company in Hong Kong by fleet size and number of bus routes. As at October 2019, KMB operated 642routes in Kowloon and the New Territories, and operates cross-harbour tunnel routes. In 2016, KMB launch its own Mobile APP, APP1933, via Google Play and Apple’s Apps Store respectively.

KMB is a kind of utility APP, which got a lot of users installed after launched in 2016. It becomes popular because it well solves the problems of taking, waiting, searching a bus. However, there are few pain points users facing. It will be a big UX improvement for the app if the pain points can be solved.
‍
‍Pain points:
‍1. The traffic jam used to happen on the road, which may affect the arrival time ofthe bus. The users must use another app, Google Map, to check the traffic issue, then return to the KMB APP to decide which bus to take.
2. When the users would like to go to a new place, they used the Point-to-Point search function of the app. The information of the search result is primitive. The user interface is not user-friendly enough.

Problems & Objective

Research

As the project objective is to add new feature or modify the existing app, the app I chose, KMB APP1933, was designed for the people live in Hong Kong. In the research, I tried to know how the users think about the app, i.e., product image, user experience, and the frustrations, etc. On the hand, I compare the KMB App1933 with another bus app in Hong Kong, CityBus App. They are the direct competitors, focus on the same target group users.

In the research findings, I found that most of people use the app everyday to go to work. They use it for checking the bus arrival time. People use the Point-to-point search function and compare fare function when they plan to go to a new place.
However, they think the app interface is not professional enough, it is complicated for them to search the location of the destination place on the google map and return to the bus app to check what bus to take. They questioned, "Can the bus app include the google map search feature?" I think this is very good feature to think about and add to the existing app, which will definitely create values to the users.

Competitor Analysis

STRENGTHS

Branding and Marketing
• The brand KMB was introduced to people since 1933, it has a longer history
• The model of the buses has been keeping update, which is newer than competitor’s buses
• There is used to have marketing of its services

Function and Features
• Search a bus to shows the arrival time and fares
• Bookmark of the bus stop for quick access
• Membership system Instant customer support
• Notification of getting off the bus
• Point-to-Point, i.e. user can enter the destination and it will show what buses can take
• There is timetables, notices of the buses
• The loading speed of the app is fast

Style and Design
• The brand color red is simple and classic
• Bigger font size for all aged users
• The site map of the app is simple and straight forward
• The UI is basic

Branding and Marketing
• The brand City Bus was newer than KMB, which consist of two brand of bus, i.e., • New World and City Bus

Function and Features
• Search a bus to shows the arrival time and fares
• Bookmark of the bus stop for quick access
• Quick access of the special route to airport
Weather report
• Point-to-Point, i.e. user can enter the destination and it will show what buses can take
• There is timetables, notices of the buses

Style and Design
• The brand color purple is basic
• The site map of the app is simple and straight forward
• The UI is basic

WEAKNESSES

• Point-to-Point search is primitive and not user-friendly as google, e.g., there is not suggestion in the search result, it will ask the users to call customer hotline
• The instant traffic status used to affect the bus arrival time but it does not shown in the app.
• Notification function is too simple
The UI is not professional and user-friendly enough

• Point-to-Point search is primitive and not user-friendly as google, e.g., there is not suggestion in the search result, it will ask the users to call customer hotline • • The instant traffic status used to affect the bus arrival time but it does not shown in the app. No notification function
• The UI is not professional and user-friendly enoughThe loading speed of the app is very slowThe icon size is not consistent
• The font size is not big enough for elder usersThe layout structure is not user-friendly, e.g. the image size of the Ad is too big

Online Survey & Summary

There are totally 19 submissions, in which 73% of them using KMB App1933 everyday. Most of them use the app to search the bus when they go to work. The function Point-to-point search, comparing the fare are regularly used by the users.

I am not surprised the most people use the feature Search a bus but it is surprising that there are more people use the Point-to-point search and Street view feature because the design of these two features of the existing app are not user-friendly. However, the Online Survey , which I can improve it in the app modification.

User Interview (Face to face) & Summary

There are 4 interviews are conducted. The 4 interviewees are with different background and occupations.
The interviewees thinks the app is easy to use but the interface can be improved, e.g., increase the font size, retouch the user interface, etc. Some of the interviewees are not tech-savvy, they only use the simple function, e.g., Search a bus, Bookmark a bus. For other interviewees, they use the function of the Point-to-Point search. They used to check the status of the road traffics via Google Map as the KMB Bus App1933 does not have this function built-in.

The findings of the Face-to-face User Interview is quite helpful, there is an obvious need for the Point-to-point search feature and I can improve it. It is quite insightful for me to know people also looking for more information of the road traffics via the app. I think I can improve it in the app modification, too.

NEEDS

FRUSTRATIONS

MOTIVATIONS

• 3/4 interviewees use the Point-to-Point search if they go to a new place
• 2/4 interviewees use the function of Bookmark a bus
• 1/4 interviewees expect a simple a straight forward flow
• 1/4 interviewees want to know the status of road traffic
• 1/4 interviewees prefer the a big font size
‍

• 2/4 interviewees can obtain the most update information of the road traffic
• Compare and find out the most reasonable fare and bus routes
• Frictionless accessible user interface

• Most of interviewees think the user interface of the app is rough
• Users can not find any information of the road traffic via the app
• The fare of the bus route is too expensive
• 1/4 interviewees finds difficult to type on mobile device
• The bus arrival time is not accurate enough

Persona

Since the target group users of the bus App KMB1933 is all-aged, the challenge will be getting the elder and the less tech-savvy users to use the app frictionless. I have to think about this challenge when designing the new feature to the app. Therefore, a unique persona is created and defined as an elder lady, aged around 58. She is retired and is a housewife. She usually takes bus to the supermarket. She bookmarks a bus she used to take. She likes the bus app shows the bus arrival time which save her much time on waiting a bus.

Refine the Design Goals for next stage
According to the research data collected, I have refined the design goal for the next stage. I will add a new function to the Search Bus to enable users to check the status of the road traffic, to modify the Point-to-point search function by providing the information of required time and bus fare. I also also improve the accessibility of the general UI, e.g. font size, color palette and layout out structures

Interaction Design

Site Map

The structure of the existing App KMB1933 is simple and well defined. In the Site Map, there is a few proposed features added to it, i.e., bus arrival time, instant traffic status and Point-to-point search.

Define the Flows

In the Task Flow and User Flow, there are three scenarios added:
Scenario 1: Search a bus
- with an added feature of checking the status of the traffic
Scenario 2: Point-to-point search
- enhance the feature by providing information of required time and fare
Scenario 3: Setup notification of bus arrival time for regular users
- enhance the feature of active notification for the arrival time of a same bus

User Interface Design

Hi-Fi UI Design

This is the Hi-fidelity design layout. In general, I have increased the font size and its weight to make it larger and bold enough for elder users to read; the important information are indicated in blue color, e.g., the bus arrival time, .

In the existing app, the Point-to-point search button is not easy to find it. I have improved it in the new UI layout. The Search Bar(Input a route no.) and Point-to-point search button (search by map) are put on the top of the Search Route page which are easier for users to access.

For the Point-to-point search, the users can input "Your location" and "Your destination" to obtain the suggested buses and routes. There are the comparison of the total fares or travel time of the various suggested routes which is helpful reference to the users.

How can the app get the users to see the traffic status immediately? I have come up with a solution that it will indicate a part of the route line in red color which refer to there is a traffic issues. There are small annotations in red is added, e.g., road traffic: poor.

details

Prototype

I prepared prototype and setup two tasks for the Usability Test. The participants have to use the new feature and modified function to complete the tasks. It helps me to evaluate whether the new features are smooth enough. The first task requires the participant to search a bus and check the status of the road traffic on the prototype. The second task assumes the participant would like to go to a new place, he/she searches what buses to take to a new place by using the Point-to-point search function.

details

Usability Test

It is quite smooth for the participants to complete the tasks and they found that the new features are quite good. They also like the improved UI.

Report

OBJECTIVE
‍The objective is to test the newly added and modified features, check out whether they are user-friendly enough. On the other hand to collect the feedbacks in order to iterate the prototype before final delivery.
‍
‍PARTICIPANTS
‍Number of participants: 4
Age:25-60
‍
‍SUMMARY
‍There are 4 interviews are conducted. The 4 interviews are with different background and occupations.
Most of interviewees play with the newly added features, Search a bus and check the instant status of the road traffics. All of them find the function frictionless. They also try the Point-to-Point search, they can find the bus routes in an ease.

TEST DEBRIEF
•All participants click the icon of search on the footer bar
•All participants obtain the information of the road traffics
•All participants can find the button of Point-to-Point search
•All participants are able to filter the Fare in the search result by clicking the button, "The Lowest Fare"

Final Design

As I live in Hong Kong, I am also one of the target users of the bus app, KMB App1933. I like the app as it is helpful but there are many paint points I would like to raise a long time ago. I am glad that I can take this opportunity to collect the feedback from various users. The feedbacks are practical and insightful. Finally, I come up with the following two newly added or modified features.

Source images courtesy Pinterest. The images are not commercial purpose.

Want to get in touch?
Drop me a line!

I believe “One swallow doesn’t make a summer”, we have to make the summer together.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.