HoldCover Design System

HoldCover was an online insurance aggregator where customers can compare and purchase insurance from different providers in one place.

Originally when it launched, it was a non-responsive website. As we wanted to expand to serve more form factors and platforms, we needed a design system that could also serve them.

A grid of a design system's components, including colours, buttons, text fields, type scale

We relaunched our website to be fully responsive with the new design system. It was also used in our AlipayHK mini app.

Screenshots of a desktop & mobile website, and an AlipayHK mini app — The design system in use on a website and an AlipayHK mini app

Details

A date input field, an arrow icon and a date of birth input field with three fields

In insurance applications such as family travel insurance, customers must enter dates of birth for each family member.

We found other insurance websites typically use calendar date pickers, but these slow the process as users navigate back decades on a calendar interface.

We switched to three separate number fields, which significantly sped up completion.

Two signature fields, the inline signature field with text "Please sign above", and another signature field with an "add signature" button.

Signatures are also required in insurance applications. We found that providing a clear, strong call-to-action button to add a signature reduced confusion, and improved usability compared to a inline the signature field.

The Red Hat type family, with Text and Display versions, was chosen as the typeface in the design system. Its angled terminals echoes the HoldCover logo.

Gallery

Screenshots of a desktop & mobile website — The design system in use on the refreshed HoldCoverwebsite

Screenshots of an AlipayHK mini app — The design system in use on the AlipayHK mini app