Clavaa – Fintech Mobile App UX/UI & Development

A modern approach to financial management, simplifying transactions, budgeting, and payments.

Duration

Ongoing

Location

Uzbekistan

What was done

Full launch

Industry

Media Brand

Project Overview

Clavaa is a fintech mobile application designed to help users manage their finances effortlessly. The app focuses on budgeting, expense tracking, QR-based payments, and financial goal-setting. The primary aim was to empower users with financial clarity by providing seamless, intuitive, and secure digital banking experiences.

The UX/UI design was created to enhance usability, security, and accessibility, ensuring a frictionless financial management experience for all users.

Project Goals & Challenges

Objectives

🔹 Designing an interface that balances functionality and simplicity.
🔹 Optimizing transaction speed & reliability for real-time financial management.
🔹 Ensuring accessibility for users of all financial literacy levels.
🔹 Building trust through security features while maintaining a smooth user experience.

User Research & Insights

To create a human-centered fintech experience, we conducted extensive user research through interviews, surveys, and competitive analysis.

📊 Key Findings from User Research:

  • 80% of users prefer real-time transaction tracking.
  • 70% expressed concerns about financial security & fraud prevention.
  • 65% found traditional budgeting tools complex & difficult to use.
  • 40% preferred QR-based payments over manual entry methods.

🔍 These insights helped us refine our feature set, user journey, and security measures.

User Personas

Two key personas were identified:
1. Taz Kingston (Freelancer, Age 29)

🟢 Goals:
✅ Quick and easy financial transactions.
✅ Budget tracking to manage irregular income.
✅ QR-based payments for fast checkouts.

🟢 Pain Points:
❌ Struggles with budgeting due to fluctuating income.
❌ Finds traditional banking apps cluttered.
❌ Needs faster access to financial insights.

2. Sophia Reyes (Entrepreneur, Age 35)

🔵 Goals:
✅ Manage multiple bank accounts & transactions.
✅ Easily track business expenses & personal spending.
✅ Ensure secure transactions without hidden fees.

🔵 Pain Points:
Security concerns with online transactions.
Difficulty tracking cash flow between personal & business accounts.
❌ Needs better budgeting insights for financial planning

UX/UI Design Process

The UX/UI design followed a structured methodology, ensuring a seamless and visually engaging experience.
1. Wireframing & Prototyping
  • Low-fidelity wireframes were created to map out user flows.
  • High-fidelity UI prototypes were designed to ensure visual clarity.
  • Usability testing & A/B testing were conducted to refine navigation.
2. UI/UX Design Principles

🎨 Typography & Colors

  • Fonts: Clash Display Variable & Plus Jakarta Sans
  • Color Palette:
    • Green (30CA6A): Trust, Growth, Stability
    • Dark Blue (191D41): Professionalism
    • Red (AD0000): Attention, Alerts
    • Purple (643CBB): Modern Financial Aesthetics

📏 Grid System & Layout

  • Mobile Layout: 2-Column Structure (375 x 812px)
  • Tablet Layout: 6-Column Structure (744 x 1133px)
  • Consistent spacing & alignment for improved readability

Key Features & Functionality

1. Wallet & Transaction History

💰 View real-time balance updates.
📊 Track recent transactions with categorized spending insights.
🔍 Filter & search transactions easily.

2. QR-Based Payments

🔹 Instant transactions with QR code scanning.
🔹 Seamless payments across stores supporting digital wallets.
🔹 Transaction receipts & history tracking.

3. Budgeting & Expense Management

📊 Set monthly budget goals and track real-time spending.
📉 AI-driven insights for better financial planning.
💳 Auto-categorization of expenses for easy tracking.

4. Account Creation & Authentication

🔒 Secure account setup with multi-factor authentication (MFA).
🔄 Seamless onboarding process for quick setup.
📂 Multiple bank account linking for consolidated finance tracking.

5. Security & Privacy

🔐 End-to-end encryption for financial transactions.
🛡️ Fraud detection & AI-powered risk monitoring.
Biometric authentication (Face ID, Fingerprint Login).

Frontend

React.js (for a dynamic and responsive UI)

Backend

Node.js & Firebase (for real-time data updates)