How Designit Built a Unified Motion System from 50 UI Icons for Leumi Bank

Designing motion for a product is one thing. Making it consistent across dozens of interactions is something else entirely.

For Leumi Bank’s mobile app, Designit set out to do more than animate icons. The goal was to build a motion system that could scale across the product while staying clear, consistent, and appropriate for a financial experience.

Working as a project creative director, Or Drori translated the icon system into animation and defined how motion behaves across the app.

Key Outcomes and ROI

• 50 UI Icons Brought to Life with Motion

A full set of animations created for a live mobile banking app, covering a wide range of user interactions.

• A unified motion language

Each icon follows a consistent animation style, helping the experience feel cohesive across both critical financial actions and lighter moments.

• Lightweight and mobile ready

All animations were delivered in Lottie format, making them fast to load and easy to integrate into mobile environments.

• Tested in real context from the start

Animations were previewed in the LottieFiles player throughout the process, helping the team understand how they would behave in the actual product and reducing issues during implementation.

The Challenge

The team set out to animate around 50 UI icons used across the mobile banking app. These icons covered everything from core actions like login, payments, and verification, to more expressive moments like gifts, travel, and savings.

One of the main challenges was balancing tone. The icons had a slightly playful feel, but still needed to fit naturally within a financial product. The motion had to support that balance without feeling out of place.

Lottie was chosen not just for visual quality, but because it allows animations to stay lightweight while working reliably across platforms.

Building a Motion System, Not Just Animations

All animations were created in After Effects based on illustrations from the Designit team. Instead of applying a single motion pattern across every icon, each one was approached individually based on its role, while still adhering to a shared motion language across the system.

For example, several icons featured credit cards, but each explored a slightly different motion approach. This helped avoid repetition while maintaining overall consistency.

Some elements required more careful handling. Animations like coin rotation, a Rubik’s cube, or a clam needed to feel believable in terms of timing and perspective, without becoming distracting.

The visual style of the illustrations leaned slightly playful, but was intentionally restrained. The motion followed the same direction, adding subtle character without overpowering the overall experience.

At the same time, there was an intention to bring a sense of personality into the system. These are small interactions, but they still need to land quickly — sometimes through a slightly unexpected movement, a touch of humor, or a small detail that catches the eye. The goal was to introduce character without breaking the overall tone.

Color also played a role. A limited palette helped keep everything visually consistent across the system.

Throughout the process, animations were regularly tested in the LottieFiles preview player so the team could see how everything would behave in a real product environment.

Results

The final result is a set of animations that feel clear, consistent, and well integrated into the product.

Each animation supports its function while contributing to a broader visual system. The app feels more responsive and engaging without relying on excessive motion.

Using Lottie made it possible to keep everything lightweight and mobile friendly, while still maintaining visual precision. It also made collaboration between design and development smoother, making animations easier to integrate into the product.

Alongside the product work, the team also created a series of typographic compositions to showcase the animations in context, extending the system beyond the app itself.

Designer's Tip

When working with UI animation, more is not always better. The real skill is knowing when to stop. Small adjustments in timing, scale, or easing are often enough to give elements personality without breaking consistency.

As Or Drori put it: