RHB Insurance website &
motor insurance journey
Case Study
Let's get started 🚀
Context
In the beginning, the RHB Digital Insurance team leveraged RHB Group website for hosting product catalogs and lead generation. Responding to the increasing demands of the business and marketing teams within the Insurance squad, the Digital Insurance team opted to develop a dedicated and scalable website for RHB Insurance. The aim was to enable users to purchase insurance products online, seek emergency assistance, access information about marketing campaigns, and download brochures—all consolidated at www.rhbinsurance.com.my.
The Scope
The project scope involved a phased rollout of the website, starting with the launch of an informational website and motor insurance followed by revamping journeys for travel, medical, and personal accident insurance products. The website must address online support channels, considering insights that identify them as the top queries received by RHB Bank website support. It should seamlessly align with the RHB Group website experience, creating an interconnected user journey within the group's digital ecosystem.
Timeline
12 weeks overall for this project.
2 weeks for research, discovery and scoping.
6 weeks for interface design, prototyping and acquiring stakeholder's feedback.
2 weeks for user testing and analysis.
2 weeks for stakeholders presentations, approvals and handoff documentation.
My Role
Feature identification and prioritisation.
Website and journey UX/UI design.
Prototyping and testing.
Stakeholders presentations and approvals.
User stories and handoff documentation.
Tools
UI Design, Prototyping, Handoff
UX Research & Workshops
UI Animations
UI Animations
The Crew
Lydia, Product Owner
Farizul, Design Manager
Alin, Business
Shehryar, UX/UI Designer
Zuraidah, Business Analyst
Kane, Business Analyst
Johnathan, Developer
Harith, Developer
Fil Amor, Developer
Kok JP, Marketing
A glimpse of what we achieved!
Design Process 💡
Scoping
Analyzing competitors and conducting internal workshops to finalise the feature list.
Designing Initial Concepts
Developing flows, initial concepts, and prototypes to visualize requirements.
Acquiring Stakeholder's Feedback
Presenting prototypes to business and tech team to gather feedback and access technical feasibility.
Iterating Design
Advocating for design decisions while also implementing necessary changes when required.
User Testing
Validating iterated designs through user testing.
Finalising Designs
Presenting user feedback and iterated design to the stakeholder's for approval.
Implementing
Drafting design specification document, UI screens and prototypes for creating user stories.
scoping
Competitor analysis
Collaborating with the Business Analyst in the team, we conducted a comprehensive review of our primary competitors to analyze their website experiences.
This aligns with Jacob's law, asserting that users prefer a site to function similarly to those they are already familiar with. The compiled features below illustrate the motor insurance purchasing journey on Touch 'n Go, Berjaya Sompo, Tune Protect, and Kurnia.
scoping
Product Workshop
We then presented our discoveries to the product and marketing teams and organised a collaborative Figjam session to incorporate their desired features.
During this workshop, we collected their input on features we lacked, those deemed essential, and the reasons behind their significance. This approach guaranteed the inclusion of features in our list that add value either to users, business, or operations.
scoping
Determine priority
After consolidating features from competitor analysis and internal workshops, I introduced the below model categorising features into Priority 1, 2, 3, and 4.
For our first Minimum Viable Product (MVP), we will prioritise features that provide value to users, the business, and are technically scalable. In the subsequent MVP, we aim to incorporate Priority 2 features that offer user value and are technically scalable.
Priority 3 and 4 features will be placed in the backlog, with plans to gather additional customer feedback to validate the need for their introduction in MVP 2.
Priority 1 features
Emergency assistance
Users have the capability to seek emergency assistance for motor towing, travel, and medical products.
Compare quotations
Provide users with plans to choose from, allowing them to customise each plan with add-ons for comparison.
Download receipt
Enable users to download the receipt for record-keeping purposes or to share it in cases where the policy is purchased on behalf of someone else, such as friends and family.
Download documents
Make policy-related documents available on the website, including brochures, Product Disclosure Sheets, Policy Wordings etc.
Generate instant quote
Users can generate instant quotes with minimal input required.
Find our panels
Enable users to locate our network of panels for their car repair needs.
Instalment payment plans
Offer up to 12 months of instalments to RHB credit card holders.
Frequently asked questions
Publish FAQs on the website to lessen the load on Customer Support.
Contact channels
Centralise all customer support channels for easy access and navigation.
design system
unified Interface
By leveraging components from IBK Design System, I ensured alignment of this project with RHB digital ecosystem and eased the development process.
In my initial year with RHB's Experience Design team, I took on the initiative of creating and maintaining IBK Design System, ensuring usage of a uniform set of components across the RHB digital touch-points. Collaborating closely with fellow designers, we established comprehensive guidelines on component usage, states, and properties. Upon endorsement from RHB Group Marketing, I collaborated with developers to code these components and integrated them into Storybook so that developers from other squads can also re-use the components.
website
Information Architecture (IA)
The decision to create Information Architecture for the website was driven by the need for a structured and user-centric navigation system. I divided the website into two distinct menus—Informational and Functional.
The Informational menu is designed to offer customers valuable information, featuring product information, FAQs, marketing promos, and other informative content.
In contrast, the Functional menu is tailored for users to execute specific actions, ranging from purchasing insurance policies and requesting assistance to locating service panels.
website
Draft for stakeholder's feedback
Using center stage display technique for the main cover, I highlighted RHBI's core value as a tagline, accompanied by 4 products available for online purchase.
To infuse a friendly and appealing vibe, especially for younger audiences, I designed animated illustrations within the insurance context. The landing page narrative unfolded through distinct sections:
Introduction to RHB Insurance and its products.
Benefit of choosing RHB Insurance.
Need further persuasion? Explore our marketing promos and offers.
Stay connected on-the-go with our mobile app.
Questions on your mind? Delve into our FAQs.
Can't find your answer in FAQs? Reach out to us for assistance.
Concluding with a compelling call-to-action, emphasising the availability of our 4 products available for online purchase.
Stakeholder's feedback
The overall design softens the seriousness typically associated with insurance, creating a friendly and approachable image for RHB Insurance.
The intuitive transition of the products tab to the right side ensures that users don't have to scroll all the way up to access these products.
Dedicating a section to marketing offers and promos provides us with the flexibility to promptly update campaigns directly on our website, eliminating the need for an extensive process of publishing them to RHB Group's website.
In addition to online-purchasable products (STP), there are other non-STP products requiring users to complete a lead form on the RHB Group's website. How can we display our complete portfolio of products, STP and non-STP?
Positioning FAQs above the CONTACT US section aligns with the narrative, allowing users to peruse the FAQs before reaching out to CRC. However, FAQs section contributes to the lengthiness of the homepage.
While transition of product tabs to the right is intuitive, there is a slight concern about how this transition functions on smaller screens.
Illustrations featuring humans do not align with RHB brand guidelines; we consistently use real human in our imagery.
Motor Insurance
User flow
I observed that despite obtaining all the information from ISM for around 90% of cases, we still display 'Enter missing ISM info' page to all users.
Discussions with the Product Owner clarified that the mandatory display of this page was intended only for users with missing ISM info. We agreed to streamline this for the majority (over 90%) who don't have any missing information with ISM.
Motor Insurance
Draft for stakeholder's feedback
I proposed the idea of recommended add-ons feature that leverages user history for personalised add-on suggestions.
For new users without a history, the system can use car model and postcode to recommend add-ons, such as suggesting windscreen coverage based on the car model or flood add-ons for those residing in areas with a history of floods.
For the quotation layout, I designed it to resemble a real-life A4 paper layout, featuring vehicle details at the top, followed by sum insured, add-ons, and quotation details.
Additionally, I also proposed the idea of requesting sensitive information, such as ID card details, after obtaining the user's vehicle details from ISM. The idea was to establish trust by first displaying vehicle details from ISM, making users more comfortable sharing ID card details.
Stakeholder's feedback
The intuitive quotation design distinguishes us from competitors. How will it seamlessly incorporate premier protect and roadside rescue with bundled add-ons in the future?
The design is neat, and the flow is smooth. However, is there a possibility to further minimise the number of pages?
While the recommended add-ons feature offers significant value to the users and business, also consider the technical feasibility of implementing the feature within the given timeframe.
Considering the current API, obtaining vehicle details from ISM requires the vehicle number and ID number. Avoid API modifications to prevent launch delays.
Limit payment methods to only debit cards and credit cards in this MVP. Consider removing any additional payment options.
The spot hero illustrations on introductory pages are attractive but fall outside our brand guide. Consider using spot illustrations that received approval from Group Marketing during the spot animation project.
Motor Insurance
Changes to the user flow
After assessing the technical feasibility of the recommended add-ons feature, the tech team advised that the required backend enhancements may not be achievable within the given timeframe.
Also, upon learning about the future plans for premier protect and roadside rescue from the business team, it became evident that the proposed A4 quotation design layout may lack scalability. Thus I made the following changes to the user flow:
Eliminated displaying the ISM incomplete info page for users with complete information.
Introduced a plans layout combined with the standard best selling add-ons.
Removed policy holder details page and requested users to provide details on the quotation page instead.
Retained bank cards as the only payment method and introduced instalment payment plans exclusively for RHB credit card holders.
user testing
Testing on real users
I iterated the designs based on the feedback received and collaborated with a fellow UX designer to test my prototypes on 3 existing users and 2 new users.
The prototypes were divided into desktop and mobile designs, covering the following journeys:
Use Case 1: Testing the landing page and motor buying journey on desktop, as analytics indicate a higher tendency for users to purchase insurance on desktop in the past 6 months.
Use Case 2 and Use Case 3: Testing emergency assistance and panel workshop journeys on a mobile device, considering users are likely to use these features while on-the-go.
Use Case 4: Testing FAQs, Download Documents, and Contact Us pages on desktop.
Key Findings from UT
3/3 Existing users completed
Motor purchase, emergency assistance and panel workshop journeys without any issues.
2/2 New users completed
Motor purchase, emergency assistance and panel workshop journeys without any issues.
3/3 Existing users Allowed access
Current location to locate our panel nearest to them.
1/2 New users Allowed access
Current location to locate our panel nearest to them.
2/3 Existing users Requested
Search feature to find the desired FAQ and product related document.
1/2 New users Requested
Search feature to find the desired FAQ and product related document.
Final Result 🎉
Seamless linking with RHB Bank website
Displaying complete portfolio of products, STP and non-STP both.
Redirecting users to RHB Group website to explore product. This approach streamlines content maintenance, eliminating the need to update product information on two websites.
Get instant quote
Generating quotations for users with minimal input fields.
Enabling users to share quotations when purchasing on behalf of friends and family.
Compare plans
Combining comprehensive coverage with recommended add-ons, I created up to 3 plans following Hick's law, allowing users to choose a plan that aligns with their needs.
Replacing plan 2 and 3 with Premier Protect and Roadside Rescue plans in the future.
Customise quotation & fill policy holder details
Enabling users to view the adjusted premium when customising the quotation.
Applying the progressive disclosure principle to present users with both the quotation and policy holder details on a single page.
Review, Pay & Share
Ensuring business security by prompting users to confirm Terms & Conditions before proceeding to the next step.
Providing instalment payment options for RHB Credit Card holders.
Allowing users to download, print and share the payment receipt.
Emergency assistance on its way!
Enabling users to easily request emergency assistance at their preferred location with just a few clicks.
Allowing users to track or call the assistant.
Find panels nearby
Allowing users to quickly find our nearby panels with just a few clicks.
Directing users to respective Google Business pages of our panels for reviews and directions.
See FAQs or Contact Us
Providing a search feature for users to easily find the desired FAQs.
Grouping contact channels based on their function for easy scanability.
Download documents
Categorising documents for users to easily locate the desired document.
Providing a search feature for users to quickly find the desired document.
implement
Showcase to the Board Members
RHB Insurance's Head of Digital invited me to present a brief demo of the new website experience to the RHB Insurance board members.
I created a short 5 minutes video to present in the meeting. This concise video, mindful of the board members' time, was well-received during the meeting. The board members expressed appreciation for our efforts in digitising insurance, and pledged ongoing support for our future development plans. Here's the video I presented.
implement
User stories for BAs
To ensure our Business Analysts cover all aspects in the user stories, I created micro-flows explaining each feature and interaction.
These UI screens provided clarity to our Business Analysts and facilitated in creating detailed user stories that eliminate ambiguity to the developers.
implement
Handoff to developers
For a smooth handoff, I used EightShapes plugin to prepare a specification document outlining component properties, states, and layout specifications.
The finalised UI screens were uploaded to Zeplin, with each screen tagged to its respective flow for clarity. Additionally, I provided all animations in Lottie JSON format and icons in SVG format to facilitate seamless implementation without compromising system performance.
What I learnt!
All credits to my Design Manager, who pushed me to explore design leadership, driving me to take initiatives in gathering business requirements and coordinating with developers to assess technical feasibility. Prioritising features into MVPs streamlined our approach, focusing on delivering priority 1 features in MVP 1.0.
Presenting prototypes over static UI screens to stakeholders played a pivotal role in helping the business and technical teams visualise the concepts more effectively. Effectively assessing requirements and technical feasibility before user testing saved team resources by targeting specific testing goals.
My work was recognised when the Head of Digital invited me to demo to RHB Insurance board members. Moving forward, we'll monitor user activity and use iterative design approach to optimise the designs further and validate future feature needs.
RHB Insurance website & motor insurance
Case Study
Let's get started 🚀
Context
In the beginning, the RHB Digital Insurance team leveraged RHB Group website for hosting product catalogs and lead generation. Responding to the increasing demands of the business and marketing teams within the Insurance squad, the Digital Insurance team opted to develop a dedicated and scalable website for RHB Insurance. The aim was to enable users to purchase insurance products online, seek emergency assistance, access information about marketing campaigns, and download brochures—all consolidated at www.rhbinsurance.com.my.
The Scope
The project scope involved a phased rollout of the website, starting with the launch of an informational website and motor insurance followed by revamping journeys for travel, medical, and personal accident insurance products. The website must address online support channels, considering insights that identify them as the top queries received by RHB Bank website support. It should seamlessly align with the RHB Group website experience, creating an interconnected user journey within the group's digital ecosystem.
Timeline
12 weeks overall for this project.
2 weeks for research, discovery and scoping.
6 weeks for interface design, prototyping and acquiring stakeholder's feedback.
2 weeks for user testing and analysis.
2 weeks for stakeholders presentations, approvals and handoff documentation.
My Role
Feature identification and prioritisation.
Website and journey UX/UI design.
Prototyping and testing.
Stakeholders presentations and approvals.
User stories and handoff documentation.
Tools
UI Design, Prototyping, Handoff
UX Research & Workshops
UI Animations
UI Animations
The Crew
Lydia, Product Owner
Farizul, Design Manager
Alin, Business
Shehryar, UX/UI Designer
Zuraidah, Business Analyst
Kane, Business Analyst
Johnathan, Developer
Harith, Developer
Fil Amor, Developer
Kok JP, Marketing
A glimpse of what we achieved!
Design Process 💡
Scoping
Analyzing competitors and conducting internal workshops to finalise the feature list.
Designing Initial Concepts
Developing flows, initial concepts, and prototypes to visualize requirements.
Acquiring Stakeholder's Feedback
Presenting prototypes to business and tech team to gather feedback and access technical feasibility.
Iterating Design
Advocating for design decisions while also implementing necessary changes when required.
User Testing
Validating iterated designs through user testing.
Finalising Designs
Presenting user feedback and iterated design to the stakeholder's for approval.
Implementing
Drafting design specification document, UI screens and prototypes for creating user stories.
scoping
Competitor analysis
Collaborating with the Business Analyst in the team, we conducted a comprehensive review of our primary competitors to analyze their website experiences.
This aligns with Jacob's law, asserting that users prefer a site to function similarly to those they are already familiar with. The compiled features below illustrate the motor insurance purchasing journey on Touch 'n Go, Berjaya Sompo, Tune Protect, and Kurnia.
scoping
Product Workshop
We then presented our discoveries to the product and marketing teams and organised a collaborative Figjam session to incorporate their desired features.
During this workshop, we collected their input on features we lacked, those deemed essential, and the reasons behind their significance. This approach guaranteed the inclusion of features in our list that add value either to users, business, or operations.
scoping
Determine priority
After consolidating features from competitor analysis and internal workshops, I introduced the below model categorising features into Priority 1, 2, 3, and 4.
For our first Minimum Viable Product (MVP), we will prioritise features that provide value to users, the business, and are technically scalable. In the subsequent MVP, we aim to incorporate Priority 2 features that offer user value and are technically scalable.
Priority 3 and 4 features will be placed in the backlog, with plans to gather additional customer feedback to validate the need for their introduction in MVP 2.
Priority 1 features
Emergency assistance
Users have the capability to seek emergency assistance for motor towing, travel, and medical products.
Compare quotations
Provide users with plans to choose from, allowing them to customise each plan with add-ons for comparison.
Download receipt
Enable users to download the receipt for record-keeping purposes or to share it in cases where the policy is purchased on behalf of someone else, such as friends and family.
Download documents
Make policy-related documents available on the website, including brochures, Product Disclosure Sheets, Policy Wordings etc.
Generate instant quote
Users can generate instant quotes with minimal input required.
Find our panels
Enable users to locate our network of panels for their car repair needs.
Instalment payment plans
Offer up to 12 months of instalments to RHB credit card holders.
Frequently asked questions
Publish FAQs on the website to lessen the load on Customer Support.
Contact channels
Centralise all customer support channels for easy access and navigation.
design system
unified Interface
By leveraging components from IBK Design System, I ensured alignment of this project with RHB digital ecosystem and eased the development process.
In my initial year with RHB's Experience Design team, I took on the initiative of creating and maintaining IBK Design System, ensuring usage of a uniform set of components across the RHB digital touch-points. Collaborating closely with fellow designers, we established comprehensive guidelines on component usage, states, and properties. Upon endorsement from RHB Group Marketing, I collaborated with developers to code these components and integrated them into Storybook so that developers from other squads can also re-use the components.
website
Information Architecture (IA)
The decision to create Information Architecture for the website was driven by the need for a structured and user-centric navigation system. I divided the website into two distinct menus—Informational and Functional.
The Informational menu is designed to offer customers valuable information, featuring product information, FAQs, marketing promos, and other informative content.
In contrast, the Functional menu is tailored for users to execute specific actions, ranging from purchasing insurance policies and requesting assistance to locating service panels.
website
Draft for stakeholder's feedback
Using center stage display technique for the main cover, I highlighted RHBI's core value as a tagline, accompanied by 4 products available for online purchase.
To infuse a friendly and appealing vibe, especially for younger audiences, I designed animated illustrations within the insurance context. The landing page narrative unfolded through distinct sections:
Introduction to RHB Insurance and its products.
Benefit of choosing RHB Insurance.
Need further persuasion? Explore our marketing promos and offers.
Stay connected on-the-go with our mobile app.
Questions on your mind? Delve into our FAQs.
Can't find your answer in FAQs? Reach out to us for assistance.
Concluding with a compelling call-to-action, emphasising the availability of our 4 products available for online purchase.
Stakeholder's feedback
The overall design softens the seriousness typically associated with insurance, creating a friendly and approachable image for RHB Insurance.
The intuitive transition of the products tab to the right side ensures that users don't have to scroll all the way up to access these products.
Dedicating a section to marketing offers and promos provides us with the flexibility to promptly update campaigns directly on our website, eliminating the need for an extensive process of publishing them to RHB Group's website.
In addition to online-purchasable products (STP), there are other non-STP products requiring users to complete a lead form on the RHB Group's website. How can we display our complete portfolio of products, STP and non-STP?
Positioning FAQs above the CONTACT US section aligns with the narrative, allowing users to peruse the FAQs before reaching out to CRC. However, FAQs section contributes to the lengthiness of the homepage.
While transition of product tabs to the right is intuitive, there is a slight concern about how this transition functions on smaller screens.
Illustrations featuring humans do not align with RHB brand guidelines; we consistently use real human in our imagery.
Motor Insurance
User flow
I observed that despite obtaining all the information from ISM for around 90% of cases, we still display 'Enter missing ISM info' page to all users.
Discussions with the Product Owner clarified that the mandatory display of this page was intended only for users with missing ISM info. We agreed to streamline this for the majority (over 90%) who don't have any missing information with ISM.
Motor Insurance
Draft for stakeholder's feedback
I proposed the idea of recommended add-ons feature that leverages user history for personalised add-on suggestions.
For new users without a history, the system can use car model and postcode to recommend add-ons, such as suggesting windscreen coverage based on the car model or flood add-ons for those residing in areas with a history of floods.
For the quotation layout, I designed it to resemble a real-life A4 paper layout, featuring vehicle details at the top, followed by sum insured, add-ons, and quotation details.
Additionally, I also proposed the idea of requesting sensitive information, such as ID card details, after obtaining the user's vehicle details from ISM. The idea was to establish trust by first displaying vehicle details from ISM, making users more comfortable sharing ID card details.
Stakeholder's feedback
The intuitive quotation design distinguishes us from competitors. How will it seamlessly incorporate premier protect and roadside rescue with bundled add-ons in the future?
The design is neat, and the flow is smooth. However, is there a possibility to further minimise the number of pages?
While the recommended add-ons feature offers significant value to the users and business, also consider the technical feasibility of implementing the feature within the given timeframe.
Considering the current API, obtaining vehicle details from ISM requires the vehicle number and ID number. Avoid API modifications to prevent launch delays.
Limit payment methods to only debit cards and credit cards in this MVP. Consider removing any additional payment options.
The spot hero illustrations on introductory pages are attractive but fall outside our brand guide. Consider using spot illustrations that received approval from Group Marketing during the spot animation project.
Motor Insurance
Changes to the user flow
After assessing the technical feasibility of the recommended add-ons feature, the tech team advised that the required backend enhancements may not be achievable within the given timeframe.
Also, upon learning about the future plans for premier protect and roadside rescue from the business team, it became evident that the proposed A4 quotation design layout may lack scalability. Thus I made the following changes to the user flow:
Eliminated displaying the ISM incomplete info page for users with complete information.
Introduced a plans layout combined with the standard best selling add-ons.
Removed policy holder details page and requested users to provide details on the quotation page instead.
Retained bank cards as the only payment method and introduced instalment payment plans exclusively for RHB credit card holders.
user testing
Testing on real users
I iterated the designs based on the feedback received and collaborated with a fellow UX designer to test my prototypes on 3 existing users and 2 new users.
The prototypes were divided into desktop and mobile designs, covering the following journeys:
Use Case 1: Testing the landing page and motor buying journey on desktop, as analytics indicate a higher tendency for users to purchase insurance on desktop in the past 6 months.
Use Case 2 and Use Case 3: Testing emergency assistance and panel workshop journeys on a mobile device, considering users are likely to use these features while on-the-go.
Use Case 4: Testing FAQs, Download Documents, and Contact Us pages on desktop.
Key Findings from UT
3/3 Existing users completed
Motor purchase, emergency assistance and panel workshop journeys without any issues.
2/2 New users completed
Motor purchase, emergency assistance and panel workshop journeys without any issues.
3/3 Existing users Allowed access
Current location to locate our panel nearest to them.
1/2 New users Allowed access
Current location to locate our panel nearest to them.
2/3 Existing users Requested
Search feature to find the desired FAQ and product related document.
1/2 New users Requested
Search feature to find the desired FAQ and product related document.
Final Result 🎉
Seamless linking with RHB Bank website
Displaying complete portfolio of products, STP and non-STP both.
Redirecting users to RHB Group website to explore product. This approach streamlines content maintenance, eliminating the need to update product information on two websites.
Get instant quote
Generating quotations for users with minimal input fields.
Enabling users to share quotations when purchasing on behalf of friends and family.
Compare plans
Combining comprehensive coverage with recommended add-ons, I created up to 3 plans following Hick's law, allowing users to choose a plan that aligns with their needs.
Replacing plan 2 and 3 with Premier Protect and Roadside Rescue plans in the future.
Customise quotation & fill policy holder details
Enabling users to view the adjusted premium when customising the quotation.
Applying the progressive disclosure principle to present users with both the quotation and policy holder details on a single page.
Review, Pay & Share
Ensuring business security by prompting users to confirm Terms & Conditions before proceeding to the next step.
Providing instalment payment options for RHB Credit Card holders.
Allowing users to download, print and share the payment receipt.
Emergency assistance on its way!
Enabling users to easily request emergency assistance at their preferred location with just a few clicks.
Allowing users to track or call the assistant.
Find panels nearby
Allowing users to quickly find our nearby panels with just a few clicks.
Directing users to respective Google Business pages of our panels for reviews and directions.
See FAQs or Contact Us
Providing a search feature for users to easily find the desired FAQs.
Grouping contact channels based on their function for easy scanability.
Download documents
Categorising documents for users to easily locate the desired document.
Providing a search feature for users to quickly find the desired document.
implement
Showcase to the Board Members
RHB Insurance's Head of Digital invited me to present a brief demo of the new website experience to the RHB Insurance board members.
I created a short 5 minutes video to present in the meeting. This concise video, mindful of the board members' time, was well-received during the meeting. The board members expressed appreciation for our efforts in digitising insurance, and pledged ongoing support for our future development plans. Here's the video I presented.
implement
User stories for BAs
To ensure our Business Analysts cover all aspects in the user stories, I created micro-flows explaining each feature and interaction.
These UI screens provided clarity to our Business Analysts and facilitated in creating detailed user stories that eliminate ambiguity to the developers.
implement
Handoff to developers
For a smooth handoff, I used EightShapes plugin to prepare a specification document outlining component properties, states, and layout specifications.
The finalised UI screens were uploaded to Zeplin, with each screen tagged to its respective flow for clarity. Additionally, I provided all animations in Lottie JSON format and icons in SVG format to facilitate seamless implementation without compromising system performance.
What I learnt!
All credits to my Design Manager, who pushed me to explore design leadership, driving me to take initiatives in gathering business requirements and coordinating with developers to assess technical feasibility. Prioritising features into MVPs streamlined our approach, focusing on delivering priority 1 features in MVP 1.0.
Presenting prototypes over static UI screens to stakeholders played a pivotal role in helping the business and technical teams visualise the concepts more effectively. Effectively assessing requirements and technical feasibility before user testing saved team resources by targeting specific testing goals.
My work was recognised when the Head of Digital invited me to demo to RHB Insurance board members. Moving forward, we'll monitor user activity and use iterative design approach to optimise the designs further and validate future feature needs.
RHB Insurance website &
motor insurance journey
Case Study
Let's get started 🚀
Context
In the beginning, the RHB Digital Insurance team leveraged RHB Group website for hosting product catalogs and lead generation. Responding to the increasing demands of the business and marketing teams within the Insurance squad, the Digital Insurance team opted to develop a dedicated and scalable website for RHB Insurance. The aim was to enable users to purchase insurance products online, seek emergency assistance, access information about marketing campaigns, and download brochures—all consolidated at www.rhbinsurance.com.my.
The Scope
The project scope involved a phased rollout of the website, starting with the launch of an informational website and motor insurance followed by revamping journeys for travel, medical, and personal accident insurance products. The website must address online support channels, considering insights that identify them as the top queries received by RHB Bank website support. It should seamlessly align with the RHB Group website experience, creating an interconnected user journey within the group's digital ecosystem.
Timeline
12 weeks overall for this project.
2 weeks for research, discovery and scoping.
6 weeks for interface design, prototyping and acquiring stakeholder's feedback.
2 weeks for user testing and analysis.
2 weeks for stakeholders presentations, approvals and handoff documentation.
My Role
Feature identification and prioritisation.
Website and journey UX/UI design.
Prototyping and testing.
Stakeholders presentations and approvals.
User stories and handoff documentation.
Tools
UI Design, Prototyping, Handoff
UX Research & Workshops
UI Animations
UI Animations
The Crew
Lydia, Product Owner
Farizul, Design Manager
Alin, Business
Shehryar, UX/UI Designer
Zuraidah, Business Analyst
Kane, Business Analyst
Johnathan, Developer
Harith, Developer
Fil Amor, Developer
Kok JP, Marketing
A glimpse of what we achieved!
Design Process 💡
Scoping
Analyzing competitors and conducting internal workshops to finalise the feature list.
Designing Initial Concepts
Developing flows, initial concepts, and prototypes to visualize requirements.
Acquiring Stakeholder's Feedback
Presenting prototypes to business and tech team to gather feedback and access technical feasibility.
Iterating Design
Advocating for design decisions while also implementing necessary changes when required.
User Testing
Validating iterated designs through user testing.
Finalising Designs
Presenting user feedback and iterated design to the stakeholder's for approval.
Implementing
Drafting design specification document, UI screens and prototypes for creating user stories.
scoping
Competitor analysis
Collaborating with the Business Analyst in the team, we conducted a comprehensive review of our primary competitors to analyze their website experiences.
This aligns with Jacob's law, asserting that users prefer a site to function similarly to those they are already familiar with. The compiled features below illustrate the motor insurance purchasing journey on Touch 'n Go, Berjaya Sompo, Tune Protect, and Kurnia.
scoping
Product Workshop
We then presented our discoveries to the product and marketing teams and organised a collaborative Figjam session to incorporate their desired features.
During this workshop, we collected their input on features we lacked, those deemed essential, and the reasons behind their significance. This approach guaranteed the inclusion of features in our list that add value either to users, business, or operations.
scoping
Determine priority
After consolidating features from competitor analysis and internal workshops, I introduced the below model categorising features into Priority 1, 2, 3, and 4.
For our first Minimum Viable Product (MVP), we will prioritise features that provide value to users, the business, and are technically scalable. In the subsequent MVP, we aim to incorporate Priority 2 features that offer user value and are technically scalable.
Priority 3 and 4 features will be placed in the backlog, with plans to gather additional customer feedback to validate the need for their introduction in MVP 2.
Priority 1 features
Emergency assistance
Users have the capability to seek emergency assistance for motor towing, travel, and medical products.
Compare quotations
Provide users with plans to choose from, allowing them to customise each plan with add-ons for comparison.
Download receipt
Enable users to download the receipt for record-keeping purposes or to share it in cases where the policy is purchased on behalf of someone else, such as friends and family.
Download documents
Make policy-related documents available on the website, including brochures, Product Disclosure Sheets, Policy Wordings etc.
Generate instant quote
Users can generate instant quotes with minimal input required.
Find our panels
Enable users to locate our network of panels for their car repair needs.
Instalment payment plans
Offer up to 12 months of instalments to RHB credit card holders.
Frequently asked questions
Publish FAQs on the website to lessen the load on Customer Support.
Contact channels
Centralise all customer support channels for easy access and navigation.
design system
unified Interface
By leveraging components from IBK Design System, I ensured alignment of this project with RHB digital ecosystem and eased the development process.
In my initial year with RHB's Experience Design team, I took on the initiative of creating and maintaining IBK Design System, ensuring usage of a uniform set of components across the RHB digital touch-points. Collaborating closely with fellow designers, we established comprehensive guidelines on component usage, states, and properties. Upon endorsement from RHB Group Marketing, I collaborated with developers to code these components and integrated them into Storybook so that developers from other squads can also re-use the components.
website
Information Architecture (IA)
The decision to create Information Architecture for the website was driven by the need for a structured and user-centric navigation system. I divided the website into two distinct menus—Informational and Functional.
The Informational menu is designed to offer customers valuable information, featuring product information, FAQs, marketing promos, and other informative content.
In contrast, the Functional menu is tailored for users to execute specific actions, ranging from purchasing insurance policies and requesting assistance to locating service panels.
website
Draft for stakeholder's feedback
Using center stage display technique for the main cover, I highlighted RHBI's core value as a tagline, accompanied by 4 products available for online purchase.
To infuse a friendly and appealing vibe, especially for younger audiences, I designed animated illustrations within the insurance context. The landing page narrative unfolded through distinct sections:
Introduction to RHB Insurance and its products.
Benefit of choosing RHB Insurance.
Need further persuasion? Explore our marketing promos and offers.
Stay connected on-the-go with our mobile app.
Questions on your mind? Delve into our FAQs.
Can't find your answer in FAQs? Reach out to us for assistance.
Concluding with a compelling call-to-action, emphasising the availability of our 4 products available for online purchase.
Stakeholder's feedback
The overall design softens the seriousness typically associated with insurance, creating a friendly and approachable image for RHB Insurance.
The intuitive transition of the products tab to the right side ensures that users don't have to scroll all the way up to access these products.
Dedicating a section to marketing offers and promos provides us with the flexibility to promptly update campaigns directly on our website, eliminating the need for an extensive process of publishing them to RHB Group's website.
In addition to online-purchasable products (STP), there are other non-STP products requiring users to complete a lead form on the RHB Group's website. How can we display our complete portfolio of products, STP and non-STP?
Positioning FAQs above the CONTACT US section aligns with the narrative, allowing users to peruse the FAQs before reaching out to CRC. However, FAQs section contributes to the lengthiness of the homepage.
While transition of product tabs to the right is intuitive, there is a slight concern about how this transition functions on smaller screens.
Illustrations featuring humans do not align with RHB brand guidelines; we consistently use real human in our imagery.
Motor Insurance
User flow
I observed that despite obtaining all the information from ISM for around 90% of cases, we still display 'Enter missing ISM info' page to all users.
Discussions with the Product Owner clarified that the mandatory display of this page was intended only for users with missing ISM info. We agreed to streamline this for the majority (over 90%) who don't have any missing information with ISM.
Motor Insurance
Draft for stakeholder's feedback
I proposed the idea of recommended add-ons feature that leverages user history for personalised add-on suggestions.
For new users without a history, the system can use car model and postcode to recommend add-ons, such as suggesting windscreen coverage based on the car model or flood add-ons for those residing in areas with a history of floods.
For the quotation layout, I designed it to resemble a real-life A4 paper layout, featuring vehicle details at the top, followed by sum insured, add-ons, and quotation details.
Additionally, I also proposed the idea of requesting sensitive information, such as ID card details, after obtaining the user's vehicle details from ISM. The idea was to establish trust by first displaying vehicle details from ISM, making users more comfortable sharing ID card details.
Stakeholder's feedback
The intuitive quotation design distinguishes us from competitors. How will it seamlessly incorporate premier protect and roadside rescue with bundled add-ons in the future?
The design is neat, and the flow is smooth. However, is there a possibility to further minimise the number of pages?
While the recommended add-ons feature offers significant value to the users and business, also consider the technical feasibility of implementing the feature within the given timeframe.
Considering the current API, obtaining vehicle details from ISM requires the vehicle number and ID number. Avoid API modifications to prevent launch delays.
Limit payment methods to only debit cards and credit cards in this MVP. Consider removing any additional payment options.
The spot hero illustrations on introductory pages are attractive but fall outside our brand guide. Consider using spot illustrations that received approval from Group Marketing during the spot animation project.
Motor Insurance
Changes to the user flow
After assessing the technical feasibility of the recommended add-ons feature, the tech team advised that the required backend enhancements may not be achievable within the given timeframe.
Also, upon learning about the future plans for premier protect and roadside rescue from the business team, it became evident that the proposed A4 quotation design layout may lack scalability. Thus I made the following changes to the user flow:
Eliminated displaying the ISM incomplete info page for users with complete information.
Introduced a plans layout combined with the standard best selling add-ons.
Removed policy holder details page and requested users to provide details on the quotation page instead.
Retained bank cards as the only payment method and introduced instalment payment plans exclusively for RHB credit card holders.
user testing
Testing on real users
I iterated the designs based on the feedback received and collaborated with a fellow UX designer to test my prototypes on 3 existing users and 2 new users.
The prototypes were divided into desktop and mobile designs, covering the following journeys:
Use Case 1: Testing the landing page and motor buying journey on desktop, as analytics indicate a higher tendency for users to purchase insurance on desktop in the past 6 months.
Use Case 2 and Use Case 3: Testing emergency assistance and panel workshop journeys on a mobile device, considering users are likely to use these features while on-the-go.
Use Case 4: Testing FAQs, Download Documents, and Contact Us pages on desktop.
Key Findings from UT
3/3 Existing users completed
Motor purchase, emergency assistance and panel workshop journeys without any issues.
2/2 New users completed
Motor purchase, emergency assistance and panel workshop journeys without any issues.
3/3 Existing users Allowed access
Current location to locate our panel nearest to them.
1/2 New users Allowed access
Current location to locate our panel nearest to them.
2/3 Existing users Requested
Search feature to find the desired FAQ and product related document.
1/2 New users Requested
Search feature to find the desired FAQ and product related document.
Final Result 🎉
Seamless linking with RHB Bank website
Displaying complete portfolio of products, STP and non-STP both.
Redirecting users to RHB Group website to explore product. This approach streamlines content maintenance, eliminating the need to update product information on two websites.
Get instant quote
Generating quotations for users with minimal input fields.
Enabling users to share quotations when purchasing on behalf of friends and family.
Compare plans
Combining comprehensive coverage with recommended add-ons, I created up to 3 plans following Hick's law, allowing users to choose a plan that aligns with their needs.
Replacing plan 2 and 3 with Premier Protect and Roadside Rescue plans in the future.
Customise quotation & fill policy holder details
Enabling users to view the adjusted premium when customising the quotation.
Applying the progressive disclosure principle to present users with both the quotation and policy holder details on a single page.
Review, Pay & Share
Ensuring business security by prompting users to confirm Terms & Conditions before proceeding to the next step.
Providing instalment payment options for RHB Credit Card holders.
Allowing users to download, print and share the payment receipt.
Emergency assistance on its way!
Enabling users to easily request emergency assistance at their preferred location with just a few clicks.
Allowing users to track or call the assistant.
Find panels nearby
Allowing users to quickly find our nearby panels with just a few clicks.
Directing users to respective Google Business pages of our panels for reviews and directions.
See FAQs or Contact Us
Providing a search feature for users to easily find the desired FAQs.
Grouping contact channels based on their function for easy scanability.
Download documents
Categorising documents for users to easily locate the desired document.
Providing a search feature for users to quickly find the desired document.
implement
Showcase to the Board Members
RHB Insurance's Head of Digital invited me to present a brief demo of the new website experience to the RHB Insurance board members.
I created a short 5 minutes video to present in the meeting. This concise video, mindful of the board members' time, was well-received during the meeting. The board members expressed appreciation for our efforts in digitising insurance, and pledged ongoing support for our future development plans. Here's the video I presented.
implement
User stories for BAs
To ensure our Business Analysts cover all aspects in the user stories, I created micro-flows explaining each feature and interaction.
These UI screens provided clarity to our Business Analysts and facilitated in creating detailed user stories that eliminate ambiguity to the developers.
implement
Handoff to developers
For a smooth handoff, I used EightShapes plugin to prepare a specification document outlining component properties, states, and layout specifications.
The finalised UI screens were uploaded to Zeplin, with each screen tagged to its respective flow for clarity. Additionally, I provided all animations in Lottie JSON format and icons in SVG format to facilitate seamless implementation without compromising system performance.
What I learnt!
All credits to my Design Manager, who pushed me to explore design leadership, driving me to take initiatives in gathering business requirements and coordinating with developers to assess technical feasibility. Prioritising features into MVPs streamlined our approach, focusing on delivering priority 1 features in MVP 1.0.
Presenting prototypes over static UI screens to stakeholders played a pivotal role in helping the business and technical teams visualise the concepts more effectively. Effectively assessing requirements and technical feasibility before user testing saved team resources by targeting specific testing goals.
My work was recognised when the Head of Digital invited me to demo to RHB Insurance board members. Moving forward, we'll monitor user activity and use iterative design approach to optimise the designs further and validate future feature needs.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
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.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
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.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
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.