Moola™ Budget App
Moola is a native mobile budgeting app concept focused on helping users track spending, manage debt, and build healthier financial habits through a simple, trustworthy experience.
Company
NEXTLEV Digital
Role
Senior UX/UI Designer
Timeline
06/2024 - 10/2024
As the lead UX/UI Designer, I owned product and visual design across the Moola ecosystem, including native mobile flows and a responsive marketing site. My work included competitive and secondary research, onboarding and core user flows, high-fidelity UI, and establishing scalable styles and components to support future growth.
My Role.
Deliverables
Hi-Fidelity Mockups
Interactive Prototypes
MVP Design System Components
Design Tools
Figma
Adobe CC
Productivity Tools
Asana
Figjam
Slack
-
![]()
Role & Collaboration
I owned product and visual design across the Moola ecosystem, including native mobile flows and a responsive marketing site. This also included competitive and secondary research, high-fidelity UI, and establishing scalable styles.
-
![]()
Problem
Many budgeting apps introduce friction through complex onboarding, forced trials, and unclear monetization. Users want flexibility, transparency, and control—especially when managing sensitive financial data on mobile.
-
![]()
Approach
Used secondary research, competitive analysis, and UX heuristics to identify common pain points across budgeting apps. Design decisions emphasized mobile-first patterns, optional onboarding, and progressive disclosure.
-
![]()
Solution & Outcome
Delivered a clean, flexible budgeting experience with optional bank linking, transparent pricing, and a calm visual language designed to build trust and usability. Delivered ancillary app marketing landing page website.
Process
Research & Insights (Secondary)
Reviewed budgeting behaviors, mobile finance usage, and app store reviews. Analyzed competitors including YNAB, EveryDollar, Brigit, Tally, Daily Pocket, and Albert, with Albert serving as the strongest onboarding reference.
Design System Focus
The design system work focused on applying and extending Charlie.ai’s foundational styles and core components within a standalone site, adapting patterns for content-heavy use cases while maintaining consistency with the broader platform and supporting scalability through reuse and governance.
Grid System
A mobile-first grid system was established to ensure consistent spacing, alignment, and hierarchy across screens. The grid supports scalable layouts for financial data while maintaining readability and balance across device sizes.
Type
Fluid/Stretched
Columns
4 / Auto (Mobile)
12 / Auto (Desktop)
Margin/Gutter
16/12
Logo
The logo plays on “moolah” as slang for money with a subtle nod to “moo,” creating a friendly, approachable identity that remains simple and trustworthy for a financial product.
Colors
A restrained color palette was selected to communicate trust, stability, and clarity. Primary and neutral tones support data legibility, while accent colors are used sparingly to highlight key actions and states without visual overload.
Typography
Roboto was chosen as a single-typeface solution for its wide range of weights and styles, supporting clear hierarchy, readability, and scalability across the product without the need for type pairing.
Iconography
Integration of a clean, diverse, and simple line icon for system support, navigation, and feature recognition. Icons reinforce meaning without competing with financial data or primary actions.
Signup & Onboarding
The onboarding experience is designed to be flexible and low-friction, allowing users to progress at their own pace. Bank account linking via Plaid is optional and clearly communicated, supporting trust and user control during setup.
Onboarding & Plaid Bank Sync
Users are guided through a flexible, step-by-step onboarding experience that captures key financial details, including expense categories, recurring bills, debts, and savings goals. Bank accounts can be securely linked via Plaid, with clear privacy cues and the ability to skip steps at any time. A confirmation screen completes setup and introduces next steps, helping users transition seamlessly into managing their budget.
Returning users are brought directly back into their financial overview with minimal interruption. The login flow prioritizes speed and continuity, reinforcing daily, habitual usage. The daily money tip provides short, actionable guidance designed to encourage healthier financial habits.
Returning User Login & Daily Moola Mentor Tip
Some of the core experience is anchored by a dashboard that surfaces key financial insights at a glance, supported by detailed stats, a bill-aware calendar view, and configurable settings that give users control over notifications, preferences, and account connections.
Dashboard, Stats, Calendar & Settings
Moola Marketing App Web Landing Page
The responsive marketing site introduces Moola’s value proposition, explains core features, and provides clear entry points to download the iOS or Android native app, and create a free or premium account. The experience is optimized for both desktop and mobile discovery.
End.
All designs were prototyped and prepared for phased usability testing and handoff. Deliverables include validated flows, scalable UI components, and system foundations to support future iteration.