problem space
The RHB mobile banking app struggled with unengaging communication that hindered user guidance, highlighting the need for improvements through spot animations.
the scope
To create a blueprint that guides our 20 designers to cohesively design and animate spot illustrations. I was tasked to work on animations, while my colleagues led the illustrations design.
competition
Discovering ideas through competition
The Experience Design team organised a mini-competition for all the designers, evaluating them based on six criteria.
Adherence to design guidelines
Ensure illustrations follow RHB Design System's foundations.
Consistency with existing elements
Evaluate integration with RHB Design System's components.
Principle Setup
Assess if designers have set any principles to their illustrations.
Scalability and responsiveness
Test illustrations for scalability and visual consistency across devices.
Accessibility
Ensuring they are perceivable and understandable by all users.
Structure and Documentation
Evaluate documentation for clarity and alignment with DLS principles.
competition
Pitching spot animation concept
I pitched the idea of spot animations because spot offers a simple yet expressive way to convey concepts.
More Details
competition
Winning the Illustration Competition
I won first prize, and was tasked with two fellow designers to draft spot animation blueprint.
More Details
guidelines
Setting Core Principles
We established the following principles to keep in mind when crafting spot animations.
More Details
Express
Communicate activities, statuses or results of action.
Focused
Draw user’s attention to key messages with animations.
Accessible
Design animations for universal comprehension.
guidelines
Using Animation Strategically
Spot animation should be used selectively, focusing on these three areas only.
More Details
Empty States
Transform empty screens into dynamic experiences.
End Point
Signify task completion with a celebratory visual cue.
Error Screens
Guide users through errors with a positive tone.
guidelines
Creating Spot Color Palette
These tints and shades of RHB's core colors will be used for creating spot illustrations.
animation process
Starting with Adobe AfterEffects
Layered illustrations from Adobe Illustrator were imported into After Effects for animation.
More Details
Good for complex animations with greater flexibility and custom easing.
Complexity and feature-rich nature may be overwhelming for junior designers to create just the Lotties.
Bodymovin plugin may not render the desired Lottie if proper settings are not implemented.
Lacks built-in storage for saving Lottie. External platforms like Lottie Files are still required for hosting.
animation process
Exploring LottieLab for Scalability
I discovered the impressive LottieLab tool and delved into its workflow for crafting Lotties.
More Details
It's free to use with built-in storage for Lotties, avoiding delays from the bank's procurement process.
Less complex compared to After Effects, making it easier for me to teach junior designers.
Also exports as GIF and video, allowing designers to implement it in Figma prototypes.
It has limited features, such as no attachment to parent layers, restricted reveal path capabilities, and no drop shadow support. However, these are rarely used in Lottie creation and may be added later.
Lotties in action ✨
This project taught me key UI animation techniques, including timing, sizing, pacing, easing, and looping effects. Efficiently dividing tasks—two designers focused on illustrations while I handled animation—was crucial for timely Lottie delivery.
All credits to the team, during usability testing of the new mobile banking app, it was observed that users not only found delight in the spot animations but also grasped the messages with precision.
I plan to further contribute to the redesign of the new mobile banking app by creating more spot animations. Additionally, I aim to empower junior designers by providing training on animation techniques, enabling them to independently create Lottie animations for their respective projects.
