top of page
Shot-2.png

The Healthy Wallet

The Healthy Wallet is a digital platform focused on helping people build healthier financial habits through education, planning, and goal tracking. Designed as an approachable personal finance tool, it empowers users to take control of their money with clarity and confidence  especially those just starting their financial journey.

Client

Brielle Bryant Erales

Overview

The core objective was to make financial planning approachable — especially for users who found traditional tools overwhelming or too complex to start with. The design process focused on simplifying financial decision-making while maintaining user motivation through visual clarity and thoughtful UX.

Team

1 Product Designer

2 UI Designers

2 UX Researcher
1 Owner

Timeline

3 Months

Visual Language

Product Experience

Information Architecture

Stakeholder Communication

My Responsibilities
Process

1

Week 1-4

Discovery & Foundation

Ideation & Research

  • Defined the platform's core purpose and audience (first-time financial planners, especially women of color)

  • Conducted competitor analysis (YNAB, Rocket Money, Good Budget, etc.)

  • Identified gaps in current financial tools (lack of personalization, emotional support, poor UX for beginners)

  • Designed and distributed a user survey to gather behavioral insights

2

Week 5-6

Structure

With research insights in place, the second month shifted toward building the structure and initial user experience. The first step was developing the information architecture, mapping out the app’s key sections such as Plan, Learn, Accounts, and Settings. Navigation flows were designed to minimize user friction and promote intuitive progress through the app’s tools.

Site map v3- Healthy Wallet Capstone 2024.jpg
2.jpg
3.jpg
7.jpg
6.jpg
5.jpg

3

Turning Features Into Flows

Wireframing began shortly after, focusing on low-fidelity drafts for major features including onboarding flows, personalized budgeting tools, linked accounts, debt calculators, and educational content modules.
Throughout this phase, layouts were continuously refined through weekly feedback sessions with stakeholders and faculty reviewers.

Week 6-8

Special attention was given to interactive opportunities like Help Mode, chatbot support, and embedded micro-goals, ensuring that every part of the app aligned with user needs and kept the experience approachable rather than overwhelming.

Onboarding - Welcome - v2.png
Home - Budget Overivew - v2.png
Home - Net Worth Overview - v2.png
Plan - Budgeting Overview - v2.png
Learn - Homepage 1 - v2.png

4

Week 9-10

High-Fidelity Design & Prototyping

This phase focused on translating the wireframes into a polished, high-fidelity interface aligned with the brand’s personality. Interactive prototypes were developed in Figma to simulate end to end user flows, including onboarding, budgeting, and educational interactions. Walkthrough sessions with stakeholders provided early validation for the visual tone, pacing, and clarity of navigation.

Outcome: Delivered a fully designed, clickable prototype that reflected the product’s intended emotional tone and usability setting a solid foundation for stakeholder sign-off and development readiness.

5

Week 11-12

Developer Handoff & Final Delivery

Once the high-fidelity screens were approved, the focus shifted to preparing for implementation. Annotated UI screens, component specifications, and usage documentation were organized in Figma for clarity. The design system including buttons, inputs, spacing tokens, and visual behavior was cleaned up and aligned with developer expectations.

Outcome: A complete handoff package was delivered to the development team, enabling a smooth transition into build.

Shot.png
Learnings

Balancing depth and simplicity was harder than expected.

The app needed to display a wide range of financial tools including budget breakdowns, savings matrices, debt calculators, and progress dashboards. The challenge was figuring out how to organize dense content and complex calculations into flows that felt lightweight, intuitive, and non-threatening. It required constant editing, testing, and questioning: What’s actually essential on this screen? What can wait?

Consistency across components sounds simple but it isn’t.

Small misalignments in button styles or spacing tokens showed up late, and standardizing them added unexpected cleanup time. The lesson: invest in system thinking early to save time later.

Handling complexity was harder than I expected.

This was my first time working on a product with so many interconnected tools, dashboards, and pages. Figuring out what content belonged where and how it would all connect got overwhelming fast. The sitemap was detailed to the point of chaos. I found myself constantly revisiting what each page was supposed to do, what sections were really necessary, and how to make it all feel simple to someone seeing it for the first time. It pushed me to think more structurally, not just visually.

bottom of page