Cookie Jar

Cookie Jar App Design

Tools:

Figma, Figjam, Zoom, Google docs, Trello, VS Code, Github

Roles:

Product Designer

Time Frame:

3 weeks

Managing personal finances can be overwhelming, especially for individuals who struggle with financial literacy or feel intimidated by traditional budgeting tools filled with jargon and complexity. Many people want to save money and manage their budgets but are discouraged by rigid systems that fail to engage or empower them.

Our goal:

This research project aims to understand the emotional and practical challenges that affect people with managing their finances. Our goal is to design a tool that reduces stress, encourages positive habits, and makes financial management simple, approachable, and enjoyable.

We started by getting a better understanding of how our users manage their finances.

Through a survey we conducted, we learned that 40% of respondents regularly track their finances to improve budgeting. About 55% have created their own tools but are looking for a more comprehensive solution. And most notably, 70% prefer visual snapshots to quickly and clearly understand their financial picture. We also discovered that users tend to spend the largest portion of their disposable income on dining out, and many don’t monitor their spending as frequently as they should.

Users said:

I want to prioritize building a financial foundation that ensures resilience against market and career fluctuations.

Struggles with the unpredictability of unexpected expenses, such as home repairs or life changes.

I want a tracker that helps me build a better relationship with money

I want to plan for a safety net, but don’t know where to start

I want a comprehensive view of my finances

The time-consuming nature of record-keeping and the challenges of managing multiple accounts stem from a lack of integration and communication between them.

Our user persona:

Julia, a 37-year-old Design Manager in Toronto. She shares financial responsibilities with her partner and is focused on building stability, saving for a home, and planning for the future. Julia wants an easier way to track finances, build an emergency fund, and plan for buying a home. However, she often struggles with unexpected expenses, juggling multiple accounts, and using basic tools that don’t offer the automation or personalization she needs. She’s looking for a solution that can make financial management simpler, smarter, and more tailored to her life.

Demographics:
Name: Julia Jones
‍Age: 37
‍Occupation: Design Manager
‍Location: Toronto, ON
‍Marital Status: Married

‍Frustrations:
- Struggles with unexpected expenses and the disruption they cause to financial plans.
- Feels overwhelmed by managing multiple accounts and credit benefits amid a demanding schedule
- Relies on basic tracking methods that lack the automation and personalization needed for efficiency

Gains/Goals:
‍- Stability. would like to build an emergency fund and maintain financial consistency.
-Easy management. She would like to have the option to streamline her financial tracking to be able to have better planning
- Long term planning for savings and investments.

Julia needs:

Tailored recommendations to navigate income fluctuations and unexpected expenses.

Helps set and monitor both short-term and long-term financial goals.

Automatically tracks and categorizes expenses to save time.

A tool that consolidates all her financial accounts in one place.

Tracks spending patterns and trends over time.

Makes creating and maintaining budgets effortless.

Offers instant notifications and insights to keep her on track.

Sticking to a budget is tough!

Based off of our research, most of our users mentioned that sticking to a budget is hard. So we set out to solve that problem by asking the question: How might we create a personalized, easy-to-use financial tool that helps busy professionals achieve stability, stay on top of their spending, and reach their financial goals?

During our brainstorming session, we established four main priorities:

Tailored Insights

Helpful advice and reminders that fit Julia’s schedule, making sure she stays on top of her finances without extra stress

Personalized Goals

Set goals and milestones that fit Julia’s lifestyle — whether it’s building an emergency fund, saving for a home, or planning investments.

Automatic Budgeting

No more manual tracking! The app automatically categorizes expenses and sends alerts when spending gets off track.

Easy-to-use Navigation

Clear labels and tooltips to help Julia find what she needs without frustration.

Julia finds Cookie Jar

At this point in Julia’s journey, she finds Cookie Jar through a Google search and loves its simple "cookie jar" approach to managing finances. She chooses it over competitors for its mix of financial tools and helpful tips.

Then we began an iterative process of building our wireframes.

Once we had our priorities, our next step was to build wireframes for the mobile app. We started sketching and laying out content on the screens to visualize how users might navigate the app. We also decided to boost our web presence by creating a desktop website, making it easier for potential users to discover and connect with our app.

Sketches

Mid-Fidelity Wireframes

Mid-fidelity User Testing

During testing, users noted that the "Add Entry" button could be more prominent and suggested displaying recent transaction dates for better clarity. Some found the "Manage Tracker" button difficult to locate, highlighting the need for improved accessibility. Users also requested personalizable budget categories to better fit their needs. The biggest feedback we got was to incorporate a demo of the app and to provide a bit more context around the quotes.

Julia sets up her tracker

After incorporating these updates into our designs, Julia can now set up her personalized tracker. She loves how effortlessly she can set up her budget categories (or "cookie jars") and tailor them to fit her lifestyle.

High-fidelity Prototype

Informed by user testing and our style guide, we refined our mid-fidelity prototype for clarity and usability. The home page now provides a quick overview of financial information, while the tracker page features a visual graph for spending categories, progress, and transactions. Users can track goals on a dedicated page, celebrating milestones with badges. The tips page offers personalized articles and practical advice for on-demand financial support.

High-fidelity User Testing

Users shared great feedback during high-fidelity testing. They loved seeing recent transactions on the home page but suggested placing them higher up. The gamification, interface, and colour scheme were praised. Some questioned the need for goal progress on the home page, while others struggled to find where to view or add goals. Lastly, some users suggested adding helpful tips to the 'New Goals' form, like recommended deposit amounts based on their goal’s target deadline.

A/B Testing

For our A/B testing, we focused on evaluating users' visual and usability preferences for the home page. The results revealed a split—some users preferred option A, while others favored option B. This makes it clear how important customization is to our users. Moving forward, we would create a more personalized home page experience, giving users the freedom to shape it around their own goals and needs.

Julia is able to monitor and set her goals!

Julia consistently tracks her finances and is now closer to achieving her dream of owning a home!

Reflections and Lessons

Creating this app from start to finish opened up a lot of opportunities and insights for us as designers. The key things that we learned are that clear communication is crucial for consistent coding, and that tasks often aren’t as simple or as hard as they seem. Managing finances is personal and needs customization. While focusing on a universal solution helped us address key needs, it limited our time for other features. This project reinforced the vital role of research in our process. Every decision we made was carefully guided by our findings, ensuring it aligned with our users’ needs and expectations.

View high-fidelity prototype >View Github landing page >