Responsive web application that monitors your income and spending and gives you advice on how best to save for your upcoming expenses
Role: UX/UI Designer
Time: 6 weeks
Made with: Figma
Maneki Neko is the Japanese name of the lucky cat, a symbol of wealth and prosperity.
In this money-saving tool, Maneki is a cartoon cat who guides users through the app, monitors their spending behavior and encourages them to meet their goals.
In spite of the cartoon-like mascot, the brand guidelines that I have outlined promote trust and security. Maneki is encouraging and supportive without being condescending. Users will receive friendly reminders to log their expenses and will be rewarded with badges when they reach a milestone.
Project Brief
This is a tool is for anyone who has a specific goal in mind for which they are saving up. The web application will guide users along their saving journey by making specific recommendations for how to cut expenses.
This will be a responsive web application.
As this is a responsive web application, users will be able to access it from all devices.
Users will use the tool multiple times a day. Whenever they make, spend, or save money, they will record their actions in the tool.
Not everyone is skilled at saving money. It can be tricky to keep track of all your expenses and things can creep up on you. Maneki will help you plan your spending and will advise you on where to cut corners.
Simple, understandable navigation.
No unnecessary decorations, no fancy jargon — Only the most important information.

Every chart has a clear legend, every illustration is annotated.
Application is easy to navigate, intuitive and learnable.

The information and recommendations provided are based on strong financial research.
Issues are rapidly addressed, bugs are fixed.

Maneki is not here to lecture, shame or nag.
It is here to support its users and offer a reliable, easy-to-follow plan for users to achieve their savings goals.

Maneki is very visual and illustrative. Users’ savings journeys are documented on a dashboard that visualizes milestones and progression over time.

The tone of this app is encouraging. Everyone slips up from time to time and saving money isn’t easy. But Maneki believes in you.
The language used in Maneki is friendly and encouraging yet professional.
Users are addressed by their selected , with a friendly greeting.
Users will receive gentle reminders to track their expenses and supportive encouragement when milestones are achieved.

Raleway - Headings
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Light | Regular Semibold Bold

Noto Sans — Body Copy
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Light |Regular|Semibold|Bold
The Maneki logo is a simplified version of the Maneki waving cat mascot. It consists of the outline of the cat face with the logo printed inside. 
The Maneki mascot is a little lucky waving cat.
It appears in different moods and pops up to “speak” to users. 
The Maneki mascot is the primary way of communicating with users.​​​​​​​
The Color Scheme is analogous, based on friendly greens. Green is often recognized as a color of wealth and prosperity as well as growth and health.
In order to be able to display various different data in graphs and charts, I selected a palette of light, pastel colors, all with a saturation of 21 and a brightness of 95.
The Maneki app utilizes simple illustrations to demonstrate the functions of the application and show users how they can interact with it.
This app will not use photography, only illustrations to stick with the simple theme.
The icon set is simple, easy to understand, and based on universal icons.
User Stories and User Flow Diagram
In order to narrow down on the necessary features of this web app, I selected four key user stories to include in my MVP. I then defined the entry point and success criteria for each of the user stories and used those to create flows that I finally combined in this user flow diagram.
First Draft - Sketches and Mid-fidelity Wireframes
The Iterative Process
Using my high-fidelity wireframes, I built a functional prototype in Figma and asked several of my fellow design students to test the prototype and comment on design, functionality and content.
After implementing those suggestions and finishing up the visual design, I asked my mentor to review the final prototype.
Responsive Design
As this is a responsive web application, I began with the mobile first approach and then proceeded to design a tablet and desktop version as well.
The tablet breakpoint design is very similar to the mobile design, while the desktop version generally has a two-column layout with a few components that stretch across the full viewport width.
Final Screens

You may also like

Back to Top