Piggy bank

Smartphone screens showing a budget app named Piggy Bank, with features like expense tracking, account management, and user profile. One screen displays total expenses of $958.67 with a pie chart for expense categories. Another screen shows user profile details and account options. The third screen highlights recent transactions and expenditure details.

UX / UI design

Project overview

PiggyBank is a financial literacy app designed to help adults build saving habits through goal-setting, progress tracking, and light gamification. This project was completed as part of the Google UX Design certification and represents my full end-to-end UX process — from user research and persona development through wireframing, prototyping, and usability testing.

Tools

Figma logo with multicolored shapes forming the letter 'F' on a black background.
Adobe Illustrator logo with a dark background and orange letters 'Ai'

Google certification course

UX Design

Role

UX Designer

Duration

8 Weeks

The problem

Most financial apps overwhelm users with complexity before they've built any confidence with their money.

The opportunity wasn't to build a more powerful tool — it was to design a simpler, more human one. Research surfaced a consistent pattern: adults who struggled with saving weren't lacking willpower, they were lacking a clear starting point. The design challenge became: how do you make the first step feel achievable?

My role

Lead UX designer

As the Lead UX/UI Designer, I led the design process from research to final prototype, focusing on creating an intuitive and user-friendly interface. I conducted user research, developed personas, created wireframes, and high-fidelity prototypes, and conducted user testing.

A collection of mobile banking app interfaces displaying various financial management screens, including credit score, savings, income, expense tracking, bank account addition, and security passcode setup.

Process

The UX/UI design process for the savings app involved user-centered research, iterative design, and user testing to create a functional and user-friendly product.

This UX/UI design process involved a comprehensive approach to creating a savings app. User research was conducted to understand user needs and pain points. Personas and journey mapping were developed to ensure the design addressed real user needs. Finally, wireframes and prototypes were created and iterated upon based on user feedback to ensure the design was successfully user centered.

Sketch of six mobile app wireframes arranged in two rows of three, with various layouts including images, icons, and text elements.

The solution

An app that offers a personalized, goal-based savings structure with a visually appealing interface, gamification elements, and an intuitive design.

PiggyBank provides users with a personalized, goal-based savings experience. The app features a clear, visually appealing dashboard that tracks savings progress, sets custom goals, and provides motivational prompts. Gamification elements, such as earning badges for achieving milestones, help keep users engaged and motivated. The clean, minimalist UI ensures an intuitive experience, making the app accessible even to users with limited financial knowledge.

Smartphone displaying a banking app with multiple screens layered, showing account details, popular banks, and financial goals.

What I learned

This project sharpened my understanding of where UX and behavior design intersect.

Designing for motivation is different from designing for usability — a user can understand exactly how to use a feature and still not use it. The gamification elements (milestone badges, visual progress indicators) weren't decorative decisions; they were responses to a specific research insight about how users emotionally disengage when progress feels invisible. Testing validated this: users who saw visual savings progress in early prototypes reported feeling more "in control" — a word that came up unprompted across multiple sessions.

A laptop showing a Google Slides presentation titled "Budgeting App - Piggy Bank" by Jordan Morrison.

Want to read more?

View the slide deck created during the Google course with a more in-depth step by step process illustrated.

View Slide Deck