Thuy Nguyen - Product Designer

Overview

Designing clearer insurance and healthcare experiences

I worked across Affina's digital ecosystem, simplifying insurance journeys, evolving an existing design system toward a more healthcare-oriented experience, refining interfaces beyond handoff, and keeping the product language consistent across digital touchpoints.

Affina mobile home screen for a signed-out customer

Affina mobile home screen with an active insurance policy

Affina website homepage shown in a desktop monitor mockup

Design challenges

Challenge 01

Turning an offline sales journey into an AI-assisted online experience

How might AI narrow complex choices without removing the human support users trust?

Challenge 02

Building the design system from foundations up

How could one shared system make Affina clearer, warmer and easier to scale?

Challenge 03

Rebuilding the brand foundation

How could the brand feel more relevant to women while staying youthful and energetic?

Challenge 01

Turning an offline sales journey into an AI-assisted online experience

Business context

Affina wanted to move more of its insurance journey online.

Our solution

Instead of simply digitising the sales form, we built an AI-assisted journey that narrowed choices, recommended suitable plans, and made comparison easier.

My product design scope

I owned the journey from flow definition to responsive UI delivery.

Mapped the survey-to-comparison flow
Simplified hierarchy and responsive states
Implemented the UI in source code and refined production details

How I solved it

I broke the decision into smaller, clearer steps.

SurveyRecommendCompareComplete infoPurchase

1

Survey

Start with less friction

Open the survey from the homepage in a modal — no page change.

Ask only what shapes the match:

Coverage → Profile → Budget → Benefits → Insurer

Survey: 01 · Insurance type — 01 · Insurance type
Choose the insurance product to explore.

Survey: 02 · Insured person — 02 · Insured person
Define who needs coverage and their date of birth.

Survey: 03 · Budget & core benefits — 03 · Budget & core benefits
Set an expected budget and the most important coverage.

Survey: 04 · Preferences — 04 · Preferences
Add optional benefits and preferred insurers.

2

Recommend

Make the best options easy to scan

Surface three best-fit plans with essential details upfront.

Put the best match first
Show price and core benefits
Reveal why it fits on demand

Recommend: 06 · Recommendations — 06 · Recommendations
Surface three suitable plans with clear price and benefit cues.

3

Compare

Make complex benefits easier to compare across web and mobile

Keep the same three plans
Group benefits into clear rows
Emphasize meaningful differences
Add status and best-choice cues

Compare: 07 · Compare overview — 07 · Compare overview
Compare plan pricing and providers side by side.

Compare: 08 · Benefit details — 08 · Benefit details
Review coverage differences before making a final choice.

Mobile comparison flow

Keep the detail readable — and the whole picture one tap away

Keep details readable, then use the expand control to see the full comparison.

Affina mobile flow: 01 · Recommend — 01 · Recommend
Keep the best-fit plan and essential facts easy to scan.

Affina mobile flow: 02 · Reveal reasons — 02 · Reveal reasons
Expand why a plan fits only when users need the detail.

Affina mobile flow: 03 · Compare — 03 · Compare
Preserve readable rows within the narrow mobile viewport.

Affina mobile flow: 04 · Open overview — 04 · Open overview
Fit the full table on screen for a faster overall comparison.

Measured behavior

30-day snapshot after launch

Traffic during this period was primarily organic and internal testing, with no paid acquisition campaigns.

1,567

Users

2,046

Sessions

3,078

Page views

29

Leads

1.42%

Lead conversion

61.4%

of sessions that reached recommendations continued to Buy Now.

What's next

Increase survey entry from organic traffic.
Reduce drop-off across key survey steps.
Improve recommendation relevance to support conversion.

Challenge 02

Building the design system from foundations up

I treated the system as a product: start with the decisions it must protect, translate them into rules, then prove those rules through real interfaces.

System architecture

01

Principles

Clear decisions · Human care · Scalable delivery

02

Rules

Tokens · Grid · Accessibility · Responsive behavior

03

Elements

Foundations · Components · Patterns · Templates

Build order

What I built first — and why

01

Audit

Inventory live screens, repeated patterns and visual inconsistencies.

02

Foundations

Set the shared language for color, type, spacing, grid, radius and elevation.

03

Components

Build from small controls to reusable product patterns, with states and variants.

04

Governance

Document usage, map values to code and record every system change.

Design System 1.0

01 · Foundation

Shared visual rules

TOKEN-LED

Brand & neutral colors

Spacing

4

8

12

16

24

32

Radius

4

8

12

16

24

full

02 · Atoms

Controls with complete states

Selection controls

✓

SelectedDefaultDisabled

Buttons

ContinueSecondaryNeutral

Default, hover, pressed and disabled variants are documented before components enter product flows.

From system to product

Four checkpoints kept design, Figma and production aligned

1

Foundation first

I defined primitive palettes, typography, spacing, radius and effects before composing product screens.

2

Add meaning with semantic tokens

I mapped primitives to product roles such as primary, secondary, positive, warning and disabled.

3

Bridge design and code

Exported shared values as CSS custom properties so design decisions could move into implementation without translation gaps.

4

Prove it in product

Applied the same tokens and reusable components across responsive healthcare journeys, then refined the system from real use cases.

Affina healthcare flow: Start from Home — 01
Start from Home
Tap Remote Health Consultation.

Affina healthcare flow: Choose a provider — 02
Choose a provider
Pick the care partner that fits the need.

Affina healthcare flow: Review the service — 03
Review the service
Keep provider and benefit context together.

Affina healthcare flow: Accept the terms — 04
Accept the terms
Make the required consent easy to scan.

Challenge 03

Rebuilding the brand foundation

Turning customer insight into a brand system

Affina's customer data showed a strong female audience, especially among younger health customers and young parents. The brand needed to feel more relevant to women without losing its youthful, energetic character.

Founder direction → solution

The founder wanted the brand to feel more relevant to women without losing its youthful, energetic character. I translated that direction into a visual foundation that could scale across product and communication.

Logo usage