Crafting Tranquility in Finance: The Mable App's Design Journey
Designing an award-winning finance app for the Japanese market
Meet Mable
In 2019, MUFG Bank in Japan embarked on an innovative project to develop Mable, a personal finance app designed to help users understand and manage their finances more effectively. The app allows users to connect all their financial accounts in one place, view spending and net worth over time, categorize transactions, and even transfer money into a savings account directly within the app. The goal was to create a user-friendly platform that not only provided comprehensive financial insights but also encouraged users to save.
What we did
The Mable app achieved remarkable outcomes by delivering a seamless financial ecosystem that transformed how users engaged with their finances. Designed to empower individuals to manage their wealth with ease, the app brought all financial accounts into one intuitive platform, offering features like spending insights, net worth tracking, and categorized transactions. Its standout functionality was a unique savings tool, enabling users to create and transfer funds effortlessly, encouraging healthy financial habits.
The team delivered a cohesive brand strategy that embraced a relaxed and approachable aesthetic, resonating with Japanese users and redefining the typically formal tone of financial apps. This vision was brought to life through an intuitive user interface and a robust design system that ensured consistency across the app.
These achievements earned Mable the prestigious Good Design Award in 2022, recognizing its innovation, user-centered approach, and its ability to make financial management a more accessible and calming experience.
Chapters
- 01 Establishing a Relaxed Brand Direction
- 02 Designing a Tranquil User Interface
- 03 Creating an Engaging Money Transfer Experience
- 04 Developing a Comprehensive Design System
View more
Establishing a Relaxed Brand Direction
The design journey began with a brand workshop aimed at aligning stakeholders' expectations regarding the app's look and feel. Through brand strategy exercises, the team defined the app's personality and positioning, deciding on a 'relaxed' direction that was considered unexpected in a finance application. This approach was deemed suitable for the Japanese market, aiming to make financial management a more approachable and less stressful experience.
Designing a Tranquil User Interface
Inspired by the gentle flow of water or a soft breeze, the user interface was crafted to be relaxing and aesthetically pleasing. The design ensured that users' personal assets were not overly highlighted, maintaining privacy in public settings. Screens such as the home page, monthly spending graph, and calendar view were all designed with this tranquil aesthetic in mind, providing a seamless and calming user experience.
Creating an Engaging Money Transfer Experience
The app includes a feature that allows users to create and transfer money into a separate savings account. The transfer process was designed to be a fun and seamless experience, motivating users to utilize this feature regularly. This engaging approach aimed to encourage consistent saving habits among users.
Developing a Comprehensive Brand Design System
From the 'Relaxed UI' concept, a comprehensive design system was developed. This system included the color palette, typography scales for both iOS and Android, app and system icons, and basic UI components. The design system ensured consistency across the app and was further refined by product designers and engineers to create a cohesive and user-friendly experience.
