This project was a 10-month project starting from the end of 2019 to October 2020. As a hybrid UX/UI Designer in this project, my role was to participate in the processes of research, ideation, prototyping, and delivery for development. I worked closely with the cross-functional team to ensure the final design met the stakeholders’ requirements.

HSBC Stocks
UX/UI Design
2020

“Stocks” is a redesign of an older version of the stock feature built in the HSBC app. By integrating the Easy Invest, a standalone mobile application for stock trading in HSBC Hong Kong market, the goal is to try to maintain….

Simple Starter Journey is a feature in HSBC FlexInest. Based on customers’ risk tolerance levels, this feature aims to assist millennial customers to invest by providing a personalized multi-asset fund based on their risk level. Therefore, customers can simply choose the fund product without having difficulties in deciding how to allocate their funds.

Meanwhile, for customers with higher risk tolerance levels, there is a sub-feature to help customers build a simple portfolio by providing a recommended asset allocation. Customers can thus make references and have a hassle-free investment experience.

Key Findings in Data

In the app traffic data, we observed there is a significant issue with the drop-off percentages in the app visit. We have some highlighted insights from our research.

Customers still don't have enough knowledge/confidence to make purchases.
Customers don’t have enough knowledge/interest to identify a fund
Customers have no valid RPQ (Profile for Risk Tolerance)

Problem statement

Customers have a bad stock trading experience in the HSBC app while they think Easy Invest is complicated to use.

↓

Product objective

We want to help customers by creating a simple and seamless version of the stock trading feature.

Competitor Analysis

We used competitive analysis to help us define the strengths and weaknesses of how are current competitors doing in terms of the workflow of fund investment. This method also has offered us insights and strategies to create our fund-guided journey.

Personas

Before moving to the ideation stage, we created possible personas for the project objectives. We selected “Follower” and “Guidance Seeker” as major groups of our millennial customers, and we would like to come up with ideas to serve their needs and address their investment concerns

Ideation

In the workshops, we came up with “Do it with me” and “Do it for me” solutions to cater the needs of these two personas.

Do it for me

Do it for me is an approach to provide ready-made portfolio funds. Customers can simply choose to invest in a fund with a default asset allocation based on their risk tolerance level.

Do it with me

Do it with me is a journey to allow customers to build their own portfolio fund. With investment references based on customers’ RPQ, it assists customers to make their investment decisions

Prototyping

We came up with an initial concept by creating wireframes in a workflow to explain how customers can navigate the approaches in FlexInvest.

How do we vaildate our idea?

User Testing Session

We had a third-party agency helping us recruit targeted customers, and run the testing session. In order to have a validation of Simple Starter Journey’s idea and experience, we interviewed 8 people for their thoughts about the feature. The result came back with constructive feedback.

Review Sessions

The project was presented in the internal design review and global design view. With the feedback for “Agree way forward”, we have ideas on how to improve our project by aligning other HSBC products in the HSBC app.

Key Findings

Lack of Knowledge
Most of the interviewees pointed out that they faced difficulties understanding the terminologies used in the Journey. For example, they can’t easily identify what are the differences between “Individual funds”, “portfolio funds”, and “multi-asset funds”.
Missing Directions
Some of the interviewees did not think the design provides enough directions and recommendations in terms of helping them to invest. They were unsure what to do in the steps without hints.
Fund Option Display
Interviewees disagreed with the approach of hiding fund options that are beyond their risk tolerance levels. Instead, they think it would be better to display all fund options.

Solutions

Adding Glossaries and Tooltips

Interviewees often tried to interact with the contextual help icon suggesting that it would be a popular and important piece of interaction design, particularly for novice investors.

Having a glossary page could also be a solution to educate customers on the differences between different types of fund investments.

Adding Explanations and Hint text

Since some of the interviewees felt lost in using the journeys, we decided to make it more directional by utilizing UI components and changing copies.

Display All Fund Options

Instead of hiding fund options that are beyond customers’ risk tolerance levels. We decided to expose all fund options while reminding customers by adding tags.

Finalization of the Design

After weeks of design revisions, we finalized the Simple Starter Journey design that caters to the feedback and perspectives from various stakeholders as much as possible.

Flowchart for Simple Starter Journey in FlexInvest

1. Entry Points

There are multiple entry points to let customers enter Simple Starter Journey via Landing and Fund List.

2. “Do it for me” Journey

It provides ready-made portfolio funds. Customers can simply choose to invest in a fund with a default asset allocation based on their risk tolerance level.

3. “Do it with me” Journey

It allows customers to build their own portfolio fund. With investment references based on customers’ RPQ, it assists customers to make their investment decisions

Minor Enhancement

Per a request from the business team, we revised a design for the ready-made portfolio page in “Do it for me” in order to have a better differentiation between portfolio funds and individual funds. Plus, the layout of the page brings more information hierarchy and interaction.

Conclusions

There are some points that I learned from this project.

Final version is not always ideal
There are always “Imagination VS Reality” scenarios in our design process. The process and outcome of this project are definitely not exceptional. With feedback from various stakeholders, all we can do is to find balanced solutions that severe the needs and meet the requirements from stakeholders. We can only hope for improvements in Day 2 release.
Ways of working
The process of this project was quite difficult due to the change of new joiners in the team. With doing design revisions going back and forth because of the potential legal risks, there is a need for us to have a retrospective to find out what caused this to happen, why made it happen, and how to avoid it happening again.
Future improvement may be needed
A good product always comes with changes for enhancement. The MVP of Simple Starter Journey is definitely needed to take further actions for a better experience.

That’s a wrap for now. Thanks for reading!