Mobile Wallet - Belcorp

Project Context

Belcorp, a multinational cosmetics company, was looking to improve how their sales representatives managed their finances. The solution was a mobile wallet that simplified financial management and significantly enhanced the user experience.

Challenge

Sales representatives were facing difficulties managing customer payments, maintaining financial records, and accessing information about their earnings. This resulted in operational inefficiencies and frustration for the users.

Design System

The design system for Belcorp's Mobile Wallet was built on the pillars of 'Trust and Accessibility', ensuring that sales representatives could manage their finances with complete security.

Color Palette

The primary, secondary, and grayscale colors defining the visual identity.

Belcorp Purple
HEX #722688 RGB 114, 38, 136
Brand color, active states, main buttons
Basic Normal
HEX #485A6B RGB 72, 90, 107
Primary text, headings, dark icons
Basic Disable
HEX #AEAEB2 RGB 174, 174, 178
Disabled states, secondary text, borders
Background Light
HEX #F3F4F6 RGB 243, 244, 246
App backgrounds
Basic White
HEX #FFFFFF RGB 255, 255, 255
Card surfaces, inputs

Typography

Primary Typeface: SF Pro Rounded (Rounded Sans Serif)

Title 24px / 700 Main headers
The quick brown fox jumps over the lazy dog
Body 16px / 400 Reading text
The quick brown fox jumps over the lazy dog
Caption 14px / 300 Metadata & labels
The quick brown fox jumps over the lazy dog

UI Components

Interactive elements utilizing the design tokens (Colors, Typography, Border Radius).

Buttons

Default
Hover (simulated)
Active (simulated)

Form Inputs

Please enter a valid email address.

Solution

We developed an intuitive mobile wallet with the following features:

  • Personalized financial dashboard
  • Real-time payment tracking
  • Simplified transaction management
  • Automatic payment notifications
  • Integration with local banking systems

Design Process

Research

We conducted interviews with over 50 sales representatives to understand their financial needs, pain points, and current workflows.

UX Design

We created user flows, wireframes, and interactive prototypes based on research findings to ensure a smooth and user-centered experience.

UI Design

We developed a cohesive design system aligned with Belcorp's brand identity, using intuitive and accessible visual elements.

Usability Testing

We conducted multiple rounds of testing with actual users to refine the interface and address usability issues before launch.

Results

35%

Increase in financial management efficiency

42%

Reduction in payment recording errors

89%

User satisfaction

This mobile wallet solution transformed financial management for Belcorp's sales representatives while driving significant improvements in company efficiency and profitability. The project demonstrates how strategic UX design can address complex business challenges while enhancing end-user quality of life through thoughtful digital experiences.