Design and create a ‘best-in-class’ mobile web site

Setting the scene

As an agency lead designer, I spearheaded the design of this mobile site for the UK’s leading healthcare company, by assembling an exceptional team. Bringing together external and internal creatives, I forged a collaborative venture, leveraging the collective expertise of both parties to achieve a shared vision.

Building on the companies USP

The first step in the design process was to understand the company’s USP. In this case it was the company’s gold standard medical case studies, which are a valuable resource in both the Personal and Business private medical insurance (PMI) customer journeys, even though their needs were different.

Stakeholder management and leveraging a USP 

The home page of the site was designed to be a central hub for users. It provides clear navigation options for both personal and business users, and it also highlights the case studies.

Case Studies: We took the opportunity to call-out the quality and depth of these case studies with language like ‘Search more than 600 page on conditions, treatments and to to live a healthy life’

Fresh content

Fresh content is delivered via the company’s twitter feed. This form of brand reinforcement, (i.e. directly with the user and directly with a trusted reliable knowledge centre) cemented the fact that their digital offer should be the 600+ Case Studies database.

Two CTA; Two Sign-Posts

Valuable copy and engaging navigation is already at work here, guiding users to with well written UX copy and then, politely asking for more information – this is a common UX pattern. Demonstrate how your offer is both valuable and engaging before users are committed to a sign-up process, or impart any personal information.

From top to bottom, a personal customer is informed, followed directly after by the CTA ‘Get Diagnosed’.  Inform then action – this pattern, positioning throughout the experience, provided the blueprint in both Business and Personal, from early hand holding to product details (coming up)

Business / All Products

Progressive disclosure allows for controlled call-backs for three main sections; Protect, Prevention and Support. The same ‘Inform then action’ UX is adopted for these sections and sign posts cap each section with clear CTAs; ‘Call Us’, ‘Share’ or navigation ‘Top’ or ‘Home’. Consistency in spacing, in formatting and in copy all contributed to defining the business and personal PMI user journeys. 

Get Product Guidance with ‘Meta’ onboarding

Simple tasks inside the experience to help users overcome the cold-start problem.

Ask questions, re-order content or confirm metrics

Onboarding has many flavours, from product tours to in-app guidance, tooltips to trigger alerts; Here we use ‘meta’ onboarding, a selection of simple tasks inside the experience to help users overcome the cold-start problem. Meta onboarding can be super-effective—it engages new users immediately, grabs their attention with a few quick wins, and leaves the impression that your product will be easy to use.

Typography Tips for better mobile design

Contrast and legibility are guiding principles in UX and typography, especially in the mobile space. One size fits all; Throughout this site all font sizes are consistent, in fact I have only used one size throughout, all from the same family. You will notice variation exists with case sensitivity, weight and colour.

Word count and font size

As a general rule of thumb, design for approx 45-75 characters per line. The mobile design community recommends that text size on mobile apps should be at least 16 – 18 pt and where possible, use system fonts, not bespoke.

Contrast and legibility rule the roost, especially in the mobile space. Throughout this site all font size is consistent, in fact I have only used one size throughout. You will notice variation only exists dependent on case sensitivity, weight and colour.

Too much contrast can be difficult for dyslexic readers to view, so black is set to #333333 to make reading more pleasant. This conforms to WCAG 2 guidelines.

Business Health

Using trust and existing content to build a human story.

As mentioned, mobile case studies were the company’s USP. Users trusted this case study database to explain medical procedures, highlight causes and provide tools to self-diagnose their personal symptoms from their most personal device; their mobile.

It was clear from the onset that UX decisions should use this hook. It became less critical to either business and personal PMI journeys, and more important that both user groups are all human. So a human story built on trust, on useful information and on content the company already possessed was always going to be a founding design principle.

Forms on mobile

The mobile form is designed as a simplified version (and can be argued, a better version!) of the desktop web form without distractions, adverts, promotions or images. 

Best practice dictates the removal of tips, descriptions and links such as ‘Learn more’ or ‘What is this’. Be ruthless; This helps to reduce visual clutter by omitting elements that impede the user’s task.

From a UX perspective my North Star became less about internal business politics and more about the human end-user; A fundamental UX philosophy that designers can adopt for all projects.