Mocca is a personal project driven by my interest in personal finance and financial wellbeing.

The financial part of one's overall wellbeing has been hugely neglected until the outbreak of Covid, when people started to realise that a healthy and resilient personal finance is fundamental to their physical and mental wellbeing. However, people can feel like they missed out on life's financial lessons due to a lack of education.

Mocca is designed to improve financial wellbeing and help people to feel more confident about money.


UX/UI design


User research, Persona, Product vision, Information architecture, User flows, Wireframe, Prototype


Figma, Miro, Photoshop


By providing scripted financial coaching sessions with AI-powered coach, letting users manage their assets on one screen, mocca users can get practical financial lessons which they might not receive in school, and have more capability to manage their money.

Mission statement

Covid told us we have been neglecting our financial wellbeing

People may never realise how important it is to build resilient personal finance until the outbreak of Covid. A healthy and well-structured personal finance can greatly support us through this unexpected difficult time both physically and mentally.

However, financial wellbeing is still not something we openly talk about and is seen as taboo. According to a survey by investment management company BlackRock in 2019, 45% of British people said that money was their single biggest cause of stress, and 59% of 18-24-year olds felt like they had poor financial health.

Financial education for grown-ups

Although there are various fintech products like budgetting apps and robo advisors on the market, most of them do not help to bust the myths of personal finance.

Lack of financial education can have a huge impact on financial health and overall wellbeing. From BlackRock's survey, 97% of 18-24-year olds said financial education in school was important, yet only 40% received it.

How might we help grown-ups get practical financial education and improve their financial wellbeing? I started designing mocca to solve this problem.

User research

User interview

I conducted 5 interviews with people in their 20 - 30s to learn more about the actual needs and problems regarding financial wellbeing.


Product vision

To define what I could achieve with the product and what makes it unique,
I created this product vision which allows me to understand the true value of the product in an accurate and aspirational way.

Design strategy

Affinity mapping

What initiatives and features are needed to be implemented to achieve the product goals? To explore the possibilities based on the defined problems and user needs, I conducted an affinity mapping exercise.

Design principles

Based on the potential priorities from the affinity map, I set up 3 key design principles to guide the following process.


Information architecture

Once having a clear vision of the product and the principles of design, I started to build an information architecture to show the features and functionalities to achieve the product goals.

User flows

After having a clear structure of the app, I designed the flows for new users and regular users. I decided to navigate new users to a personal financial wellbeing assessment with the AI coach straight after onboarding, as it is the core feature of mocca.

For regular users, the flows can be flexible depending on their specific needs. I designed flows for the key features to indicate how regular users could use the product.


Based on the product vision and information architecture, I wireframed the onboarding screens and main screen of the key features.


After creating the wireframe, I made several iterations to improve the core user flows and features by optimising the user experience and engagement.


From version 1 to version 2, I added the text filed at the bottom of the screen, which allows users to change the topics of conversation at any stage of the coaching session. In version 3, I removed the avatar of mocca to make users focus more on the conversation.


For the main screen of the asset feature, I modified the layout of the overview section, and replaced the "how am I doing?" button with tabs, to make the access to asset assessment more clear and direct.


From version 1 to version 2, I added an achievement section in the journey feature to improve the user engagement and replaced linear progress indicators with ellipses to match the asset screen.

Then I decided to go back to linear shapes in version 3, as users can know their progress at a glance. I also categorised goals by terms to help users to build a broader vision of their financial future.

Chatbot persona

I also developed a persona for the AI financial coach based on the value and mission of the product. According to the research, users don't like financial jargons and need professional assistance to achieve financial wellbeing, which helps me understand the language mocca users could use.


High-fidelity prototype

Interactive prototype - new users flow

Play with the interactive prototype and try the new users onboarding experience and financial wellbeing assessment out. Have fun!

Regular users flow

There are more flexibility and versatility when it comes to regular users flow. For the key features of asset, journey and feed, I created high-fidelity flow diagrams to show how mocca helps with personal finance for regular users.

Design system


What I learned

1. What I enjoyed most in this project was the thinking process behind designing and building a digital product: the discovery and exploration of the possibilities and opportunities of the product, as well as the organisation and prioritisation of my findings;

2. How to design and build a digital product from concept (a real people problem to be solved) to delivery;

3. Communication design: how to use chatbot and UX writing to communicate and engage with the users;

4. How to build a design system and create design assets.

Further steps

1. Conduct user testings of hi-fi prototype and iterate the design based on user feedback;

2. Improve accessibility design including colour blind testing, responsive design for different screen sizes and off-line mode;

3. Continue designing for edge cases, including error states, empty states and more;

4. Consider the opportunities of AI in other features: how could AI help the users to manage their financial assets and set up financial goals?

Kaixi Sun © 2022