Mox Bank
Project Period
February - March 2022
Role
UI/UX Designer
Performance
-
Research & Ideation
-
Paper Wireframe
-
Digital Wireframe
-
Lo-fi & Hi-fi Prototype
-
Takeaway
Mission
The client, Mox bank, requests a unique and creative user experience of investment behaviour evaluation so that the users can experience an enjoyable boarding process. They also asked to propose the fund trading app be re-designed with the Mox bank design style.
Challenge
The traditional investment behaviour evaluation design with rich text and fewer visuals decreases users' motivation. They tend to lose interest and often drop out in the boarding process of a product. Mox bank still lacks the feature of intelligent investment yet.
Goal
We ideated and designed the new and creative investment behaviour evaluation app for the enjoyable boarding process. Re-designing and customising the fund trading and analytic tool for Mox bank.
Design Process
-
Mox bank UI/UX Research
-
Industry reserach of risk profiling quiz and fund trading
-
Sitemap
-
Defining the design concept
-
Paper wireframe
-
Digital wireframe
-
Low-fidelity prototype
01
Discover
02
Define
-
Final Design
-
Take-away
-
Ket solutions
-
High-fidelity prototype
03
Develop
04
Deliver
Industry Research
Our team analysed and highlighted the Mox bank’s essential UI design style as we proposed the product to the client.
-
Colour and Visual - Gradient and Primary
-
UI Display - Card based modules & micro interactions
-
Icons - Outline icons, a "cut off stroke"
-
Text - Maison Neue
AQUMON’s Risk Profiling Quiz Reference
-
Using illustrations helps users to understand the intention of the question.
-
It can be designed for more users to engage intuitively rather than display illustrations and text.
Gamified Quiz Research
-
Driving or marathon route to get to the finish line
-
Helping the users to perceive the timeline to achieve the goal
-
Gaining the points and the point results represent the risk level
-
Helping to have the motivation to continue the quiz
-
Each question is in a different answering format to encourage their engagement.
-
E.g. users can directly measure their income rather than tapping the given answers, providing the images with solutions rather than relying on the text so that users can quickly understand the answers and not be bored.
Sitemap
Paper & Digital Wireframe
High-fidelity Prototype: Risk Profiling Questions
-
Gamifying the investment behaviour evaluation to help users get the motivation and engage in the boarding process.
-
We added emojis and icons for users to understand each evaluation questionnaire easily and effectively.
-
We used the visuals of gradation to ask the range of numbers, like the incomes.
High-fidelity Prototype: Risk Profiling Questions
Our team needed to change the different question types because of governmental restrictions that comprised the rich text. So we decided to use the collapsable menu list that avoided reading difficulty and added the tick boxes because some questions have multiple.
Before
After
Final Design: Risk Profiling Questions
Final Design: Account Opening Pages
We changed the old style of account opening pages into Mox bank style with enough contrast between background and text and the icons. We Highlighted the critical information with Mox bank’s primary colour.
Before
After
Before
After
Final Design: Home & Filter Pages
On the filter page, we changed to a pop-up page design that matched the Mox bank design style guide and followed the card design system of Mox Bank.
Before
After
Before
After
Final Design: Fund Details Pages
We highlighted some crucial information for the users with the Mox bank signature bright blue colour.
Before
Before
After
%205.jpg)
%206.jpg)
After
Take-away
Impact
The proposed gamified design of a risk profiling quiz can help the new joiners engage in the onboarding process of smart investment. They can also enjoy the unique function of smart investment in Mox bank products.
What I learned
I learned how to develop the most effective UI design component also, understand what the client wants and propose the most effective design solution based on their feedback.
