Creating LottieFiles for SBI’s newly launched Super Top-Up Health Insurance

Overview

SBI General Insurance is a leading general insurance provider in India, offering a wide range of products across retail, corporate, and rural segments. Backed by the trust of the State Bank of India, it focuses on making insurance accessible, simple, and reliable for millions.

SBI General Insurance launched its Super Top-Up Health Insurance—a product aimed at offering extended coverage beyond basic health plans. To support this launch, I was brought on board to create engaging mascot-based animations that would bring the digital experience to life.

Duration

November 28, 2024- December 20, 2024

Stakeholder

SBI General Insurance

Role

Product Designer (Motion & Visual Design)

Tools

Adobe XD, Adobe Illustrator, Adobe After Effects

Phase 1- Mascot Lottiefiles

The objective was clear: design dynamic and relatable mascot animations that would:

Improve user engagement across the mobile journey

Align with SBI’s branding while feeling modern and energetic

Visually communicate the “supercharged” benefits of the new insurance offering

💡

There wasn’t a need for UX research in this case—the focus was purely creative. The task involved close coordination with the brand and product teams to translate marketing intent into animation flow.

My Role & Process

🙋🏽‍♀️

1. Understanding Animation Requirements

Onboarding journey

Policy benefits walkthrough

In-app loader interactions

2. Storyboarding

Developed quick narrative frames for animation—mapping the character’s movements to the user journey. Key ideas included:

A “Superhero” persona to reinforce the product name

Conceptulaization before actual animation - Clear visual hooks tied to SBI’s color palette and tone

Mascot and shield slides in from outside the frame from opposite directions
Mascot and shield slides in from outside the frame from opposite directions
Mascot and shield slides in from outside the frame from opposite directions
Mascot and shield slides in from outside the frame from opposite directions

3. Creating Lottie Animations

Storyboarding

3. Creating Lottie Animations

Developed quick narrative frames for animation—mapping the character’s movements to the user journey. Key ideas included:

Designed and exported scalable, lightweight LottieFiles animations:

A “Superhero” persona to reinforce the product name

Designed and exported scalable, lightweight LottieFiles animations:

Conceptulaization before actual animation - Clear visual hooks tied to SBI’s color palette and tone

Mascot and shield slides in from outside the frame from opposite directions
Mascot and shield slides in from outside the frame from opposite directions
Mascot and shield slides in from outside the frame from opposite directions
Mascot and shield slides in from outside the frame from opposite directions

3. Creating Lottie Animations

Designed and exported scalable, lightweight LottieFiles animations:

Final Implementation in the super top up health insurance journey

Final Implementation in the super top up health insurance journey

Phase 2- Logo and Loader Animations for SBI general insurance mobile app

SBI General Insurance logo animation

SBI General Insurance logo animation

After

The client was looking for customised loading page animations aligning with the brand style guide for each of their Insurance buying journey

The client was looking for customised loading page animations aligning with the brand style guide for each of their Insurance buying journey

There were total 6 buying journeys : Health, Motor, Cyber, Home and Travel

There were total 6 buying journeys : Health, Motor, Cyber, Home and Travel

The Loader animation was suppose to be an overlay with a black alpha layer on the same screen before switching to the next screen.

The Loader animation was suppose to be an overlay with a black alpha layer on the same screen before switching to the next screen.

Current loader animation screen for all buying jourenys

Challenge :

Create loader animation that aligned with the brand guidelines and have clear visibility with a black alpha overlay screen as shown above

Challenge :

Create loader animation that aligned with the brand guidelines and have clear visibility with a black alpha overlay screen as shown above

Design solution :

I smartly integrated the SBI toggle logo animation with each journey icons, creating clean loader animations achieving the goal of both visibility and consistency in design

Design solution :

I smartly integrated the SBI toggle logo animation with each journey icons, creating clean loader animations achieving the goal of both visibility and consistency in design

Loader animations that did not make it :

Phase 3- SBI general insurance mobile home screen animation requirements

Footer animation - Customer stories

Footer animation - Customer stories

Footer animation - Customer stories

The Process :

Conceptualization & Storyboarding

The Process :

Conceptualization & Storyboarding

The Process :

Conceptualization & Storyboarding

Phase 2- Logo and Loader Animations for SBI general insurance mobile app

SBI General Insurance logo animation

The client was looking for customised loading page animations aligning with the brand style guide for each of their Insurance buying journey

There were total 6 buying journeys : Health, Motor, Cyber, Home and Travel

The Loader animation was suppose to be an overlay with a black alpha layer on the same screen before switching to the next screen.

Current loader animation screen for all buying jourenys

Challenge :

Create loader animation that aligned with the brand guidelines and have clear visibility with a black alpha overlay screen as shown above

Design solution :

I smartly integrated the SBI toggle logo animation with each journey icons, creating clean loader animations achieving the goal of both visibility and consistency in design