Overview

Light is an AI-powered personal finance mobile app designed to bring clarity to users' financial lives. The app combines smart budgeting tools, financial goal tracking, and an AI assistant that analyzes spending patterns and delivers daily personalized financial advice.

The client came to Masterly with wireframes and a product concept. They needed a design partner to transform their vision into a polished, user-friendly mobile app prototype ready for development.

Masterly delivered complete UX/UI design — from brand identity and customer journey mapping to a fully interactive prototype that exceeded client expectations.

The Challenge

Transforming rough wireframes into a production-ready mobile app design presented several challenges:

Conceptual to Functional

‍The initial wireframes captured the idea but lacked the detail needed for development. Masterly needed to fill gaps in user flows, define interactions, and create a complete design system.

Balancing AI Complexity with Simplicity

‍AI-powered finance apps risk overwhelming users with data. The interface needed to present smart insights without adding cognitive load — making complex financial analysis feel simple and actionable.

Building Trust Through Design

‍Personal finance apps handle sensitive data. The visual design needed to communicate security, reliability, and professionalism while remaining approachable and engaging.

Creating Brand Identity from Scratch

‍Beyond UI, the client needed a complete brand identity including logo that would capture the app's mission of bringing "light" to financial management.

Masterly's Design Process

Masterly followed a structured methodology to transform wireframes into a polished product design:

Customer Journey Mapping

‍Despite starting with client wireframes, Masterly mapped the complete user journey to identify gaps and optimization opportunities. This ensured every touchpoint — from onboarding to daily engagement — was designed with user needs in mind.

Logo & Brand Identity

‍Masterly designed the "Light" logo to encapsulate the essence of illumination in finance. The design draws inspiration from lamp and lighter forms — smooth, flowing shapes that symbolize clarity and brightness. The vibrant orange hue emphasizes energy and enlightenment, reflecting the app's mission to guide users through financial complexity.

Information Architecture

‍Masterly structured the app around core user needs: seeing financial overview at a glance, tracking progress toward goals, and receiving actionable AI insights. The navigation prioritizes the most frequent actions while keeping secondary features accessible.

UI Design & Visual System

‍Masterly created a clean, modern interface with clear visual hierarchy. Dynamic graphs use intuitive color coding to highlight income and spending trends. The design balances data density with whitespace to prevent overwhelm.

Human-Centered Imagery

‍Masterly selected illustrations that make financial goals tangible and motivating — mountain trips, vacations, property. These relatable visuals transform abstract savings targets into personal aspirations.

Interactive Prototyping

‍Masterly delivered a complete Figma prototype with all interactions defined, enabling the client to test flows and gather feedback before development investment.

Key Design Solutions

Dashboard Design

‍The main dashboard provides users with comprehensive financial overview through clear balance display and dynamic graphs. Users can switch between yearly, monthly, and custom views, manage multiple accounts, and monitor expenses — all through an intuitive interface with bottom navigation for seamless access.

AI Integration UX

‍The AI assistant surfaces daily financial insights without interrupting user flow. Advice appears contextually — relevant tips when viewing spending categories, encouragement when approaching savings goals, alerts when unusual patterns emerge.

Goal Tracking System

‍Visual progress indicators make saving tangible. Users see exactly how close they are to their mountain trip or new home, with AI providing personalized strategies to reach goals faster.

Onboarding Flow

‍Masterly designed progressive onboarding that collects necessary financial information without overwhelming new users. Each step explains why data is needed and how it improves personalization.

The Outcome

Masterly delivered a complete mobile app design that transformed the client's wireframe concept into a polished, development-ready prototype.

The final design exceeded client expectations — creating a user-friendly, visually appealing interface that communicates trust while making financial management feel approachable and even enjoyable.

The project demonstrates Masterly's ability to take early-stage concepts and elevate them into professional product designs ready for engineering handoff.

Deliverables

Masterly delivered complete design package for Light finance app:

• Logo & Brand Identity
• Customer Journey Map
• Information Architecture
• Complete UI Design (all screens)
• Design System & Components
• Interactive Figma Prototype
• Design specifications for development

‍