![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/345447a4-7fe0-4539-bf5d-4aaf8e2dd9f6_rw_1920.png?h=55c2fe1c1f371902d5285ff88cca3fcb)
Role: UXUI Designer
Context: HSBC - Wealth & Personal Banking
Overview
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/85e7d7e9-aad8-4244-bc99-67c0685b79a6_rw_1920.png?h=a6f3a5b0958454488feb15929b6de8a7)
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.
2. Even for Bonds that are currently available for purchase online, we have anecdotal feedback that many customers are not aware that HSBC offers bonds.
3. For inexperienced investors, they want to increase their wealth but lack of bond knowledge.
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.
2. Even for Bonds that are currently available for purchase online, we have anecdotal feedback that many customers are not aware that HSBC offers bonds.
3. For inexperienced investors, they want to increase their wealth but lack of bond knowledge.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/8ae65fd1-673b-464a-aecc-232c6444209a_rw_600.png?h=30897f0c7bc02f7536a20d0e2f12a87e)
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.
• 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.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/a5904f9c-b309-4cb3-856e-b34fa4c9e657_rw_600.png?h=07062b48b84b534d8c6562ac58c82827)
User Goal: Complexity
Bond trading can be complex. Investors may struggle to navigate the various types of bonds available, understand their features and risks, and determine the best time to buy or sell a bond. Online platforms can help to simplify the process, but they must be user-friendly and offer adequate resources.
Need Features:
- Accurate search
- Compare Products
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/fa621951-49f1-4b67-a355-778e4c993859_rw_600.png?h=ba26905081b3f6f83b3125f36d44831e)
User Goal: Support
38% of investors have knowledge but no experience on bonds. For those in this segment that are looking for low-risk products, this segments represents opportunity as well.
Need Features:
- Product Collection
- Market Insight
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/f6a3812d-ef72-4599-b2b9-23b37b825d8d_rw_600.png?h=c08d217bb1f3b8dd43f6dd636ddd8684)
User Goal: Education
For beginner investors, they want to increase their wealth but lack of bond knowledge. There are many new investment customer (i.e. customers who have just opened an investment account with us in AMH) that are not familiar with bonds. From the online investment account opening journey, 40% of customers report they have no knowledge and experience about bonds.
Need Features:
- Guided Search
- Calculator
Discover
User Journey Map
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.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/9900de8e-a138-43e9-92b1-2efa100df023_rw_1200.png?h=343109522e75eaa04945f305deda634d)
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/b91e31b0-8b67-4244-bf7c-303a392db1fb_rw_1200.png?h=36d5b3ab888c6d3f0114e47086ab62d0)
Brainstorming
After we gathered all the feedback, to come up with solutions, we used the MoSCoW method (displayed below) to review and prioritize the current product features and potential features, and we saw an opportunity to improve the MVP with new elements.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/fd16232a-241a-4cb3-961c-0c2ec5e9c174_rw_1920.png?h=d581d6a51cff553483796075a8415a95)
Service Blueprint
Whether you are an amateur or experienced investor, HSBC Online Bond Trading Platform is here to help you find bonds according to your investment needs.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/4ae06a79-73a7-4d8a-b02c-c1be5ae87f5e_rw_3840.png?h=065d67b4953b0da6269ac6d01abfb352)
Develop
Structure
Its intuitive navigation, consistent templates, and clear visual hierarchy made it robust and adaptable. The key to its versatility was modular design: each page had flexible building blocks that, when combined, offered a coherent and efficient content flow.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/fdc22a25-401d-472f-ae40-9d50c8ec47da_rw_1200.png?h=e80a5d9ccd062a87e36f67825462d1f4)
Modular
Interactive tools were integrated to guide customers in financial decisions. To maintain the system's principles, the team provided a UI library & styleguide, ensuring HSBC’s digital experience remains consistent and continually evolves.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/fbf8a59b-eb4d-447c-811a-37089254c0f9_rw_1200.png?h=60edceea0a568e47e8ac0ffd7a87c0bc)
Wireframe
For wireframe, we designed following user behavior, including the pages users interact with, the navigation patterns, and the perception of the information provided. We aimed to understand if the order and depth of information presented adequately supported their decision-making process.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/4b88adcc-2eec-4a6d-9645-f3a64fd04842_rw_1920.png?h=7f3b7e1e86b6f85e67c1f9c6e180f467)
Design Solution
Translate business requirements into the ideation and led end-to-end design.
Collaborate with DEVs, PM, DA, and other stakeholders to achieve business goals.
Keep improving design best practices from framework to final interfaces and drive adoption across teams.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/d2add5fd-0d3b-4556-b3bf-a4a89a2f4ffb_rw_1920.png?h=5c9255d49b4019f04e57cd3b8ee27a03)
Responsive design
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/6d24ebb4-6a4a-4233-9b94-49ac870bdab0_rw_1920.png?h=14a84647e67a5ce99f1f1c001fb9727e)
Outcomes
Data Visualization
Create visually engaging and informative visualizations for mobile and web platforms. From single-product price performance to multi-product comparisons.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/2c581f40-c663-4755-9c18-8718a406ab4a_rw_1920.png?h=38e843719c184ebc1527bc81e3498df4)
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/f317f47c-062b-41c6-9478-ce8a0b5916c2_rw_1200.png?h=54f2d0f7f56c016d0762b3358bce193a)
Global Wealth Design Show & Tell, presenting as a flagship
Bond as the flagship and basis for all Wealth Products, was presented the upcoming Bonds Product Screen to follow, in Wealth Design Show & Tell.
It helps the business to have more insights into how we can do with having more wealth investment products in the HSBC app to create a seamless investment experience.
![](https://cdn.myportfolio.com/4ad5f1c2-d32a-45a2-9bf0-b0157773d6cb/246e155a-ccc5-429a-84b1-266f88d6648f_rw_1920.png?h=9112927c9855d762acdd77a514414515)
Thank you!