Belva.
Back to Works
PWA

U.Digi

High-Fidelity UI Slicing of Digital E-Wallet App

#React#CSS Slicing#Figma to Code#WebStorage API#Responsive Layout

01. Problem Identification

The digital payment ecosystem is heavily fragmented, forcing users to manage multiple independent e-wallet applications to send money to different providers (e.g., GoPay, OVO, Dana). Switching apps increases transaction drop-off rates, increases transfer fee overhead, and creates complex UI friction that lowers customer retention and digital transaction velocity.

PAIN POINT 01

High fragmentation requiring users to switch between multiple interfaces for cross-wallet transactions.

PAIN POINT 02

Complex, cluttered payment screens that create cognitive anxiety and increase manual input errors.

PAIN POINT 03

High business transaction drop-off rates due to slow, non-unified inter-wallet transfer processes.

02. The Solution

U.Digi solves inter-wallet fragmentation by offering a single, frictionless portal that aggregates balance tracking, top-ups, and instant transfers to different users and multiple e-wallet providers, eliminating the need to jump between separate apps and reducing business transaction drop-off rates.

Unified Transfer Gateway

Consolidates transfers to different target providers (GoPay, OVO, Dana) inside a single-page transaction flow.

Frictionless Visual Slicing

A highly optimized, mobile-responsive layout that minimizes cognitive load and speeds up input entry.

Client-Side State Ledger

Simulates instant transaction updates and wallet balance persistence using LocalStorage to emulate real-time core ledger sync.

03. Crafting & Engineering

System Architecture Flow

#01React SPA (Slicing)Interface layer converting design concepts into responsive layouts
React / CSS Modules
#02WebStorage LedgerLocal database simulation persisting balance and transaction logs
LocalStorage API

Technology Selection

React SPAAllows building encapsulated visual elements (Cards, Buttons, Balance Panels) that update states reactively.
CSS Flexbox / GridGuarantees that overlapping digital credit cards and transaction charts fit dynamically inside the grid.
LocalStorage APIPersists simulated transaction states and wallet balances across browser sessions without setup overhead.

Key Engineering Challenges Solved

  • Perfecting absolute-position card overlays to scale proportionally without clipping typography.
  • Mimicking transaction pipelines (authenticating inputs, subtracting balances, appending logs) entirely on the client-side.
  • Refining custom icons and graphical elements to preserve alignment coordinates across mobile browsers.