FinTrack Mobile Wallet App

Designed FinTrack, a mobile wallet app aimed at helping users efficiently manage their personal finances.

Role

UI/UX Designer

Role

UI/UX Designer

Role

UI/UX Designer

Industry

Financial Technology

Industry

Financial Technology

Industry

Financial Technology

Duration

4 weeks

Duration

4 weeks

Duration

4 weeks

app starting
app starting
app starting

Problem Statement

Despite the proliferation of financial apps, many users struggle with cumbersome interfaces and limited functionalities. There is a demand for a mobile wallet app that not only simplifies financial management but also offers an engaging and visually appealing user experience.

User Goal

The goal is to create an app that provides quick access to financial status, insightful spending trends, and secure digital card management.

Target Audience

  1. Young Professionals (Ages 22-35): Tech-savvy individuals early in their careers.

  2. College Students (Ages 18-22): Students managing limited budgets.

  3. Urban Dwellers: People in metropolitan areas prefer digital solutions.

  4. Frequent Travelers: Individuals needing reliable financial management on the go.

  5. Tech Enthusiasts: Users who appreciate modern, innovative design.

Objectives

  1. User-Friendly Interface: Create an intuitive and easy-to-navigate interface.

  2. Visual Appeal: Develop a modern and visually engaging design.

  3. Functionality: Ensure all essential features are easily accessible.

  4. User Engagement: Provide features that engage users and encourage regular use.

Research Insights

To understand the target audience's needs and pain points, conducted surveys, and interviews, and analyzed competitor apps.

  • Users prioritize quick access to their financial status.

  • Visual representations of spending habits are highly valued.

  • Security and privacy are top priorities.

User Persona

From the research, developed a detailed user persona

  • Name: Siya

  • Age: 25

  • Occupation: Marketing Professional

  • Tech-Savvy Level: High

  • Goals: Monitor expenses, save for goals, manage cards and accounts

  • Pain Points: Time-consuming financial tracking, and difficulty in understanding spending patterns.

Problem Statement

Despite the proliferation of financial apps, many users struggle with cumbersome interfaces and limited functionalities. There is a demand for a mobile wallet app that not only simplifies financial management but also offers an engaging and visually appealing user experience.

User Goal

The goal is to create an app that provides quick access to financial status, insightful spending trends, and secure digital card management.

Target Audience

  1. Young Professionals (Ages 22-35): Tech-savvy individuals early in their careers.

  2. College Students (Ages 18-22): Students managing limited budgets.

  3. Urban Dwellers: People in metropolitan areas prefer digital solutions.

  4. Frequent Travelers: Individuals needing reliable financial management on the go.

  5. Tech Enthusiasts: Users who appreciate modern, innovative design.

Objectives

  1. User-Friendly Interface: Create an intuitive and easy-to-navigate interface.

  2. Visual Appeal: Develop a modern and visually engaging design.

  3. Functionality: Ensure all essential features are easily accessible.

  4. User Engagement: Provide features that engage users and encourage regular use.

Research Insights

To understand the target audience's needs and pain points, conducted surveys, and interviews, and analyzed competitor apps.

  • Users prioritize quick access to their financial status.

  • Visual representations of spending habits are highly valued.

  • Security and privacy are top priorities.

User Persona

From the research, developed a detailed user persona

  • Name: Siya

  • Age: 25

  • Occupation: Marketing Professional

  • Tech-Savvy Level: High

  • Goals: Monitor expenses, save for goals, manage cards and accounts

  • Pain Points: Time-consuming financial tracking, and difficulty in understanding spending patterns.

Low-fidelity wireframes
Low-fidelity wireframes
Low-fidelity wireframes
Low-fidelity wireframes
Low-fidelity wireframes

Key Features and Wireframes

  1. Overview of Transactions: Offers a quick visual representation of the user’s financial status, while the transaction list gives detailed information about recent expenditures.

  2. Spending and Savings Insights: The graphical representation of income and expenses helps users visualize their financial trends. The inclusion of savings plans encourages better financial management. The app also offers feedback on spending patterns, motivating users to save more and spend wisely.

  3. Wallet Section: The wallet section displays the user’s added cards and allows for the easy addition of new credit or debit cards.

  4. User Information: A clean and straightforward layout for the profile section ensures users can easily update their information.

Wireframing:

  • Created low-fidelity wireframes for the proposed features.

  • Conducted initial user testing to gather feedback and iterate on designs.

UI Design and Prototypes

The UI design was developed using the wireframes as a foundation. The design aimed to be visually appealing and align with modern design trends.

Color Scheme

  • Dark Blue (#2C2C54): Used for the background, this color provides a strong, modern foundation that ensures high contrast with text and icons, making them easily readable.

  • Teal (#00BCD4): Used for interactive elements like buttons and highlights, teal stands out against the dark background, guiding the user's attention to actionable areas.

    Purple (#673AB7): Applied in gradients and graphical elements, purple adds a touch of vibrancy and dynamism to the interface, making it visually engaging.

  • White (#FFFFFF): Used for text and icons to ensure clarity and readability against the darker background.

Typography: Poppins

  • Clean, modern fonts enhance readability and provide a professional look.

  • Used different weights and font sizes to create a clear hierarchy in the design, making it easier for users to scan information quickly.

  • Headings: Bold or semi-bold weights: This creates a clear hierarchy, guiding users' eyes to the most important information first.

  • Body Text: Medium or regular weights: Ensuring that information is easy to read without causing visual fatigue.

Mockups of the app screen
Mockups of the app screen
Mockup of the app screens
Mockup of the app screens
Mockup of the app screens
Mockups of the app screen
Mockups of the app screen
Mockups of the app screen

Reflections

Working on the FinTrack mobile wallet app was a rewarding experience, offering valuable insights into designing for the fintech industry. This project emphasized the importance of balancing aesthetic appeal with functional clarity, ensuring that users can easily navigate and manage their finances.



Mockups of the app screen
Mockups of the app screen

Other projects