MONPLE

Mobile App UI/UX Design

PHASE 1: Research & Understanding

Challenge

Design a mobile experience that simplifies personal finance management, providing users with an intuitive and accessible tool to track their finances effectively.

Deliverables

User Personas, Site Map, User Flows, Ideation, Sketches, UI Design, Prototype

Role

Product Designer

Goals and Objectives

The goal was to create a seamless mobile experience that simplifies budgeting and expense tracking, enabling users to manage their finances with ease and efficiency.

Explore Detailed Goals & Objectives

Challenges

Integrating Simplicity with Functionality – Ensuring the app is easy to use while offering essential features users want.

User Onboarding – Designing a welcoming experience for new users without overwhelming them.

Interface Design – Creating a visually appealing, simple interface that accommodates various input methods like voice and receipt scanning.

Process

My approach started with understanding user pain points through research. I then analyzed the findings to define core product tasks. From there, I created UI sketches, tested them with users, and refined the designs into a high-fidelity prototype.

Research and Understanding

Objective: To understand users' financial habits, preferences, and pain points, informing the design and development of the Monple app.

Methodology

Conducted a combination of surveys and interviews to gather qualitative and quantitative insights from diverse user groups such as students, freelancers, and young professionals.

Research Questions

  1. How often do you track your expenses?
  2. What tools or apps do you currently use for personal finance?
  3. What features are most important to you in a finance app?
  4. What frustrates you most about current apps or methods?

Interview Highlights

Interview Highlights

Conclusion of Research

The synthesis of these insights informed the design direction, highlighting the need for simplicity, automation, and intuitive visual tools in the Monple app.

Personas

Based on research, I created user personas to guide design decisions throughout the process, focusing on user needs and preferences for a simplified interface and diverse input methods.

Persona: Daniel
Persona: Abdullah
Persona: Nasser

Empathy Mapping

Created empathy maps to visualize user emotions, needs, and thoughts.

Empathy Map: Daniel
Empathy Map: Abdullah
Empathy Map: Nasser

Competitor Analysis

Analyzed competitors like YNAB and Goodbudget to identify design elements that work well and potential pitfalls.

SWOT Analysis

Identified strengths, weaknesses, opportunities, and threats to inform strategic planning.

SWOT Analysis
Explore SWOT Analysis in Depth

PHASE 2: Define & Ideate

General Problem Statement

Many individuals struggle with tracking their daily finances effectively, often relying on pen and paper or generic apps that are time-consuming, unclear, overwhelming. This app will provide a simple, user-friendly solution tailored to their needs, helping users track earnings and expenses seamlessly.

Project Goals & Objectives

Create an intuitive design, solve user pain points, ensure user attraction and retention, and plan for scalability.

Dive Deeper into Project Goals

Ideation Techniques

Mind Mapping

Mind Map

Crazy 8s

Crazy 8s Technique

Sketching

Sketches

Mini Case Study

A detailed examination of the design thinking process that led to the final solution.

Discover Design Process Case Study

User Stories & User Scenarios

Created user stories and scenarios to anticipate how users would interact with features like manual input, voice assistant, and receipt scanner.

Explore User Stories & Scenarios

PHASE 3: IA & Wireframing

Information Architecture

Developed IA using Xminds to map out the app structure.

Information Architecture

Sitemap

Created detailed sitemap using Lucidchart.

Sitemap

Wireframes

Produced low-fidelity wireframes to outline the user flow.

Wireframe 1
Wireframe 2

PHASE 4: Visual Design & Prototyping

Lo-Fi Prototype with Design Elements

Expanded on the wireframes by integrating colors and icons. This provided a preliminary view of the app's aesthetic, allowing for experimentation with color palettes and thematic elements.

Lo-Fi Prototype 1
Lo-Fi Prototype 2

Development of a Style Guide

Established a comprehensive style guide to ensure visual consistency across the app's interface, detailing color schemes, typography, and iconography.

High-Fidelity Mockups

Transitioned from low-fi to high-fi prototypes, incorporating detailed design specifications and interaction elements to closely simulate the final user experience.

Hi-Fi Mockup 1
Hi-Fi Mockup 2

Prototyping Video

PHASE 5: Testing & Iteration

Purpose

The main goal was to collect initial user impressions and identify any areas for immediate improvement or clarification in the user experience.

Feedback Summary

Positive Reception

Users found the app intuitive and appreciated the clear display of information.

Smart Feature Highlight

Friends noted the integration of the AI assistant as a smart and innovative feature, enhancing the ease of logging expenses.

User Engagement

The app was perceived as functional, with users expressing satisfaction at how quickly they could add expenses and income.

Conclusion

The Monple app successfully addresses core user needs, providing a user-friendly solution for managing personal finances. By maintaining a simple yet effective design, the app facilitates seamless budgeting and expense tracking, aligning with the initial project goals. This portfolio project showcases not only my design skills and user-centered approach but also demonstrates my ability to create practical solutions to real-world problems.

Afterthought

Working on the Monple project has been both challenging and enlightening. Navigating through user research, design iterations, and feedback was an invaluable learning experience. I discovered the power of user-centric design and validated how small adjustments can lead to significant enhancements in user experience. The journey reaffirmed the necessity of flexibility and adaptability in UX design, especially when integrating innovative features like AI assistants. Moving forward, I look forward to applying these insights to create even more intuitive and impactful solutions.

More Projects

E-commerce Beauty Site

This project showcases my frontend development skills with a focus on creating responsive, user-friendly e-commerce experiences.
GymHub Project
Coming Soon

GymHub

This upcoming project focuses on creating seamless social experience with motivational elements to enhance user engagement for gym-goers.
Lila's Boutique Store
Coming Soon

Lila's Boutique Store

This development project will demonstrate advanced e-commerce functionality with a focus on performance and conversion optimization.

Interested in Working Together?

Let's discuss how I can help bring your ideas to life.

Get In Touch