Overview

Competition

Guidelines

Process

Final Result

  • 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 Unavailable

    If you require assistance, call our 24-Hour Customer Service line.

  • RHB Mobile Banking is
    Currently Unavailable

    If 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 Unavailable

    We’ll be online again at:
    Sunday 12 November 2023, 12.15AM

    If 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 Unavailable

    If 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 Unavailable

    If you require assistance, call our 24-Hour Customer Service line.

  • RHB Mobile Banking is
    Currently Unavailable

    If 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 Unavailable

    We’ll be online again at:
    Sunday 12 November 2023, 12.15AM

    If 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