NovaPay
NovaPay’s complete redesign aimed to simplify complex payment flows while creating a cohesive and modern brand identity. The project involved restructuring the navigation system, streamlining the user journey, and crafting a visual style that resonates with both personal and business users.
UI/UX Design
Jakarta, Indonesia
Overview
NovaPay is a fintech platform enabling seamless digital transactions for individuals and businesses. When they approached us, their user interface felt outdated and inconsistent, creating friction in navigation and reducing user trust.
Challenge
NovaPay’s old interface was cluttered, with inconsistent UI elements and no clear visual hierarchy. Users often struggled to find essential actions like sending payments or checking balances. The challenge was to redesign the product in a way that balanced robust functionality with a simple.
Outcome
The redesigned NovaPay experience resulted in a 45% increase in user satisfaction and a 28% decrease in transaction errors. The new UI reduced cognitive load by prioritizing the most-used features, improved accessibility standards, and introduced micro-interactions to make every transaction feel responsive and secure.
Design System Implementation
We developed a comprehensive UI design system including color palettes, typography scales, iconography, and interactive components. These scalable elements were applied across mobile and web platforms, ensuring visual consistency and speeding up future development.
Tone & Visual Direction
We crafted a visual direction that blended trust and innovation—cool blues and clean gradients signifying reliability, paired with vibrant accent colors to highlight key actions. Generous whitespace, clear typography, and subtle motion effects gave NovaPay a modern & human-centered feel.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 0 32 L 32 0 M 32 0 L 8 0 M 32 0 L 32 24" fill="transparent" height="32px" id="UQfFcYMar" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(19, 19, 19)" transform="translate(4 4)" width="32px"/></svg>)
