Mockup screen of Prudential web app landing page
Mockup screen of Prudential mobile app get quote page

Prudential
Minisite

Designing Prudential minisite for seamless integration across multiple platforms.

We created a minisite for Prudential to be integrated across associated websites such as KWSP, Standard Chartered Bank, and Shopee. Customers can access the minisite through these platforms to purchase a policy from Prudential. This project was completed amidst the outbreak of Covid.

The Client

Prudential


My Role

UI/UX Design


Date

Jul-Sep 2020


Made with

Figma app icon

The Challenges

Responsive Design

Due to the requirement, we needed to create a responsive design that works with unique features, primarily the premium calculator, which allows users to preview the monthly premium amount based on the insurance sum coverage.

Future-proof Customization

The client requires a minisite that can be implemented across multiple platforms. The minisite is expected to adapt in case of any further changes to business requirements to reduce the amount of technical or administrative work.

Product Outreach

In today’s world, there’s a lot of uncertainties and more people are turning to insurance to ensure they’re protected. Prudential intends to reach these potential customers through modern platforms while making it accessible for those who prefers a straightforward process.

Design Process

Double diamond design process

The Solution

We built a minisite which can be customized according to the requirements of different platforms. The goal of the minisite is to create a simple and efficient, user-friendly customer onboarding process. By pre-filling fields, we are able to reduce the time taken for the customer to complete their policy purchase. Using the brand guide, we re-created the minisite to maintain a consistent brand image.

Mockup screen of Prudential web app landing page
Mockup screen of Prudential mobile app get quote page

Lo-Fi Wireframes

I created some basic wireframes to gather feedback from business stakeholders on the overall user journey.
This way, the team is able to see a clearer picture to address concerns and brainstorm solutions.

Design Iterations

Some designs required iterations even as we created high-fidelity prototype due to technical limitations, legal or business requirement.
Upon feedback from the users and business team, we continued to improve the experience by constant reiteration.

Choosing payment method

When there is only one viable payment method, the option is pre-selected if valid (EPF). But if there are alternative payment methods, user needs to select the payment method first.

Changing calculator module flexibility

The initial requirement was to allow the client to increase sum coverage with a minimum of 5 digits, but it was reduced to 4 digits, so we changed the level threshold control to slider control as this had more flexibility.

Prudential web iteration for get quote page – with plus minus threshold control
Prudential web iteration for get quote page – with slider control

Hi-Fi Prototype

We built a minisite which can be customized according to the requirements of different platforms.

By pre-filling fields, we are able to reduce the time taken for the customer to complete their policy purchase.

Using the brand guide, we re-created the minisite to maintain a consistent brand image.

Prudential Minisite prototype for Employee’s Provident Fund (EPF)

Prudential Minisite prototype for Standard Chartered Bank (SCB)

Outcome & Key Takeaways

Since the implementation of the minisite, we have seen a significant increase in the number customer engagement via online portals. Additionally, I have received positive feedback from users and the business team about the process being straightforward and effectively time-saving.

Below are some key takeaways from this project:

  • Constant QA to understand the product and iterate based on feedback – it was important to understand the product as much as possible from the start to reduce the amount of iterations needed.

  • Have clear communication within the team and follow up with progress in order to make sure the designs are feasible – there were multiple instances where certain features had to be customized to build which affected development time. It’s important to proactively follow up with the progress of the team to ensure we were able to meet the deadline to launch the MVP.