Between May and November of 2016, I worked on Bupa Hong Kong’s new website as Art Director at Isobar. I designed the visual interface and worked closely with the UX team.

Bupa is a healthcare group headquartered in the United Kingdom. It expanded into Hong Kong in 1976 and has been a health insurance and healthcare provision business since. Their audience is professional individuals and companies looking for a healthcare plan for their employees.

Discovery

We reviewed feedback on the current site and discovered that customers found it difficult to find a suitable insurance plan. We did an analysis and found several problems: product names were vague and non-descriptive, the wide range of plans and broad categories were hard to browse, and the website wasn’t mobile-optimized.

We brainstormed on how to make it easier for customers to find a suitable plan, and proceeded with the idea of giving recommendations and quotations based on a simple form. We added a form on the home page where customers fill in a few fields and immediately get three recommended plans. They can choose to refine the pricing by adding more information and enroll the plan.

Wireframes

The beginning steps are the simplest, and with each step the flow becomes more specific and there is more information and data input.

  1. Input a few pieces of information to receive three recommendations
  2. Compare and select a plan
  3. Refine the quotation by choosing payment and plan options
  4. Long form for personal details and a series of yes/no health questions
  5. Payment
Medical insurance plans and quotation engine

Design

We designed the recommended plans view to be in the same style as regular cards, but expanded vertically to show more information. The information is divided into sections and displayed in an underlying grid so the same information can be easily scanned across all three plans.

Early feedback and testing of the wireframes showed that many customers found the forms long and overwhelming. In addition to breaking up the long forms into smaller chunks and steps, we tested the idea of using placeholders as labels. Bupa and our team were initially drawn to this idea because it made the forms appear less overwhelming—the forms looked “cleaner” and the reduced vertical space meant less scroll.

Due to the density of Traditional Chinese characters, labels are easier to read in a larger size and lighter weight than smaller size and heavier weight. Material Design recommends increasing “Dense scripts” by 1 point from the specified size for English. This adds more vertical space for Chinese form labels, plus exaggerates the visual density when compared to using placeholders as labels.

However, using placeholders as labels create a number of usability problems, as summarized by Katie Sherwin of Nielsen Norman Group. Here are the top three reasons that applied to the forms we were designing:

  1. Strains short-term memory: users have to delete what they wrote to reveal the placeholder label again
  2. Users cannot check their input with the label (especially important for browsers with autocomplete)
  3. Empty vs non-empty fields are less noticeable
Traditional labels, placeholder labels and float labels

We compromised by using float labels. Float labels allow the empty form to appear more clean and less overwhelming, while solving the usability problems of placeholder labels to a certain extent. When asked which form looks less overwhelming, most customers picked the one with float labels over labels on top of fields.

Enrollment form

Results

The website launched in early 2017. Bupa loved the brand new clean, simple and functional design. The new website increased sales leads by 200% and online purchases by 300%.