Fund Supermarket
Project Period
February - April 2022
Role
UI/UX Designer
Performance
-
Research & Ideation
-
Sitemap
-
Lo-fi & Hi-fi Prototype
-
Takeaway
Mission
I was asked to re-design the app pages of aggregated fund data analytic tools with the new AQUMON design style guide.
Challenge
Currently, there are different kinds of fund supermarket products in the market. However, as the data is laid out with rich text, the users sometimes find it hard to read the data and navigate proceeding with their transaction process.
Goal
Changing the design of the old Fund Supermarket with the new AQUMON design style guide. Re-designing the adequate flow and data visualisation so that users can easily read and understand the data to achieve their own goals in the product.
Design Process
-
UI/ UX Indsutry Research of fund trading
-
Problem statement
-
Sitemap
-
Low-fidelity Prototype
01
Discover
02
Define
-
Final Design
-
Take-away
-
Ket solutions
-
High-fidelity prototype
03
Develop
04
Deliver
Industry Research
We looked at the existing fund trading app primarily similar to the Fund Supermarket product, including search, summary, analysis, holding details, fund details and transaction details.
Search
Summary
Analysis
Holding details
Fund details
Transaction details
Problem Statement
Heavy text layout - Overwhelming information for users.
Complicated features - Distracting to accomplish the goal that users expected.
The exact design of all multiple tabs and menus without hierarchy.
Sitemap
High-fidelity Prototype
On the Landing page, we tried to minimise the information displayed in tabs, cards and buttons so that the users can easily and quickly read the most crucial information they need. The new blue colour gives more contrast to the white background. We designed the new filter page on the whole page, allowing users to tap the tabs and buttons because of enough spacing between the tabs and buttons. In risk level and min investment selection, we changed the design with the bar so that users can easily understand the intention of the question.
Before
After
Before
After
High-fidelity Prototype
We changed the colours of tab menus to distinguish the hierarchy. We put them in the white background card format that contrasted with the light blue background to group the different information. Fund Archives and Trading Rules changed with the card that users can click and move on the sub-page to access that information.
Before
After
High-fidelity Prototype
We changed the font hierarchy with colour and size contrast to prioritising the preliminary information that users need to understand to achieve their goal of transactions such as buy and sell.
Before
After
Before
After
High-fidelity Prototype
We added the icons on the order status page that users understand the order status after they execute their action. The chart in the Holding details that users can understand the fund status. We also made the clickable card of Transaction Records that users can access that information on a sub-page rather than display the complex information on the main page of Holding Details.
Before
After
Before
After
High-fidelity Prototype: User Flow
We connected all pages into one main flow that simulated the demo for pre-sale purpose even though the functions of the demo is complex.
Design System
Take-away
Impact
The new version of Fund Supermarket can help users achieve their goal of transactions such as buying and selling. It also allows the users to read the data easily with high contrast colour and font size and colourful icons.
What I learned
I learned how to effectively design and develop the app-based fund trading product even though the information architecture was complex. As the purpose is to present in pre-sale, I focused on building this demo with high quality.
