---
title: "UI/UX for an insurer's app with no name"
description: "AIA came back to us after Newsboard, this time for the UI/UX of an app for their customers: the research, the IA and user journeys, the wireframes and the look."
url: "https://rayson.me/writing/aia-consumer-app/"
category: "Design"
author: "Janarayson"
published: 2016-12-30
---

In September AIA came back to us. We'd done [Newsboard](/writing/aia-newsboard-part-1/) for them, the news section in iMO, the iPad app their Life Planners use. This time it was an app for their customers, and our part was the UI/UX, which ran until early December. They never told us what the app would be called, so in all our files it's just "AIA Consumer App".

<Figure
  src={hero}
  alt="A hand holding an iPhone 6s in a park, showing the My AIA screen in red: John Doe's A-Plus MedBooster policy with a teal gauge of RM 65,280 remaining of RM 100,000, nearby clinics, and a My Medical Card button"
  caption="My AIA, November."
  wide
/>

## Starting with research

AIA wanted us to start with research. They already knew where their customers get stuck, and the findings mostly came from them. Most customers don't really know what their policy covers. Maybe their parents bought it, or they signed up to help a friend who's an agent, or they bought it so long ago they've forgotten. The first time they need a clinic, they ask HR which ones are on the panel. When they have to be admitted to hospital, they call their agent, because they don't know their room-and-board limit or whether the hospital is on the panel. And people don't want yet another card in their wallet.

We also looked at how other insurers' apps handle the same things, like nib, Cigna, Allianz and Medibank, and came up with a list of features: a medical card on your phone, your policy and what it covers, a clinic finder, renewing your policy in the app, rewards for staying healthy, a wallet for your policy documents, and a medication reminder. The app had two kinds of users. Some had their own AIA policy, and some were covered by their company's plan or by [AIA Vitality](https://www.aia.com.my/bm/about-aia/media-centre/press-release/2016/AIA-Launches-AIA-Vitality-to-Help-Malaysians-Be-Healthier.html), which AIA launched here in June.

## The IA, journeys and wireframes

The first round had everything in it. We did the IA, with ten sections from onboarding to emergency contacts.

<Figure
  src={ia}
  alt="The information architecture in AIA red: On Boarding, then Sign Up and Login, then Home, which branches into Side Drawer, Inbox, Policy, Medical Assistance, Medical Card and Emergency Contacts, with the items under each"
  caption="The IA, end of September."
  wide
/>

Then 30 user journeys. Each one starts with something the customer wants to do, like "I need to see a doctor" or "I don't want to wait at the clinic, how do I make a reservation?", and walks through the screens to get it done.

<Figure
  src={journey}
  alt="The Make Reservation journey, I don't want to wait at the clinic, how do I make a reservation?: four grey wireframes, Home with four big tiles, the Medical Assistance clinic list, a clinic's details, and the reservation form, with the tapped spots boxed in orange"
  caption="One of the 30 journeys: booking a clinic."
  wide
/>

We drew 54 grey wireframes and linked them up in Prott, and all of it went to AIA at the start of October. Home was four big tiles: Policies & Coverages, Medical Assistance, Medical Cards and Contacts. Signing up had a tab for each kind of user. You could see your policy and its coverage with the room-and-board limits, pay your renewal, and keep your policy documents in a wallet. For medical help there was a map of panel clinics with filters for your card type, and a three-step helper for hospital admission that ended with calling your agent.

<Screens
  screens={[
    { src: wfSignUp, alt: 'Sign Up wireframe with Individuals and Employee Benefits / Vitality members tabs, and fields for policy number, full name, ID type, ID number and date of birth' },
    { src: wfPolicy, alt: 'Policy Details wireframe: the policy summary, an Upgrade Policy button, the payment due date and amount with Make Payment, and coverages' },
    { src: wfCoverage, alt: 'Coverage Details wireframe: critical illness, hospital room and board at RM 250 per person for up to 120 days a year, overseas room and board, and intensive care' },
    { src: wfWallet, alt: 'Document Wallet wireframe: documents listed by policy number, with a filter by policy and a search' },
  ]}
  caption="Signing up, a policy, its coverage, and the document wallet."
/>

<Screens
  screens={[
    { src: wfMap, alt: 'Medical Assistance map view wireframe: clinic pins on a grey map, Clinic Alam Medic selected, and your location' },
    { src: wfFilter, alt: 'Apply Filter wireframe: card types to tick, location types (clinics, 24-hour clinics, platinum hospitals, hospitals) and where to search around' },
    { src: wfAdmission, alt: 'Admission Help wireframe, step 1 of 3, Provider Type: which type of hospital the patient needs, with Normal Hospital, Platinum Hospital and Not Sure' },
    { src: wfAdmissionDone, alt: 'Admission Help wireframe, Guide Complete: do you need any further help, with Yes, Call My Agent Now and No, Back to Home' },
  ]}
  caption="The clinic map, its filter, and the admission helper."
/>

## Two revisions

After the first round the app got smaller over two revisions. Home became banners, four shortcuts and a list of articles, and the four tiles moved into a new screen, My AIA. It showed your policy as a card with a gauge of how much cover is left, the clinics near you, and your medical card. The document wallet, the wizards, rewards and the reminder were dropped. By the second revision in early December, signing up and the help pages had moved out to AIA's website, and there was a new way to use your medical card at a clinic: scan the clinic's QR code, pick a card, check how much cover it has left, and confirm.

## The look

In November we designed Home and My AIA in AIA's red and their Everest font, for iOS and Android. We did two versions of Home, one with filled icons and one with outlines, and on My AIA you could swipe between your policies.

<Screens
  screens={[
    { src: home1, alt: 'Home in AIA red: an A-Life Signature Plus One banner, four filled shortcut icons for My AIA, Health, Finance and Tips, and Top Stories articles' },
    { src: home2, alt: 'The second Home, the same layout with outline shortcut icons' },
    { src: myAia, alt: 'My AIA: John Doe\'s A-Plus MedBooster card with a teal gauge of RM 65,280 remaining of RM 100,000, View Details, nearby providers with distances, and a My Medical Card button' },
    { src: myAiaSliding, alt: 'My AIA mid-swipe, with Lucy Smith Doe\'s policy card sliding in beside John Doe\'s' },
  ]}
  caption="Home in two versions, and My AIA, on iOS."
/>

<Figure
  src={androidHome}
  alt="A hand holding a Nexus 5X in an office, showing Home on Android: the A-Life Signature Plus One banner, the four shortcuts, and Top Stories"
  caption="Home on Android."
  wide
/>