How Banksalad Builds Human-Centered Financial UX with Motion

Summary

Banksalad is a leading fintech platform built on MyData, offering services across personal finance, loans, cards, insurance, and health. As the company accelerates toward becoming an AI-powered financial agent, BankSalad is deeply focused on elevating interaction quality so users can navigate complex financial moments in a more intuitive, enjoyable, and human way.

At Banksalad, motion is not treated as decoration. It is a core user experience (UX) layer that clarifies intent, guides behavior, and shapes how the brand feels across every touchpoint. By standardizing motion with Lottie, designers and engineers collaborate around a shared motion language, ship expressive animations across iOS, Android, and Web, and scale interaction design without compromising performance.

Key Outcomes & ROI

• Faster design-to-development handoff with production-ready motion assets

• Scalable motion systems that maintain performance across iOS, Android, and Web

• Expressive hybrid and 3D visuals without compromising mobile performance

• $70K in average monthly revenue driven by motion-powered highlight banners

“User experience quality is shaped by the details.”

Sungjoon Hong, Chief Design Officer, Banksalad

At the heart of Banksalad’s brand are three values: honest, meticulous, and delightful. Rather than presenting accurate information through static visuals alone, the team uses animation to bring messages to life and embed them more deeply in users’ memory.

Banksalad’s design team uses Lottie animations across the product to create experiences that feel engaging, helpful, and thoughtful at every touchpoint.

From logo motion on the home screen to animated navigation icons, motion adds life to interactions while delivering each domain’s key message with greater impact. Even in waiting moments such as data loading, carefully crafted motion reduces perceived friction and keeps users engaged.

Efficient Collaboration Between Design and Engineering

Inside the app, Banksalad actively moves beyond static logos and icons by introducing responsive, animated interactions powered by Lottie. If these nuanced motions had to be implemented entirely in code, teams would face both expressive limitations and heavy communication overhead.

With Lottie acting as the bridge, designers can hand off production ready motion directly to developers, preserving creative intent and improving both workflow efficiency and overall product quality.

With LottieFiles, designers build detailed motion in Adobe After Effects and export JSON using the LottieFiles for After Effects plugin. The biggest advantage of this workflow is the ability to preview animations instantly and validate real-world behavior across iOS, Android, and Web.

This early validation helps teams identify potential issues before final asset creation, significantly reducing iteration cycles and saving time and resources.

Because Lottie animations are vector-based, they remain crisp across all screen sizes while keeping file sizes significantly smaller than traditional video formats. Compared to standard video assets, Lottie also enables smoother playback, resulting in more immersive and polished brand experiences.

Scaling Expressive Motion Without Complexity

With a shared workflow in place, Banksalad could focus on where motion delivers the greatest impact: creating expressive, scalable experiences without adding technical complexity. That impact shows up in several key ways:

“Get to work, Mr. Banksalad!” — A Gamified Growth Experience

“Get to work, Mr. Banksalad!l” is an idle growth game inside the app where a character works on behalf of the user and earns rewards over time. Users return occasionally to recharge energy, promote the character, and increase earning power, creating a light yet engaging financial growth loop.

The core UX challenge was designing a system where the character’s hairstyle, glasses, outfits, and accessories evolve precisely with each promotion level. The team needed to maintain fluid and lively animation while efficiently managing countless visual combinations.

Designers defined asset replacement layers within a single Lottie file, while engineers built a system that dynamically swaps graphic assets from the server based on level progression. This allows single Lottie animation to power unlimited variations.

As a result, Banksalad achieved both detailed user experience and operational efficiency, preserving expressive motion while keeping the system scalable and manageable.

Pushing Visual Boundaries with Hybrid Lottie Assets

While Lottie’s vector based format ensures resolution independence and lightweight performance, certain effects such as soft shadows, glow, and subtle blur cannot be fully expressed through vectors alone.

To address these limitations, Banksalad adopted a hybrid workflow. Selected visual elements are rendered individually as high resolution PNG assets, often at double composition scale, and embedded within Lottie JSON files.

These image assets are then combined with vector graphics, allowing the team to balance visual richness with performance. Although file size increases slightly, this approach delivers a cinematic level of polish that would otherwise only be possible in video media.

Through this method, Banksalad expanded the expressive range of interactive motion while maintaining stable mobile performance.

Bringing High-Quality 3D Motion into Interactive Experiences

When introducing 3D graphics into features like Salad Game, Banksalad faced a critical technical challenge: how to deliver charming, high-resolution 3D character animation without increasing resource load or compromising device performance.

To solve this, the team leveraged Lottie’s Optimized JSON format. 3D animations were rendered as PNG image sequences and embedded directly into Lottie files, preserving the visual fidelity of 3D while ensuring lightweight playback.

This technical optimization allowed users to enjoy immersive, high-quality 3D motion without additional data burden or performance trade-offs.

Powering Adaptive AI Experiences with Motion

Topping Plus, Banksalad’s AI agent service, automatically recommends optimal financial actions at the right moment and executes complex processes on behalf of users.

To visualize this intelligence, the team created a dynamic 3D key visual that flexibly transforms based on AI state and contextual signals. The structure of this visual required precise control over form, color, and timing depending on user interaction and system status.

By embedding the 3D sequence into Lottie and enabling programmatic control over specific animation ranges, developers gained fine-grained control through code while preserving the integrity of the designed motion.

This approach blurred the boundary between design and engineering, allowing the AI experience to feel intelligent, responsive, and alive.

$70K in Average Monthly Revenue from Motion-Driven Highlight Banners

Banksalad’s home screen highlight banners communicate key financial benefits at a glance. Based on year-long performance analysis, these motion-driven banners generate an average of $70K in monthly revenue, demonstrating strong and consistent business impact.

This measurable result is driven by Banksalad’s use of impactful motion design powered by Lottie. Motion has been redefined from a visual accent into a powerful storytelling tool that maximizes message clarity and conversion within a user’s brief scanning moment.

Adopting Lottie led to a fundamental shift in the team’s process. Across diverse user contexts that require thoughtful UX design, motion has become a core element for delivering the right message at the right time. As a result, animation is now a foundational component of Banksalad’s product experience rather than an enhancement layered on top.

With Lottie’s flexible and reliable technology, Banksalad will continue creating lively, performance-safe motion while steadily raising the quality of its MyData-driven financial experiences.

A Word from the BX Team

“We brought static designs to life with Lottie. As a result, Banksalad’s dynamic brand value now lives and breathes within users’ everyday experiences.” Moonkyung Park, Brand Designer Lead | Byeongseon Park, Brand Designer | Seungjae Hong, Brand Designer