HoldCover App

HoldCover is an online insurance aggregator. When I approached this project, I knew that creating a design system was crucial.

The design system was crafted to be accessible and versatile, eventually being applied to the HoldCover web app and the AlipayHK mini app, helping to establish a unified product brand expression.

The app itself enables customers to compare and purchase insurance from multiple providers in one place. Through a streamlined purchasing flow, users can select insurance products, view plans and pricing, and finish their application and purchase.

Goals

The design’s goal of the app 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 for our team.

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.

I led the design system’s development, establishing a strong foundation that proved versatile enough to be backported to our web application. The system’s flexibility was further demonstrated when we successfully implemented it in our AlipayHK mini app, enabling us to maintain consistent brand expression across all our digital products.

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