top of page

Mox Bank

Project Period
February - March 2022

UI/UX Designer


  • Research & Ideation

  • Paper Wireframe

  • Digital Wireframe

  • Lo-fi & Hi-fi Prototype

  • Takeaway


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.


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.


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.

iPhone X Side View Mockup.png
iPhone X Flying Mockup Left View.png
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



  • Final Design

  • Take-away

  • Ket solutions

  • High-fidelity prototype



Industry Research
origin_img_v2_b60f210c-6c48-4575-ae32-0241765e31cg 1.jpg
IMG_3178 1.jpg

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

IMG_3157 2.jpg
IMG_3156 2.jpg
IMG_3163 2.jpg

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
Screenshot 2022-02-15 at 2.48 1.jpg
Screenshot 2022-05-12 at 12.25 1.jpg
Screenshot 2022-05-12 at 12.24 1.jpg
Screenshot 2022-02-15 at 2.42 1.jpg
Screenshot 2022-02-15 at 2.23 1.jpg
Screenshot 2022-02-15 at 2.47 1.jpg
  • 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.

Info Archi 3.png
Paper & Digital Wireframe
Quiz 8.jpg
Quiz landing.jpg
Quiz Progress page.jpg
Quiz 1.jpg
Quiz 7.jpg
Quiz 2.jpg
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.

Quiz Landing Hi-Fi 3.jpg
Coin Toss.jpg
Do you own a vehicle.jpg
Household situation.jpg
Investing Scenario.jpg
Investment Preference.jpg
Monthly Pre-tax Income.jpg
Total Assets.jpg
Risk Ruiz Result 2.jpg
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.


Monthly Pre-tax Income.jpg


investment horizon tendency.jpg
Investment objective.jpg
Final Design: Risk Profiling Questions
Quiz Landing Hi-Fi 4.jpg
Age group.jpg
Education Level.jpg
Financial situation.jpg
imcome allocated for investment.jpg
investment horizon tendency.jpg
Investment knowledge and experience.jpg
Investment objective.jpg
Liquid asset proportion.jpg
Perception and attitude.jpg
Risk Ruiz Result 1.jpg
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.


Verify Your Identity-1.jpg


Verify Your Identity.jpg


选择验证方式 1.jpg


MOX 选择验证方式 1.jpg
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.


基金首頁(已持倉,APP一級頁) 1.jpg


Homescreen for Investments.jpg




Popup filter.jpg
Final Design: Fund Details Pages

We highlighted some crucial information for the users with the Mox bank signature bright blue colour.


基金詳情-非貨幣基金 1.jpg
基金詳情-非貨幣基金 2.jpg




Money Market Fund (Mox Style) 5.jpg
Money Market Fund (Mox Style) 6.jpg


Mox Holding Details.jpg
Mox Holding summary-1.jpg

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.

bottom of page