Stock Trading experience Re-design

Redesigning the Stock Trading experience for the BOCHK app

Timeline

1 year (2025 - 2026)

My Role

Lead UX/UI Designer

Project Type

Mobile App (iOS/Android)

Introduction

The stock trading feature in the BOCHK app allows users to seamlessly trade a wide range of stocks, access real-time market data, view personalized watchlists, and track portfolio performance. It provides a secure, user-friendly interface with advanced tools for efficient investment management.

Final delivery - at a glance

Sell odd lots - legacy system handling
US stocks - fund transfer logic

My Role

I'm the lead product designer for this project. I collaborated with Business Analysts, Product Managers, and IT developers throughout this project.

Identifying Existing Problems

The Stock Trading experience was not well designed since the release in 2020. Here are the key problems

1. Improve poor eye scanning

Poor eye scanning interface increases cognitive load, causing users to spend more time locating information. It disrupts efficient navigation by hiding key elements or creating confusion with a cluttered layout. This leads to frustration, errors, and slower task completion, ultimately diminishing the overall user experience.

Eye-scanning principle, before & after

2. Improve number of clicks

Key interactions such as searching for a US stock is often convoluted and require multiple clicks from customers, result in slow task completion

Key interactions such as search, is incurring too many clicks

3. Improve organization of information

Key information are scattered throughout the application, that makes functions and information difficult to find. The navigation and overall IA needs to be redesigned.

Re-organization of information, before & after

4. Improve quote streaming

Quote streaming provides real-time price updates for stocks, displaying bid/ask prices, last trade, and volume. It ensures traders receive instant market data without manual refresh, enabling timely decisions based on live price movements and trends.

Re-organization of information, before & after

5. Enhanced U.S. Overnight Trading

U.S. stock overnight trading refers to buying and selling stocks outside regular market hours (9:30 AM to 4:00 PM ET), typically through after-hours (4:00 PM to 8:00 PM ET) or pre-market sessions (4:00 AM to 9:30 AM ET).

Final result

100+ finalised screens were delivered in the end. For bank projects, various stake holders including the platform owner, product managers, compliance, and IT have to agree on the solution. Excellent communication were maintained between these parties throughout the project.

Bug fixes

For a project of this scale, even though we have already fixed plenty of bugs before public release, there are bound to be minor bugs.

Post-launch optimization

This is a crucial next step for every UX improvement or product launch. With informed, actionable insights, we are able to design a better experience for our consumers.

Continue to design better experiences

To follow through our product roadmap and continue to stick to our design principles.