HoldCover App
Mobile app design for insurance platform
UI, interaction, information design, design system
![Four phones showing different screens of the app](/_astro/CdLqEEOQ_2uhhBv.png)
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.
![Three phones showing the app's quoting form, quote result and detailed quote comparison screens.](/_astro/Bom84B4M_Zo83hq.png)
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.
![Ten phones showing the screens of the app, walking through the purchasing process.](/_astro/AkH3evHi_BaAul.png)
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.
![The components of our design system.](/_astro/CC8BwBSE_14P8dl.png)
An Iterative Process
![Ten phones showing the screens of the app, walking through the purchasing process.](/_astro/SrPoc0m__1AFclh.png)
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.
![Three text fields for entering date of birth, when one is filled the cursor skips to the next one automatically](/_astro/B15A83c3.png)
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.
![An image with two signature fields, the inline signature field where the customer sign in a long page has a red background, and the action button signature field where user tap the 'add signature' button ang go to a new page to sign has a blue background.](/_astro/B3CovAF__1HaQ6k.png)
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
![Product and quoting questions page.](/_astro/BGLl0LBR_gQivD.png)
![Insurance plans comparison page.](/_astro/B4Bir9VR_j55JP.png)
![Insurance confirmation, payment and success screens.](/_astro/B2Hj3nrW_ZSvJCX.png)