![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 3.106 L 3.123 0 L 20.135 16.926 C 20.409 17.197 20.626 17.519 20.775 17.875 C 20.924 18.23 21 18.611 21 18.996 C 21 19.38 20.924 19.761 20.775 20.117 C 20.626 20.472 20.409 20.794 20.135 21.066 L 3.123 38 L 0.003 34.895 L 15.969 19 Z" fill="rgb(49, 49, 49)" height="38px" id="s7PhIa9un" transform="translate(30.212 21.908)" width="21px"/></svg>)
HKeMobility: Rebuilding Trust
in Public Transit
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 25.714 L 0 34.286 L 51.75 34.286 L 51.75 42.857 L 60.375 42.857 L 60.375 34.286 L 69 34.286 L 69 25.714 L 60.375 25.714 L 60.375 17.143 L 51.75 17.143 L 51.75 25.714 Z M 43.126 8.572 L 51.751 8.572 L 51.751 17.143 L 43.125 17.143 L 43.125 8.572 Z M 43.126 8.572 L 34.5 8.572 L 34.5 0 L 43.126 0 Z M 43.126 51.428 L 51.751 51.428 L 51.751 42.857 L 43.125 42.857 L 43.125 51.428 Z M 43.126 51.428 L 34.5 51.428 L 34.5 60 L 43.126 60 Z" fill="rgb(255, 255, 255)" height="59.99999755566683px" id="MM6SLOagw" transform="translate(7 11) rotate(90 34.5 30)" width="69px"/></svg>)
Client
HKeMobility
Role
Product Designer
Timeline
1 Week (Deep Dive)
HKeMobility is the official government transport app, but it suffers from a 2.1-star rating due to confusing navigation and unreliable data. In a 1-week design sprint, I diagnosed the root cause: users didn't just hate the UI, they didn't trust it. I redesigned the core navigation flow to prioritize transparency and scannability. The result is a modernized interface that reduces decision fatigue and introduces "Trust Signals" to restore user confidence.
Context
The "Ghost Bus" Crisis. An official app that citizens are afraid to rely on.
HKeMobility is supposed to be Hong Kong's all-in-one transport planner. But with a rating of 2.1 stars, it was failing its users. My audit revealed a "Money Pit" of issues: cluttered interfaces, outdated visuals, and inconsistent icons. But the biggest issue wasn't aesthetic—it was functional. Users were walking to bus stops to check times manually because they couldn't rely on the app.
▲ Initial market analysis
▲ User's comments from app store
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 25.714 L 0 34.286 L 51.75 34.286 L 51.75 42.857 L 60.375 42.857 L 60.375 34.286 L 69 34.286 L 69 25.714 L 60.375 25.714 L 60.375 17.143 L 51.75 17.143 L 51.75 25.714 Z M 43.126 8.572 L 51.751 8.572 L 51.751 17.143 L 43.125 17.143 L 43.125 8.572 Z M 43.126 8.572 L 34.5 8.572 L 34.5 0 L 43.126 0 Z M 43.126 51.428 L 51.751 51.428 L 51.751 42.857 L 43.125 42.857 L 43.125 51.428 Z M 43.126 51.428 L 34.5 51.428 L 34.5 60 L 43.126 60 Z" fill="rgb(255, 255, 255)" height="59.99999755566683px" id="gXFm8DZHv" transform="translate(7 11)" width="69px"/></svg>)
Problem
Cognitive Overload & Broken Trust. The interface was fighting the user.
Through an audit of app store reviews and guerilla interviews with locals, I identified three critical friction points:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 82 82 L 0 82 L 0 0 L 82 0 Z M 35.306 68.334 L 44.417 68.334 L 44.417 36.445 L 35.306 36.445 Z M 34.167 22.778 C 34.167 26.058 36.609 28.464 39.861 28.464 C 43.114 28.464 45.556 26.058 45.556 22.851 C 45.556 19.498 43.187 17.092 39.861 17.092 C 36.609 17.092 34.167 19.498 34.167 22.778 Z" fill="rgb(0, 0, 0)" height="82px" id="D3F9kcYvK" width="82px"/></svg>)
The "Split-Screen" Trap
The home screen forced a 50/50 split between a map and a list, burying the primary goal (finding a route) beneath secondary tools
Information Overload
Route results were displayed as dense text blocks with no visual hierarchy, making it impossible to scan quickly.
The Credibility Gap
The app often showed "ghost data"—delayed times without warning. As one user put it: "It doesn't tell me if I'm on the right track".
▲ Key frictions in navigation flow
Research Question
Strategy & Exploration
Prioritizing the "Big Bets" We can't fix everything in a week. So we fixed what matters.
Using an Impact-Effort Matrix, I prioritized features that would rebuild trust without requiring a complete backend overhaul.
The Inisght?Users don't need "more features."
They need Transparency
▲ Impact-Effort Matrix analysis
The Pivot:
Solution
Turning simplicity into engagement. From Search to Route in One Seamless Flow
The updated HKeMobility design improves engagement by applying Nielsen Norman’s usability principles to make the experience clear and trustworthy.
▲ The updated user flow
01
Search & Discover
02
View & Select
03
Confirm & Go
04
Credibility Update
Heuristic Impact
Turning Simplicity into Engagement
Applying Nielsen Norman’s heuristics, the redesign aims to restores trust by minimizing cognitive load. Real-time updates ensure Visibility of System Status, while intuitive layouts prioritize Recognition over Recall. This transforms a confusing interface into a transparent, frictionless tool that users can reliably adopt.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 47.04 0 L 1.96 0 C 0.878 0 0 0.878 0 1.96 L 0 47.04 C 0 48.122 0.878 49 1.96 49 L 47.04 49 C 48.122 49 49 48.122 49 47.04 L 49 1.96 C 49 0.878 48.122 0 47.04 0 Z M 14.535 41.756 L 7.264 41.756 L 7.264 18.369 L 14.535 18.369 Z M 10.898 15.17 C 8.57 15.17 6.684 13.284 6.684 10.956 C 6.684 8.629 8.57 6.742 10.898 6.742 C 13.225 6.742 15.112 8.629 15.112 10.956 C 15.112 13.284 13.225 15.17 10.898 15.17 Z M 41.748 41.756 L 34.484 41.756 L 34.484 30.38 C 34.484 27.667 34.437 24.182 30.705 24.182 C 26.926 24.182 26.346 27.134 26.346 30.184 L 26.346 41.756 L 19.09 41.756 L 19.09 18.369 L 26.06 18.369 L 26.06 21.568 L 26.158 21.568 C 27.126 19.725 29.498 17.785 33.038 17.785 C 40.4 17.785 41.756 22.63 41.756 28.93 L 41.756 41.756 Z" fill="rgb(0, 0, 0)" height="49px" id="LIGo47a1Z" transform="translate(17 17)" width="49px"/></svg>)