Case Study: Hong Kong Map App

born out of frustration for Hong Kong's lack of navigation software

The age of smartphones has transcended borders and globalized our everyday lives, but one application remains particularly divisive on best design practices. The navigation app.

Hong Kong’s vibrant daily life is supported by their incredibly extensive public transit system, granting residents the ability to move around the hilly and mountainous city.

For the average North American, the different types of buses alone is enough to make your head spin. On my first day in Hong Kong, I arrived to dinner an hour late after missing multiple buses. Vowing to equip myself with a suitable navigation app for the rest of my four months here, I asked some locals which app they prefer and received… five different answers.

Just a 15-minute bullet train away, in Shenzhen, China, even small children can conveniently breeze through all tasks required in their daily life with just one app, Wechat. A common saying is, “Mobile in the US is a dessert. In China it is the main course.”

In a culture dominated by super-apps, why doesn't there exist a one-stop shop for navigating across the city of Hong Kong?

🇭🇰 Why Hong Kong (HK)?

Over 90% of daily journeys happen using public transit, and 99.9% of MTR (metro) rides are on-time. The infrastructure is undeniably incredible, and I couldn’t help but notice that our smartphones were frustratingly the weakest link, the essential connection between people and transport technology.

Public transit in Hong Kong is divided into MTR, Franchised Busses (CityBus, KMB, Long Win, New Lantao), Minibuses (Green, Red), Trams, and Ferries. You can also taxi, Uber, or walk on one of the many covered escalators around the island. 

Why are current apps on the market insufficient?

Google/Apple Maps

✅ The ol’ familiar. Does the job.


Inaccuracy of station maps and bus times.

Government Apps

✅ Accurate and exclusive timetables.

❌ Zero route-planning flows. Separate apps for each region.

Third-party Hong Kong apps

✅ Accurate route-planning.


❌ Lackluster UX and cluttered UI, almost unusable.

Other apps with HK coverage

✅ Good software design.


❌ Feature-poor, lacking a lot of planning capabilities.

The issue with current apps is the unequal dispersion of relevant features across multiple platforms.

Most locals get around with a combination of Google Maps and one or two regional Government Apps, or general knowledge supplementing the poor UX of a third-party Hong Kong-based app.

So, Hong Kongers can’t agree on an app, but what do their preferences tell us about their needs?

There are too many route options to choose from:
They need an organized to compare all the different transit options and fare differences

They need real-time information fast and accessible:
Most commuters plan on the fly - with transit so frequent, they’re often searching a route while walking to the station, and need to see the departing buses.

Directions are almost useless without levels/topology:
Hong Kong is a city built on slopes. Roads run on top of each other, bus stops are hidden in mountain sides, and we all wish humans could climb vertically.

Final design

Many commuters hustle around the city with a bag in hand, holding a handrail, or opening doors. The whole app was designed to be operable with one hand, and careful placement of buttons within thumb-radius was selected.

1. Landing Page 🏠

Users land on an application that is visually map-centric.

With the map as the lowest elevation on the app and a single pull-up drawer at the bottom, the simplicity highlights the app's commitment to easy functionality.

Each spot of the landing page drawer was carefully selected. The search bar is omniscent, and users can search for destinations, bus routes, or stations.

Next, the pinned locations allow for fast one-click access to get home after a long day.

Underneath, the app selects the nearest station to your location and lists departing transit.
Filters for buses, MTR trains, minibuses, trams, and ferries allow you to narrow your search and get a holistic view of the nearest transit schedule.

2. Route Planning 📍

The flow for route-planning is intuitive and familiar to users migrating from other apps.

By searching for a location or selecting it on the map, a concise info drawer pops up. Selecting directions from here brings up an accurate and visually clean list of options, complete with travel time, arrival time, estimated fare, and walking directions.

Notably, this screen promotes the use of public transit and greener options above driving, and has a tab for hailing a taxi.

Users can hit the "Live View" feature to get an AR navigation experience that works through their phone camera. This is helpful for navigating elevation and different levels of a building.

3. Bus Routes and Timetables 🚌

Currently, only government-owned apps such as Citybus and MTRmobile provide accurate bus timetables. Each region requires the user to download a different app, and none are unified with a route-planning flow.

In this navigation super-app, searching for a bus timetable, map of stops, and estimated fare has never been easier. With 200+ bus lines, users can ensure more time is spent on the bus than waiting for it.

3. Station Information and Directions 🚏

A counterpart to the ability to search routes is the search station feature.

Users would primarily use this flow to look at the departing trains or buses upon arrival, or to receive detailed instructions on how to walk to the station.

All of these features combine to create a clean, efficient transit "super-app". Retaining many of the tried-and-true features of Google and Apple maps and pulling from readily available APIs for accurate real-time bus/metro scheduling, this app packages it all in a visually intuitive and functional application.

After all, apps are supposed to enhance our outdoor experience, not hinder it. No one loves starting at their mobile phone screen while navigating a new city, and it can quickly turn into stressful cognitive overload.