Start New Transfer
Transfer funds easily with the options below.
Start New Request
Request money easily with the options below.
Start New Payment
Pay bills easily with the options below.
No Results Found
We couldn’t find any results.
Please try searching again.
Access Not Granted
Enable access to your contacts now via Settings to transfer easier and faster.
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
Transfer cancelled!
We were not able complete your transfer.
Please try again!
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our 24-Hour Customer Service line.
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our 24-Hour Customer Service line.
Transfer cancelled!
We were not able complete your transfer.
Please try again!
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
Access Not Granted
Enable access to your contacts now via Settings to transfer easier and faster.
No Results Found
We couldn’t find any results.
Please try searching again.
Start New Payment
Pay bills easily with the options below.
Start New Request
Request money easily with the options below.
Start New Transfer
Transfer funds easily with the options below.
Spot animations for
RHB mobile banking app
Case Study
Let's get started 🚀
Context
The RHB mobile banking app is transitioning to React Native to overcome current platform's limitations that are holding business teams from offering innovative services. As Experience Design team, the transition opens doors for us to explore new ways to delight our users, with spot animations being one of them. Eager to polish my animation skills, I volunteered to create engaging and guiding animations for this project.
The Scope
Three designers in the team, myself included, created an illustration documentation as a blueprint for designing and animating illustrations in our projects. This document aimed to guide our 17 other Experience Design team members in crafting illustrations for their projects. My 2 colleagues chose to focus on designing illustrations, while I volunteered to animate them.
Tools
Lottie Lab
Adobe AfterEffects
Lottie Files
The Crew & Roles
Animations by Shehryar
Approval by Head of Design
Approval by SH of Design I
Approval by SH of UI Design II
Illustrations by Cody
Illustrations by Benson
competition
Illustration competition
The Experience Design team organised a mini-competition for illustrations, intending to gather ideas from designers.
The goal was to choose a team of designers responsible for creating illustration documentation across all our projects. The ideas were evaluated based on five criteria.
Adherence to design guidelines
Assess if illustrations align with DLS design guidelines, considering RHB's color schemes, typography, grid systems, and visual style.
Consistency with existing elements
Evaluate the illustrations' alignment with DLS design elements, ensuring seamless integration and complementarity to the overall system.
Principle Setup
Assess if they have set any principles to their illustrations.
Scalability and responsiveness
Evaluate the illustrations' scalability across devices and screen sizes, ensuring adaptability and visual integrity.
Accessibility
Assess illustrations for accessibility, ensuring they are perceivable, understandable, and inclusive for all users, with necessary alternative text.
Structure and Documentation
Evaluate the documentation's quality and completeness for each illustration. Designers should articulate their choices, explaining alignment with DLS principles.
competition
Concept Pitching
I pitched the idea of spot animations because spot offers a simple yet expressive way to convey concepts.
I proposed animating only the essential elements in the illustration, enabling users to swiftly grasp the message by focusing on the animated element alone. Additionally, I also provided principles and resources for creating spot animations. These are the slides I presented to pitch my concept.
competition
Competition Results
I secured the first prize, and a team of three designers, myself included, was tasked to formulate spot illustration and animation documentation.
This document will act as a blueprint for fellow designers, vendors, and marketing agencies, guiding them in creating illustrations and animations for the RHB digital ecosystem.
guidelines
Principles
A fundamental principle is to animate only the key elements in a spot illustration, as opposed to every element.
In addition to this, we established the following principles to keep in mind when crafting spot animations.
Express
Communicate activities, statuses or results of an action.
Focused
Draw user’s attention to key messages with animations.
Accessible
Make focus animations easy to understand for all users.
guidelines
Usage
Spot animation should not be applied universally or indiscriminately.
The objective is not merely to enhance the interface's visual appeal but to direct the user's attention to crucial elements for instant message comprehension. To illustrate, we developed specific use-cases, including:
Empty States
To transform empty screens into dynamic engaging experiences.
End Point
To signify task completion, providing a satisfying and celebratory visual cue.
Error Screens
To help users understand the issue and maintain a positive interaction despite errors.
guidelines
Color Palette
When generating a color palette for the spot, we generated tints and shades by adjusting the saturation and brightness levels of the core colors in RHB brand.
Accent Blue
10
#EBF7FF
20
#DEF1FF
30
#BBE3FF
40
#99D4FF
50
#78C5FF
60
#5CB5F9
70
#3D9EE9
80
#258BDD
90
#0B77CA
100
#0067B1
200
#0158A0
300
#004B90
400
#003D75
500
#003362
Accent Red
10
#FFEEEE
20
#FED7DB
30
#FEC0C9
40
#FDA9B6
50
#FC91A3
60
#FC7A91
70
#FB637E
80
#F85A6F
90
#F55160
100
#EF3E42
200
#D72F32
300
#BF1F21
400
#A61011
500
#8E0000
Green
10
#F0F9ED
20
#F0F9ED
30
#D3EDC9
40
#C4E7B7
50
#B5E1A4
60
#A7DA92
70
#98D480
80
#89CE6E
90
#7BC85C
100
#6CC24A
200
#54AF30
300
#2B8809
400
#065C00
500
#004300
Orange
10
#F0F9ED
20
#F0F9ED
30
#D3EDC9
40
#C4E7B7
50
#B5E1A4
60
#A7DA92
70
#98D480
80
#89CE6E
90
#7BC85C
100
#6CC24A
200
#54AF30
300
#2B8809
400
#065C00
500
#004300
animation process
Started with Adobe AfterEffects
Upon receiving the illustrations from my colleagues in Adobe Illustrator, I separated the layers required for animation and then imported them into After Effects as a composition with retained layers.
After completing the spot illustration animations, I used the Bodymovin plugin to export them in Lottie JSON format. Although this is a standard industry process, I also explored alternative platforms that offer quick creation and free storage of Lottie animations, eliminating the necessity for a paid Lottie files subscription because the procurement process in bank is tedious.
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
Let's explore LottieLab
I discovered the impressive LottieLab tool and delved into its workflow for crafting Lotties.
The interface and features closely resembled Figma, enabling the import of assets in SVG and PNG formats. Notably, it offers easing presets such as linear, natural, slow, accelerate, bounce in, and the particularly captivating bounce out.
It's free to use and provides built-in storage for saving Lotties. This spares me from going through the bank's tedious procurement process, which may have caused delays in releasing animations on the new mobile banking app.
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; for instance, there's no attachment to the parent layer, and the reveal path feature has restricted capabilities. Additionally, it doesn't allow layers or objects to have drop shadows. However, these features are seldom used in Lottie creation, and there's a possibility that they might become available in the future.
Lotties in action ✨
Close
RHB Mobile Banking is
Currently UnavailableWe’ll be online again at:
Sunday 12 November 2023, 12.15AMIf you require assistance, call our
24-Hour Customer Service line.
18:05
Start New Transfer
Transfer funds easily with the options below.
Transfer
18:05
New Transfer
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Request Money
Start New Request
Request money easily with the options below.
18:05
New Request
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Transfer To
Start New Payment
Pay bills easily with the options below.
18:05
New Payment
JomPAY
Other Billers
Abcde
Clear
Transfer To
No Results Found
We couldn’t find any results.
Please try searching again.
18:05
Enter mobile number
Transfer To
Access Not Granted
Enable access to your contacts now via
Settings to transfer easier and faster.
Open Settings
18:05
Enter mobile number
Transfer To
No Contacts Yet
We can’t find anything. Enter mobile number
below to select a contact.
18:05
0123456789
Clear
Transfer To
Transfer to this number?
+6 0123456789
Yes, Transfer Now
18:05
0123456789
Clear
Transfer To
This mobile number is not
registered with DuitNow.
+6 0123456789
18:05
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
18:05
Make New Transfer
Transfer cancelled!
We were not able complete your transfer.
Please try again!
18:05
Call Customer Service
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our
24-Hour Customer Service line.
18:05
Close
RHB Mobile Banking is
Currently UnavailableWe’ll be online again at:
Sunday 12 November 2023, 12.15AMIf you require assistance, call our
24-Hour Customer Service line.
18:05
Start New Transfer
Transfer funds easily with the options below.
Transfer
18:05
New Transfer
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Request Money
Start New Request
Request money easily with the options below.
18:05
New Request
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Transfer To
Start New Payment
Pay bills easily with the options below.
18:05
New Payment
JomPAY
Other Billers
Abcde
Clear
Transfer To
No Results Found
We couldn’t find any results.
Please try searching again.
18:05
Enter mobile number
Transfer To
Access Not Granted
Enable access to your contacts now via
Settings to transfer easier and faster.
Open Settings
18:05
Enter mobile number
Transfer To
No Contacts Yet
We can’t find anything. Enter mobile number
below to select a contact.
18:05
0123456789
Clear
Transfer To
Transfer to this number?
+6 0123456789
Yes, Transfer Now
18:05
0123456789
Clear
Transfer To
This mobile number is not
registered with DuitNow.
+6 0123456789
18:05
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
18:05
Make New Transfer
Transfer cancelled!
We were not able complete your transfer.
Please try again!
18:05
Call Customer Service
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our
24-Hour Customer Service line.
18:05
Close
RHB Mobile Banking is
Currently UnavailableWe’ll be online again at:
Sunday 12 November 2023, 12.15AMIf you require assistance, call our
24-Hour Customer Service line.
18:05
Start New Transfer
Transfer funds easily with the options below.
Transfer
18:05
New Transfer
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Request Money
Start New Request
Request money easily with the options below.
18:05
New Request
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Transfer To
Start New Payment
Pay bills easily with the options below.
18:05
New Payment
JomPAY
Other Billers
Abcde
Clear
Transfer To
No Results Found
We couldn’t find any results.
Please try searching again.
18:05
Enter mobile number
Transfer To
Access Not Granted
Enable access to your contacts now via
Settings to transfer easier and faster.
Open Settings
18:05
Enter mobile number
Transfer To
No Contacts Yet
We can’t find anything. Enter mobile number
below to select a contact.
18:05
0123456789
Clear
Transfer To
Transfer to this number?
+6 0123456789
Yes, Transfer Now
18:05
0123456789
Clear
Transfer To
This mobile number is not
registered with DuitNow.
+6 0123456789
18:05
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
18:05
Make New Transfer
Transfer cancelled!
We were not able complete your transfer.
Please try again!
18:05
Call Customer Service
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our
24-Hour Customer Service line.
18:05
Close
RHB Mobile Banking is
Currently UnavailableWe’ll be online again at:
Sunday 12 November 2023, 12.15AMIf you require assistance, call our
24-Hour Customer Service line.
18:05
Start New Transfer
Transfer funds easily with the options below.
Transfer
18:05
New Transfer
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Request Money
Start New Request
Request money easily with the options below.
18:05
New Request
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Transfer To
Start New Payment
Pay bills easily with the options below.
18:05
New Payment
JomPAY
Other Billers
Abcde
Clear
Transfer To
No Results Found
We couldn’t find any results.
Please try searching again.
18:05
Enter mobile number
Transfer To
Access Not Granted
Enable access to your contacts now via
Settings to transfer easier and faster.
Open Settings
18:05
Enter mobile number
Transfer To
No Contacts Yet
We can’t find anything. Enter mobile number
below to select a contact.
18:05
0123456789
Clear
Transfer To
Transfer to this number?
+6 0123456789
Yes, Transfer Now
18:05
0123456789
Clear
Transfer To
This mobile number is not
registered with DuitNow.
+6 0123456789
18:05
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
18:05
Make New Transfer
Transfer cancelled!
We were not able complete your transfer.
Please try again!
18:05
Call Customer Service
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our
24-Hour Customer Service line.
18:05
What I learnt!
Reflecting on this project, I gained valuable insights into UI animation techniques, specifically in the areas of timing, sizing, pacing, easing, and creating looping effects. Given that it was an additional task on top of our daily workload, efficiently dividing responsibilities among the three designers—assigning two to focus on designing illustrations while I concentrated on animation—proved instrumental in timely delivery of Lotties.
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.
Start New Transfer
Transfer funds easily with the options below.
Start New Request
Request money easily with the options below.
Start New Payment
Pay bills easily with the options below.
No Results Found
We couldn’t find any results.
Please try searching again.
Access Not Granted
Enable access to your contacts now via Settings to transfer easier and faster.
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
Transfer cancelled!
We were not able complete your transfer.
Please try again!
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our 24-Hour Customer Service line.
RHB Mobile Banking is
Currently UnavailableIf you require assistance, call our 24-Hour Customer Service line.
Transfer cancelled!
We were not able complete your transfer.
Please try again!
Successful Transfer
You’ve transferred JOLYNN SIM/****1615 - RHB MYR 10.00 on 27/8/2024 8:41:30 AM.
Access Not Granted
Enable access to your contacts now via Settings to transfer easier and faster.
No Results Found
We couldn’t find any results.
Please try searching again.
Start New Payment
Pay bills easily with the options below.
Start New Request
Request money easily with the options below.
Start New Transfer
Transfer funds easily with the options below.
Spot animations for
RHB mobile banking app
Case Study
Let's get started 🚀
Context
The RHB mobile banking app is transitioning to React Native to overcome current platform's limitations that are holding business teams from offering innovative services. As Experience Design team, the transition opens doors for us to explore new ways to delight our users, with spot animations being one of them. Eager to polish my animation skills, I volunteered to create engaging and guiding animations for this project.
The Scope
Three designers in the team, myself included, created an illustration documentation as a blueprint for designing and animating illustrations in our projects. This document aimed to guide our 17 other Experience Design team members in crafting illustrations for their projects. My 2 colleagues chose to focus on designing illustrations, while I volunteered to animate them.
Tools
Lottie Lab
Adobe AfterEffects
Lottie Files
The Crew & Roles
Animations by Shehryar
Approval by Head of Design
Approval by SH of Design I
Approval by SH of UI Design II
Illustrations by Cody
Illustrations by Benson
competition
Illustration competition
The Experience Design team organised a mini-competition for illustrations, intending to gather ideas from designers.
The goal was to choose a team of designers responsible for creating illustration documentation across all our projects. The ideas were evaluated based on five criteria.
Adherence to design guidelines
Assess if illustrations align with DLS design guidelines, considering RHB's color schemes, typography, grid systems, and visual style.
Consistency with existing elements
Evaluate the illustrations' alignment with DLS design elements, ensuring seamless integration and complementarity to the overall system.
Principle Setup
Assess if they have set any principles to their illustrations.
Scalability and responsiveness
Evaluate the illustrations' scalability across devices and screen sizes, ensuring adaptability and visual integrity.
Accessibility
Assess illustrations for accessibility, ensuring they are perceivable, understandable, and inclusive for all users, with necessary alternative text.
Structure and Documentation
Evaluate the documentation's quality and completeness for each illustration. Designers should articulate their choices, explaining alignment with DLS principles.
competition
Concept Pitching
I pitched the idea of spot animations because spot offers a simple yet expressive way to convey concepts.
I proposed animating only the essential elements in the illustration, enabling users to swiftly grasp the message by focusing on the animated element alone. Additionally, I also provided principles and resources for creating spot animations. These are the slides I presented to pitch my concept.
competition
Competition Results
I secured the first prize, and a team of three designers, myself included, was tasked to formulate spot illustration and animation documentation.
This document will act as a blueprint for fellow designers, vendors, and marketing agencies, guiding them in creating illustrations and animations for the RHB digital ecosystem.
guidelines
Principles
A fundamental principle is to animate only the key elements in a spot illustration, as opposed to every element.
In addition to this, we established the following principles to keep in mind when crafting spot animations.
Express
Communicate activities, statuses or results of an action.
Focused
Draw user’s attention to key messages with animations.
Accessible
Make focus animations easy to understand for all users.
guidelines
Usage
Spot animation should not be applied universally or indiscriminately.
The objective is not merely to enhance the interface's visual appeal but to direct the user's attention to crucial elements for instant message comprehension. To illustrate, we developed specific use-cases, including:
Empty States
To transform empty screens into dynamic engaging experiences.
End Point
To signify task completion, providing a satisfying and celebratory visual cue.
Error Screens
To help users understand the issue and maintain a positive interaction despite errors.
guidelines
Color Palette
When generating a color palette for the spot, we generated tints and shades by adjusting the saturation and brightness levels of the core colors in RHB brand.
Accent Blue
10
#EBF7FF
20
#DEF1FF
30
#BBE3FF
40
#99D4FF
50
#78C5FF
60
#5CB5F9
70
#3D9EE9
80
#258BDD
90
#0B77CA
100
#0067B1
200
#0158A0
300
#004B90
400
#003D75
500
#003362
Accent Red
10
#FFEEEE
20
#FED7DB
30
#FEC0C9
40
#FDA9B6
50
#FC91A3
60
#FC7A91
70
#FB637E
80
#F85A6F
90
#F55160
100
#EF3E42
200
#D72F32
300
#BF1F21
400
#A61011
500
#8E0000
Green
10
#F0F9ED
20
#F0F9ED
30
#D3EDC9
40
#C4E7B7
50
#B5E1A4
60
#A7DA92
70
#98D480
80
#89CE6E
90
#7BC85C
100
#6CC24A
200
#54AF30
300
#2B8809
400
#065C00
500
#004300
Orange
10
#F0F9ED
20
#F0F9ED
30
#D3EDC9
40
#C4E7B7
50
#B5E1A4
60
#A7DA92
70
#98D480
80
#89CE6E
90
#7BC85C
100
#6CC24A
200
#54AF30
300
#2B8809
400
#065C00
500
#004300
animation process
Started with Adobe AfterEffects
Upon receiving the illustrations from my colleagues in Adobe Illustrator, I separated the layers required for animation and then imported them into After Effects as a composition with retained layers.
After completing the spot illustration animations, I used the Bodymovin plugin to export them in Lottie JSON format. Although this is a standard industry process, I also explored alternative platforms that offer quick creation and free storage of Lottie animations, eliminating the necessity for a paid Lottie files subscription because the procurement process in bank is tedious.
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
Let's explore LottieLab
I discovered the impressive LottieLab tool and delved into its workflow for crafting Lotties.
The interface and features closely resembled Figma, enabling the import of assets in SVG and PNG formats. Notably, it offers easing presets such as linear, natural, slow, accelerate, bounce in, and the particularly captivating bounce out.
It's free to use and provides built-in storage for saving Lotties. This spares me from going through the bank's tedious procurement process, which may have caused delays in releasing animations on the new mobile banking app.
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; for instance, there's no attachment to the parent layer, and the reveal path feature has restricted capabilities. Additionally, it doesn't allow layers or objects to have drop shadows. However, these features are seldom used in Lottie creation, and there's a possibility that they might become available in the future.
Lotties in action ✨
Close
RHB Mobile Banking is
Currently UnavailableWe’ll be online again at:
Sunday 12 November 2023, 12.15AMIf you require assistance, call our
24-Hour Customer Service line.
18:05
Start New Transfer
Transfer funds easily with the options below.
Transfer
18:05
New Transfer
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Request Money
Start New Request
Request money easily with the options below.
18:05
New Request
Account Number
Mobile Number
NRIC Number
Army/Police Number
Passport Number
Business Registration Number
Transfer To
Start New Payment
Pay bills easily with the options below.
18:05
New Payment
JomPAY
Other Billers
Abcde
Clear
Transfer To
No Results Found
We couldn’t find any results.
Please try searching again.
18:05