problem space
RHB’s transaction funnels were text-heavy and dense, causing users to overlook critical instructions and commit errors in high-stakes fields.
The interface lacked Visual Salience. Static guidance was blending in, failing to provide the active direction required for complex financial logic.
I replaced passive text with purposeful micro-interactions and spot animations. These acted as visual anchors to reduce user hesitation and decrease the cognitive load required to complete the journey.
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 style
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 it offers a simple yet expressive way to convey ideas.
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, status or results of action.
Focused
Draw 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 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.
