Mobile App | Investment - Securities
Hong Kong
Background
Securities trading is one of the core investment product offered by Hang Seng Bank. However, the mobile app’s securities platform was running on a nearly 10-year-old legacy design.
Plagued by an outdated UI, high-friction user journeys, and a lack of modern features, the app was experiencing a steady decline in active users as frustrated customers migrated to competitor platforms.
The goal of this project was to revamp the securities experience to halt user churn and deliver a modern, competitive trading environment.
1
Modernize the overall UX and UI to deliver a seamless and intuitive journey
2
Identify and resolve key UX friction points to improve adoption and engagement
3
Revamp the interface to align with the bank’s latest digital design system.
Analysis of Current Design
We analysed the current design of the Securities services during Research stage. We would like to know what’s the problem with the current design. How can we do better
Key Problems:
UI and Info are too complex, hard to scan
Difficult to locate CTA on screen
Not support predictive search / keyword search function. User need to input the exact stock code to search
Too many datas need to be inputted by user manually in Stock Trading function
Competitor Analysis
Beside analysing the current design, we also completed a research on reviewing other stock trading platform’s design and flow. Here are some platforms that we reviewed.
Key Pros and Cons from Competitors:
Seamless experience from searching stock quote to trading
Highly scannable dashboard that allows users to quickly digest high-level portfolio data
Clean and intuitive interface in data-heavy sections, such as the Watchlist and My Portfolio
Certain UI components and layouts are poorly optimized for Chinese characters
Deeply buried portfolio performance metrics, requiring users to navigate through multiple steps to view historical returns
Users Interview
Goals :
6 existing Hang Seng Bank users
Participants :
6 existing Hang Seng Bank users
All participants felt the current app's performance lagged behind competing investment platforms
The main reason users stay with the app is the convenience of direct, seamless money transfers from their Hang Seng savings accounts.
Users primarily stick to the Trading feature because the interface makes it difficult to check their remaining free stock quotes.
A major pain point is the lack of search or auto-fill capabilities; users are forced to memorize and manually input exact stock codes and quantities.
1
Enhancing Discoverability & Navigation
Pain points:
The old design caused high frustration due to incomplete search functions and a lack of sticky CTAs, causing users to easily overlook core tools.
Needs:
Rebuild the search architecture and introduce persistent CTAs to keep vital features visible at all times.
2
Improving the Trading Flow
Pain points:
A disconnect between stock quote information and actual trading features led to a low usage rate across the platform.
Needs:
Seamlessly link market data to trading actions to empower users to place orders rapidly and efficiently.
3
User Onboarding & Guidance
Pain points:
Changing a complex financial app can cause confusion for legacy users.
Needs:
Provide intuitive, contextual guidance to smoothly onboard users onto the new features and revamped workflows.
Based on the process of Stock Searching, Stock Trading and Watchlist, we developed a simple user flow for a clearer picture of how users can achieve their needs and goals
Stock Searching & Detail Quote
Stock Trading
Stock Watchlist
To validate our redesign, we tested the new platform with 8 participants (a mix of current users and competitor users).
The redesign scored highly across the board, earning an 8/10 for the Trading section, a 7/10 for the Watchlist, and an 8/10 for Stock Quotes.
Participants were highly satisfied with the new Trading features and found the revised Stock Quote section intuitive and effective.
Testing reinforced that trading must be lightning-fast; any extra steps or delays cause frustration due to the fear of missing out on profits.
Some users struggled to understand the meaning behind certain icon buttons without text labels.
Participants indicated that the new Watchlist user flow required a slight learning curve to fully grasp.
Stock Searching
Stock Quote Landing, is an overview for users. Beside searching, users can view Stock Index, Quote Meter here.
In Stock Searching Page, users can search by stock number or name. Suggested results will be shown to help users find stock quickly. They can also see the latest news here.
Detail Quote
In Detail Quote, users can check the current Stock price, price’s changes, add stock to Watchlist, switch between Chargeable and Free quote. They can also Buy / Sell the stock directly.
Stock Trading
Stock Trading is one of the most important function and has the highest usage rate in Securities.
To reduce the time of placing an order. Information like stock code, action and price will be pre-filled if user access Trading from Detail Quote.
Beside pre-fill function. a series of Assistive Functions also designed for users to improve their trading experience.
Assistive Functions in Stock Trading
Assistive Functions like Select Stock, Get Quote, Check My Buying Power, etc. All these features were designed to help users get all info for their Trade order without leaving the journey.
Watchlist
In Watchlist, user can add their favourite stocks to the list for monitoring their price and changes. Users can also use the trade button to place an order in Stock Trading.
After we completed our final design, we developed a connection map with all the finalised design to show all the flows and scenarios. It helps us to make sure all the design and logic are correct, and it can also be a reference for all the project team members to review.
Stock Searching & Detail Quote
Stock Trading
Assistive Functions in Stock Trading
Watchlist
