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

role

Motion Designer

support

Benson - Illustrations

Cody - Illustrations

tools

LottieLab

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.

A Blueprint Designed Togther

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

Ground Rules for Guidance

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.

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

A Scalable Approach to Effortless Creation

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.

From Concepts to Reality

Lotties in action ✨

Takeaways That Refined My Design Approach

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.

  • 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

role

Motion Designer

support

Benson - Illustrations

Cody - Illustrations

tools

LottieLab

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.

A Blueprint Designed Togther

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

Ground Rules for Guidance

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.

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

A Scalable Approach to Effortless Creation

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.

From Concepts to Reality

Lotties in action ✨

Takeaways That Refined My Design Approach

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.

  • 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

role

Motion Designer

support

Benson - Illustrations

Cody - Illustrations

tools

LottieLab

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.

A Blueprint Designed Togther

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

Ground Rules for Guidance

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.

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

A Scalable Approach to Effortless Creation

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.

From Concepts to Reality

Lotties in action ✨

Takeaways That Refined My Design Approach

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.

Designed by Shehryar Ahmad.

Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.

Last Updated

1 Dec, 2023

Designed by Shehryar Ahmad.

Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.

Last Updated

1 Dec, 2023

Designed by Shehryar Ahmad.

Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.

Last Updated:

1 Dec, 2023