Moola™
Native App & Responsive Landing Page
Moola™ is an easy-to-use, multi-tasking budgeting app concept designed to help users track, manage, save their money, and pay down their debt.
Team
Solo Designer
Role
Sr. Digital Product Designer
Dates
June 2021 - Oct 2021 (3 months)
Discovery research suggests that 73% of smartphone users utilize financial apps to govern their finances. Moola is keen on seizing the opportunity to offer a comprehensive, easy-to-use budgeting app solution. I led the creation of a brand identity and foundational UI styles and components (mini/MVP Design System) from the ground up. These assets were utilized in designing an initial Moola™ responsive startup landing page website and in crafting hi-fidelity mockups for the native app screens.
My Task.
Deliverables
Hi-Fidelity Mockups
Interactive Prototypes
MVP Design System Components
Design Tools
Figma
Adobe CC
Productivity Tools
Asana
Figjam
Slack
Process
Flows
This sample flow summarizes how users initiate the sign-in and registration process, including onboarding with a financial assessment survey and access to a personalized user dashboard with budgeting goals and tracking tools at-a-glance.
Grid System
Choosing a structured grid application was key in providing visual consistency in the user experience. It simplified the design while maintaining a cohesive interface.
Type
Fluid/Stretched
Columns
4 / Auto (Mobile)
12 / Auto (Desktop)
Margin/Gutter
16/12
Logo
We chose a clean logo mark & logo type incorporating the brand color palette. This choice ensures a harmonious and understated integration into both the app and web landing page designs, with the goal of providing a consistent and visually appealing user experience.
Colors
We selected a minimal and bold color palette for the Moola brand to emphasize simplicity and evoke a sense of confidence, in line with our brand identity.
Typography
A single typeface (Roboto) ensured a consistent and visually pleasing text style throughout the designs. This enhanced readability and maintained a polished appearance for users.
Iconography
Integration of a clean, diverse, and simple line icon style enhanced efficiency, user understanding, and uniformity.
Login & Registration
A user-centric login, registration, and onboarding process, to promote a seamless user experience was iterated. This simplified approach enables users to access the app, create an account, and set up their profile effortlessly.
Onboarding & Assessment
After registration, users complete a financial assessment survey. Upon completion, they access their budgeting dashboard, where they can manage budget categories, track expenses, set goals, receive advice, and monitor financial progress.
Responsive Web Landing Page
Our responsive web landing page design ensures smooth adaptation to various devices, simplifying development and providing a uniform user experience.
End.
The completed deliverables were prototyped & prepped for use in phased usability testing, which was the next stage of the project.