Role: UX Designer
Context: HSBC - Wealth & Personal Banking
Team size: Around 30 people, including PM, DA, Dev, BA, Copywriters, Legal, etc.
Overview
Awards
We received a notable award on Bonds Mobile.
2023 Digital Trading Platform - Excellence (Banking Securities sector) by Bloomberg Businessweek
Define Problem
Background
The Bonds journey in AMH is currently on a legacy platform that soon needs to be demised. As part of the migration, there are also customer and business pain points that need resolving.
1. Fixed Income Bonds is currently an undercaptured market with only a small amount of bond products offered online. The current browser is non-responsive web and Bonds are not offered on the everyday banking app today (Mobile X);
2. HK and Chinese governments allow customers from the mainland to bring funds into HK only on the mobile channel, so offering bonds on mobile is imperative.
3. Even for Bonds that are currently available for purchase online, we have anecdotal feedback that many customers are not aware that HSBC offers bonds.
4. For inexperienced investors, they want to increase their wealth but lack of bond knowledge.
Persona
Young Jade customers (50 years old and below)
• in a previous insights report, findings showed that younger customers were more inclined to purchase themselves,
• whereas older customers were more comfortable with working with an RM and letting the RM trade on their behalf.
Customer Pain Points
1. For Experienced customers, they cannot
• Easily identify ESG solutions and WMC solutions and specific bond features online.
• Easily track the bond price performance
2. Intermediate investors have curiosity about the bond market. It is important to present products with clear categorization & handy insight to catch their attention.
3. Beginner investors are not familiar with the Bond market and they want to be guided online via product selection / educational content search.
4. There have been customer voices about the number of Bond solutions available to Jade customers on the online platform, on which only mass (non-PI/ Jade) solutions are offered at the legacy platform.
5. There have been customer feedback that online limit order execution is not sufficiently timely.
Discover
Customer Journey
Clients now want user journeys that are efficient and deliver results quickly. Through understanding the needs and goals of our clients, we realised that they are looking for a fast and reliable digital experience that can allow them to retrieve key information seamlessly by reducing distractions from their workflows.
Project pipeline
To solve the pain points, we will release new bonds journey for browser and mobile respectively:
1. Revamp the web browser journey
Bond HK is seeking for a revamp of the existing bond web platform. The Browser development supports responsive design from Desktop to Tablet and mobile.
The enhanced bond buy and sell journey will bring us new opportunities as the new platform can widen our product offerings to meet the needs of more experienced Jade customers from Hong Kong and GBA.
2. Release native journey in MobileX
To elevate mobile experience in bond investment to meet the needs of GBA WMC customers
To leverage the existing Bond Browser journey, mobile app components to maintain consistency with other wealth products
To start with MVP approach to ensure the design scalable in future
Develop
Prototype
We came up with an initial concept by creating wireframes in a workflow to demonstrate how customers can explore and purchase bond products.
Usability Test
There was a third-party agency to help us and the business team conduct research for bond product propositions to see if the product strategies are valid or not.
After we gathered all the feedback, to come up with solutions, we reviewed and prioritized the current product features and potential features.
UT1: Product card
Group product information based on target users' needs. Highlight characteristics by using colored tags or big&bold fonts.
The entire bond customers care about product risk level, yield to maturity;
Meanwhile, experienced investors also like to know the price and coupon rate info at the first glance.
UT2: Filter
Setup the standard filter look:
The quick-select button not only provides a seamless experience, but also helps users indirectly understand terminologies by displaying the choices.
Put all action buttons together at the bottom, and gather all the tooltips top right in case amateurs and explorers may need to checkout.
UT3: Article
The better solution is to put articles under the Overview screen. Using different layouts to attract users' attention.
An illustration is recommended for short articles, along with big subtitles to easily read.
Time-related long article prefers to have an image. Key takeaways with bullet points on top will be really helpful.
The better solution is to put articles under the Overview screen. Using different layouts to attract users' attention.
An illustration is recommended for short articles, along with big subtitles to easily read.
Time-related long article prefers to have an image. Key takeaways with bullet points on top will be really helpful.
Design Solution
UX design
Entry point
Wealth Dashboard: Use 2 tabs to easily navigate between Wealth Dashboard and Bond, from My investments to My holdings, or Products and services to Overview.
Bond overview: Bond overview: List exploration ways based on target user type & business goals’ importance. Most customers have blur concepts about finding the right type of investment. So the design shows all collections above the fold can facilitate product discovery.
My holdings: List key numbers for users to make further decisions. Customers are now able to track their portfolio performance and compare the book cost against the current market value of all bonds holdings all at once on their mobile.
Bond overview: Bond overview: List exploration ways based on target user type & business goals’ importance. Most customers have blur concepts about finding the right type of investment. So the design shows all collections above the fold can facilitate product discovery.
My holdings: List key numbers for users to make further decisions. Customers are now able to track their portfolio performance and compare the book cost against the current market value of all bonds holdings all at once on their mobile.
Explore & Results
Explore all / Bond collections: The experienced and intermediate investors’ favorite way of finding products.
There are some common characters people all interested are highlighted on top. Meanwhile experienced users also want to see price and coupon rate are list below.
Keyword search: Target a small group of experienced investors who have already determined what they want to buy before opening the app.
There are some common characters people all interested are highlighted on top. Meanwhile experienced users also want to see price and coupon rate are list below.
Keyword search: Target a small group of experienced investors who have already determined what they want to buy before opening the app.
Product Details: A new performance chart is available, providing the day-end mid-price trend from 1 month to 1 year which enables customers to make more informed investment decisions. Using different methods to display product information can add to users' interest in purchasing.
Analysis
Product detail: Select your desired bond or CD and click on it. Index historical performance, asset allocation, fees & charges, offering documents and FAQ will be shown. Understand the product details and risks.
Calculator: Customers can access a new calculator, helping them to calculate the required purchase amount by inputting the desired nominal purchase value. Since Bonds & CDs are quite complicated investment products, this feature will help user to understand and make the purchase decision easier.
Purchase & Review
Buy or Sell Bonds / CDs: Customers need to fill in the order details and choose to place an order. Some information has already been prefilled to cut down the workflow process so that can increase the complete rate.
Review: Check again and confirm that all the details are correct. Make sure also read through and understand the offering documents, special terms and conditions as well as declarations. Finally, check the corresponding boxes and confirm the order.
Order Status: After the order confirmed, people can check the orders they’ve been made within 30 days on Order status screen. Order cancellation is available before order execution.
Review: Check again and confirm that all the details are correct. Make sure also read through and understand the offering documents, special terms and conditions as well as declarations. Finally, check the corresponding boxes and confirm the order.
Order Status: After the order confirmed, people can check the orders they’ve been made within 30 days on Order status screen. Order cancellation is available before order execution.
UI Design
Design SystemFor the component used on each screen, there are various methods and approaches in terms of the UI design in HSBC digital products.
Illustrations & Icons
We use illustrations to pictorially tell our brand story in engaging and entertaining ways. Each one should communicate specific messages or offerings through visuals with and intrigue.
Project Management
Create the confluence page for Bond Tribe, including background, information architecture, feature matrix, user research documents, universal prototype, etc.
So it helps other designers to understand this product. And also helps it scales up from HongKong to other global markets and Hang Seng Bank.
Outcomes
Expanding to different markets
Bond mobile becomes a scalable product for different markets.
Bond caused a massive impact by starting from HSBC HONGKONG,
expanding to other markets such as Malaysia, Indonesia, Taiwan, etc.
and also the subsidiary Heng Seng Bank.
Reflection
We are really happy that the research result gets better for the second time. Designers play a key role to gather feedback from users and improve the product.
It is also important to follow the design guidelines while creating new components cause that represent the HSBC brand.
