Kurnia Self-service Portal

Kurnia Insurance is prominent motor insurance provider with a huge network of agents which helps vehicle owner to purchase or renew policies. Besides from servicing its clients through its agents, the brand has a Self-service Portal that enables its existing and new customers to manage, renew and purchase new motor policies at their convenience.

Introduction

  • UX improvement for the online vehicle insurance checkout flow
  • A UI library was established to help current and future release of the product to maintain consistencies and reducing waste due to duplicated design efforts
  • Co-designed: Stakeholders were actively involved to share their input and expertise in improving the product during the design process

Understand: Business Requirements

Driven to continuously improve its self-service portal, the product owner outlined key objectives for the project:

  • Increase engagement and usage of the self-service portal
  • Higher percentage of new customer acquisition
  • Increased cart checkout rate

Understand: Challenges

Apart from ensuring the new UI design is feasible within the company’s current technology stack, adherence to the security policies are also extremely important. In addition, the website will need to support devices with modern or legacy browsers.

Define: Project Focus

With the main concerns outlined, I had distilled few key outcomes that will affect the design considerations:

Business outcome(s): Higher revenue driven from its self-service portal, driven by higher level of usage/engagement and increased customer satisfactions.

User outcome(s): Increased satisfactions and confidence in completing transactions on their own, without requiring any aids from agents or customer support.

Design: Mapping Key User Tasks

Key features for users on the existing portal were analysed and broken down into several categories such as :

  • Registration and signing in
  • Product catalog (manage or purchase policies)
  • Checkout flow (and shopping cart)

Approach: Co-designing with stakeholders

In order to drive a positive momentum of the project, the design improvements were constantly reviewed with the stakeholders (members from the product, engineering and security team). This would mean it is crucial to highlight if any of the design suggestions may not be feasible due to technology or security requirement.

Low to medium fidelity wireframes were used to discuss screen flows, user notifications and decide if any information on the screen can translate well for mobile users (for example: feature comparison table). This approach tremendously reduced feedback cycles and promotes better collaboration by focusing on specific context at a time (without getting too distracted with other visual details).

By co-designing and rapidly improving the portal with wireframes, the effort has also paid off as only select amount of high fidelity UI design (key screen) were required.

Wireframe (left) translated to high-fidelity UI for sign up page (right) for large and small screen users
Wireframe (left) translated to high-fidelity UI for policy purchasing page (right) for large and small screen users
Wireframe (left) translated to high-fidelity UI for shopping cart page (right) for large and small screen users

A pattern library (also known as UI library) was established by consolidating all of the UI elements used in the mockup. This library would eventually help the design (and development) team to reduce duplicated effort (in recreating the same element all over again) and maintain better consistencies for new page creation in the future.

Role
  • Visual Design
  • Interaction Design
Year Completed

2016