back to homeView on Behance

CashCap

HCI-guided e-wallet for clearer savings and spending

Mockup

Product surface: calm cards, short actions, instant feedback.

Role
Product Design, Research, UI
Focus
MVP for Gen-Z money habits
Outcome
Validated flows + positive tests

Problem

Young users want an e-wallet that’s calm, trustworthy, and uncomplicated. Discovery surfaced four blockers: cluttered UI, weak money management, low spending awareness, and security doubts.

Audience & Goals

  • Primary: 17–26 early adopters of digital finance.
  • Lower cognitive load via minimal, consistent structure.
  • Build trust with transparent feedback and short flows.
  • Make saving tangible through a simple Piggy Bank mechanic.

Design principles

  • Gestalt: similarity, proximity, and common region for scannability.
  • Shneiderman’s rules: consistency, informative feedback, user control.
  • Progressive disclosure: essentials first, details on demand.

User persona

The persona represents students and early-career users who handle small, frequent transactions and want low-friction saving tools. Goals: stay on budget, build habits, avoid surprises. Frustrations: noisy UI, unclear confirmations, hidden fees.

Primary user persona

Persona snapshot — needs, goals, and frustrations drive the design.

User journey

Journey mapping showed pain peaks at moments of risk (sending money) and ambiguity (limits, fees). Reassurance and confirmations were added at these peaks to reduce hesitation.

User journey map

Journey map highlights reassurance moments.

User flow

Flows prioritize speed, clarity, and reversibility. “Send Money” uses a three-step path with explicit confirmation. “Create Piggy Bank” guides goal → limit → progress in a rewarding way.

User flow diagram

User journey tracks the user's path.

Sitemap

The sitemap keeps navigation shallow: Home, Payments, Savings, Insights, and Profile. This minimizes cognitive load and ensures discoverability.

App sitemap

Sitemap helps in navigation and discoverability.

Paper wireframing

Early sketches tested card density, chart emphasis, and reassurance placement. The chosen direction reduced component variety and grouped actions near related stats for faster scanning.

Paper wireframes

Paper wireframing before finalizing the design.

Usability testing

  • Participants reported higher clarity and control.
  • Piggy Bank boosted saving intent.
  • Terminology simplified money moves.

Final MVP

The MVP highlights calm navigation, card-first summaries, and a friendly Piggy Bank. Feedback is instant, actions short, tone reassuring.

Prototype demo

Looping prototype demo

Animated prototype demo.

Full Presentation

View the full Google Slides presentation.