The Challenge
Financial applications often suffer from data density overload. Users are presented with tables, charts, and transaction histories that are functional but visually fatiguing. FPT approached Double D Media with a clear directive: make the complex feel simple, and make the static feel alive.
The legacy system was built on a fragmented codebase where design updates took weeks to propagate. Our audit revealed inconsistency in typography, color usage, and interaction patterns across the mobile and web platforms.
Building the System
We started by establishing a core design language we called "Flux". Central to Flux was the idea that financial data flows—it doesn't just sit there. We utilized Tailwind CSS for rapid utility-first styling and created a unified component library.
Typography & Hierarchy
Readability is paramount in fintech. We opted for Geist for headers to provide a modern, technical feel, paired with Inter for UI elements to ensure legibility at small sizes. By strictly defining line-heights and tracking, we reduced cognitive load significantly.
"Double D Media didn't just skin our app; they re-architected how our users perceive their own wealth. The motion design is subtle but effectively guides attention."
Motion with Rive
Static icons were replaced with state-driven Rive animations. When a user completes a transaction, the success state isn't just a green checkmark; it's a fluid animation that reinforces the feeling of completion. Because Rive runs on a vector runtime, these assets are 90% smaller than Lottie files and run at 60fps on low-end devices.
- Performance: Reduced bundle size by 140kb.
- Engagement: 40% increase in "Savings Goal" interactions.
- Consistency: Single animation source for iOS, Android, and Web.
The Outcome
The new interface launched in Q3 2024. Within the first month, user retention increased, and support tickets regarding "navigation confusion" dropped by 22%. This project stands as a testament to the power of combining rigorous design systems with playful, purposeful motion.
Alex Morgan
Lead Product Designer
Specializes in complex system architecture and motion design. passionate about making fintech accessible through cleaner UI.
