HoldCover App

HoldCover is a digital insurance platform where customers can compare and purchase insurance from different providers in one place.

I am part of the team assigned to design and bring this platform to an app, and I mainly focused on designing and refining the main insurance buying flow.

Goals

The design’s goal was to provide a straightforward and quick purchasing experience.

The interface is concise enough to enable a quick comparison of the different insurance plans offered on the platform. However, it is also powerful enough to allow customers to compare the detailed coverage of each one.

The final purchasing flow is first to pick an insurance product and fill in a shortened form to see the list of eligible plans and their prices. Then the customer chooses a plan, fills in all of the information needed (KYC), uploads required documents, confirms the entered information, and proceed to payment.

Design System

In preparation for creating this app, we created a design system to provide consistency across our web and mobile platforms and streamline their design and development phases for our team. I led its design, and later on, was backported to our website as well.

A set of typography, colour and spacings were created, after which components such as form fields, buttons and more were made. It allows us to deliver our products easier and quicker.

An Iterative Process

The app’s design went through an iterative process, where we gradually refined the design and experience of the app.

One of the examples was the checkout screen. Initially, we took a novel approach, putting the promo code input above the price calculation table. It made logical sense - you had to apply the discounts before calculating the price.

However, after user testing and explorations, we found that adding the price to the payment button had the same effect: to reassure users that they were paying the correct price. We also observed the novel approach led to confusion since users were already familiar with the discounts applied after the price table, a pattern typical in many e-commerce apps.

Therefore, in the end, we scrapped the novel approach and put the discount input after the price table but also showed the final price towards the bottom of the screen.

The input field where the customers entered their date of birth was also a detail that went through iterations.

We used a calendar picker for customers to enter their date of birth. But we found that displaying a full calendar is unnecessary for this context. Most people remember their birth date precisely, and picking it out with a calendar introduces more friction than needed.

We landed on using three separate fields for entering the date of birth, where the next field is automatically focused when the previous one is full. It is the quickest and most easily understood among the alternatives we tested.

We also asked customers to provide us with their signatures. We found that providing a clear, strong call-to-action button to add a signature reduced confusion and improved usability compared to inlining the signature field onto the layout.

Gallery