Designing Moneyflap

Published site link: https://www.moneyflap.com/

A Complete Product Ecosystem

MoneyFlap set out to bring multiple financial services payments, savings, analytics, card management, bill payments, multi-account switching and agent/merchant operations into a single unified platform. With dozens of complex features and no prior UX foundation, the challenge was to design an experience powerful enough to support advanced financial workflows, yet intuitive enough for everyday users. As the sole UX/UI designer, I was responsible for transforming raw product ideas into a cohesive, scalable and human-centered financial ecosystem.

Introduction

Summary

I created a unified financial experience that simplifies complex money management for diverse user types. By building a scalable UX foundation from the ground up, I aligned user needs with business goals and transformed an unstructured product vision into clear, streamlined financial workflows. Through iterative prototyping, continuous validation, and close collaboration with stakeholders, I delivered a cohesive ecosystem that now guides engineering development, marketing strategy, and serves as a core asset for investor fundraising.

What I Did:

1. End-to-End Product Ownership:

Led the full UX lifecycle, designing 500+ mobile screens and 30+ user flows across onboarding, payments, analytics, card management, savings and multi-account features.

2. Design System:

Built a comprehensive system from scratch including components, icons, illustrations, animations, typography, color themes and layouts for app and website consistency.

3. High-Fidelity Prototyping:

Crafted interaction-rich Figma prototypes with advanced animations and conditional flows to validate journeys and impress stakeholders.

4. Stakeholder Collaboration & UX Research:

Conducted workshops, usability tests and iterated based on user and business feedback.

5. Web Design & Investor Pitch:

Designed the MoneyFlap website in Figma and deployed on Framer and created the visual narrative for the investor pitch deck.

Problem Statement

The core challenge was to transform an extensive set of financial services—payments, transfers, savings, analytics, bill management, card controls, and merchant/agent operations—into a single, intuitive user experience. With no existing design system, visual identity, or defined product structure, MoneyFlap required a scalable UX foundation capable of supporting rapid growth, diverse user journeys, and future product expansion.

Solution

★ To address the complexity and scale of MoneyFlap’s financial ecosystem, I designed a unified UX framework and built a full design system from scratch.

★ Delivered 500+ high-fidelity screens and 30+ flows across onboarding, payments, savings, analytics, transfers, and card management.

★ Built scalable experiences for customers, agents, and merchants backed by iterative prototyping and usability testing.

★ Created a seamless, trustworthy interface across both mobile and web through strong IA, collaboration, and interaction design.

Design Goals:

1. Simplify complexity by turning multi-step financial operations into clear, intuitive user flows.

2. Build trust and consistency through a cohesive design system covering typography, color, iconography, components, and motion.

3. Ensure scalability to support new features, multi-account functionality, and future product expansions.

4. Enhance usability for users with varying levels of financial and digital literacy through clear navigation and visual hierarchy.

5. Create delight and clarity using meaningful animations, micro-interactions, and well-structured information architecture.

6. Enable smooth onboarding and engagement across user roles - customer, agent, and merchant.

Process Overview:

1. Discover

✦ Partnered with founders to clarify product goals and user needs.

✦ Identified core use cases across customers, agents, and merchants.

2. Define

✦ Mapped 30+ user flows and structured the product with clear IA and feature hierarchy.

✦ Prioritized features based on user value and business objectives.

3. Design

✦ Designed 500+ high-fidelity screens across all financial workflows.

✦ Built a full design system from scratch.

✦ Created advanced prototypes for stakeholder reviews and testing.

4. Test

✦ Ran usability tests on key journeys (onboarding, payments, savings, card controls).

✦ Identified friction points and iterated to simplify navigation and flows.

5. Deliver

✦ Delivered production-ready design assets and documentation.

✦ Built and deployed the marketing website in Framer.

✦ Designed investor pitch visuals and supported engineering handoff.

Key Challenges:

1. Complex Financial Flows:

Designed seamless experiences for payments, savings, budgets, subscriptions, and analytics, each with unique logic and edge cases.

2. No Existing Design System:

Built all components, icons, and micro-interactions from scratch while ensuring scalability.

3. Multiple User Roles:

Created adaptable flows for customers, agents, and merchants without adding confusion.

4. Feature-Rich Yet Simple:

Balanced powerful capabilities with intuitive, trustworthy experiences for users of varying digital literacy.

5. Tight Deadlines & Solo Ownership:

Managed design, testing, system building, stakeholder alignment, and investor deliverables efficiently.

Impact & Results:

✔ Delivered end-to-end product experience across onboarding, payments, budgets, and multi-account management.

✔ Built a scalable design system that improved consistency, cut design time, and streamlined development.

✔ Simplified flows validated through usability testing, reducing cognitive load and enhancing clarity.

✔ Created high-fidelity prototypes and a Framer site, helping secure $500,000 in initial funding.