Save Up

Money saving tool — UI design case study

introduction

This case study dives into the challenges people face when trying to save for big life events or major purchases. I wanted to solve this problem because I saw how frustrating it can be to navigate complex, overwhelming interfaces. Saving for important milestones should be empowering, not stressful, and I believed there was a better way to design tools that make the process simple, intuitive, and achievable.

Key Deliverables

UI / UX, user research, user interviews, user flows, usability testing, style guide, iconography, wireframing, prototyping, responsive design.

Tools

Figma

problem

Many people struggle to save money and without clear guidance and accessible tools, they risk falling short of their financial goals.

solution

The goal is to design a user flow that is both intuitive and motivating. By combining user insights with thoughtful design, the app offers a solution that not only simplifies money management but also keeps users motivated to achieve their savings targets.

Process

01 user research

Through user interviews, I identified the needs and pain points users faced with existing money-saving apps. I analysed the research and extracted the key insights to guide the design process.

Next steps

01 User Flow Diagram

The user flow outlines the complete process of logging in or signing up to setting a savings goal and accessing the user dashboard.

Wireframes

01 Mid fidelity

Mid-fidelity wireframes were created to develop the user flow and a Balsamiq prototype for user testing.

Style guide

01 typography

The tone is professional yet friendly, promoting trust while remaining approachable. The voice is empowering and motivational, inspiring users to achieve their financial goals.

02 logo

The logo design applies key design principles to establish trust. Balanced proportions and clean lines communicate professionalism, while the use of calming blues evokes reliability, enhancing the brand’s credibility.

03 colours

Using colour theory, I made intentional design choices to build trust. Calming blues and neutrals evoke reliability and professionalism, helping the brand feel trustworthy to its audience.

UI

01 design

The user flow allows users to quickly and simply sign up or log in and begin their savings journey by creating a savings goal.

02 Motivational language

Short, encouraging messages have been added to the sign-up process and dashboard to uplift users, reinforcing that the app is here to support and motivate their savings journey.

03 Responsive Design

The design is built to be fully responsive, ensuring a consistent and optimal user experience across all devices and screen sizes. It adjusts the layout and content to fit different screens.