top of page


Project Period
January - May 2022

UI/UX Designer


  • Research & Ideation

  • Sitemap

  • Paper Wireframe

  • Lo-fi & Hi-fi Prototype

  • Takeaway


I was asked to create the market data and match the client list analytic tool. This tool can potentially benefit investment advisors who need to manage their clients and analyse market data and portfolios.


Even though there are some wealth management platforms in overseas countries, such as Addepar, Purpose and FINCAD, the media needs to be localised to meet the demands of clients primarily in Hong Kong.


Ideating and designing the new dashboard visualised the market data and table of matched client lists and admin function.

New Macbook Pro Mockup Front View.png
Design Process
  • UI/UX industry Research: Table and data visualisation

  • Research on web based fund analytic programs

  • Problem statement

  • Sitemap

  • Paper wireframe

  • Low-fidelity prototype



  • Final Design

  • Take-away

  • Ket solutions

  • High-fidelity prototype



Industry Research

We focused on researching the table design and dashboard and visualising the data more effectively so that users could understand the information easily and quickly.

Screenshot 2022-05-18 at 12.26 1.jpg
Screenshot 2022-05-18 at 12.29 1.jpg
Screenshot 2022-05-18 at 12.27 1.jpg
Screenshot 2022-05-18 at 12.29 2.jpg
Problem Statement

Time-consuming to select the signal types and filter.

Complex market data and matched client list.

The heavy data to display in the limited table space.

Info Archi_supermarket 1.png
Paper & Digital Wireframe
Untitled_Artwork 5.jpg
Untitled_Artwork 2.jpg
Untitled_Artwork 3.jpg
Untitled_Artwork 4.jpg
Untitled_Artwork 1.jpg
Low-fidelity Prototype

​As the initial design phase continued, we made sure to base screen designs on feedback from the problem statement and findings from the industry research.

Dashboard Landing page1.jpg
stock landingpage.jpg
Mutual fundClient list before scrolling page.jpg
top deal by AMT in dropdown menu Admin page1.jpg
High-fidelity Prototype

We allocated the navigation bar on the left side of the screen that can be foldable and developed a new design system with high contrast with colours. We transferred the list of filter types into the hidden box that helps users access the filter type when needed.


ETFregion&industry selectionpage.jpg


Stock region&industry selection 1.jpg

We changed the signal type selection to a scrollable carousel with a bigger size than other charts because the users and investment advisors found that selecting the signal type on this page is the most crucial. A scrollable carousel helps them to establish more accessibility.


structured products after tick second colour bar.jpg


SP Chart term filtered.jpg
High-fidelity Prototpe: User Flow

We made the user flow a similar feature to an actual product that can be useful for the pre-sale purpose to clients. However, the number of pages was too many, and it had some risks when we delivered these big pages to engineers, so we tried to reduce the number of pages and reconnect the flow.

Screenshot 2023-09-18 at 4.50.59 PM.png
Screenshot 2023-09-18 at 4.52.20 PM.png
Final Design
See holdings page 1.jpg
SP Matched client list folded.jpg
Admin filter 3.jpg
SP Chart term filtered.jpg
Design System
Frame 895.jpg

Super-advisor demo can help investment advisors manage their clients more efficiently and provide practical and customised service with this data aggregated and analytic tool.

What I learned

I learned how to build a web-based demo from scratch based on the needs of target users. The agile design process gave me the confidence to understand UI design and advance my Figma skills thoroughly.

bottom of page