arrow_back

Thatch – Crafting the employer onboarding flow

A brief note on how Thatch works: instead of picking one plan for many employees with different health needs, employers set a monthly budget and each employee decides how to use it themselves. Any money not spent on insurance plans accumulates month-over-month to spend on anything HSA eligible. The employer saves time (since Thatch handles the administration) and money from not having to pay for an expensive group insurance plan that most of their employees won’t even nearly make full use of.

🚨

Problem: The previous onboarding flow didn’t make this value prop clear – it was too long, too vague, and wasn’t guided or opinionated enough.

🎯

Goal: use progressive disclosure and compelling storytelling to educate employers on the benefits of Thatch, and instil enough trust in what they were buying from us to walk through the flow and invite their employees, all on their own.

The experience of getting to your quote

Getting started

Basic company info

Current insurance

Adding your employees

The quote

1. Getting started

  • Lead with a clear tagline.
  • Visually interesting carousel of images on the right that introduces the concept of employees getting different budgets early on.
  • Set the stage for flexibility early with copy like "Employees choose their benefits" and "create a benefits strategy that fits all of them".

2. Basic company info

  • Ask only for information that we'll actually use – either through feedback upon input, or links to learn more about specific inputs.
  • Show immediate feedback where possible to user inputs.
  • Autofill as much as possible – here, coverage start date is likely the 1st of the next month.
  • Target plan concept introduced early on and persists throughout the flow.

3. Current insurance

  • Most likely that employers going through this flow will say "No", so it's selected by default.
  • Right hand side updates to show what we'll do in either situation, so that there's always context on what we'll do.
  • If you do have a previous insurance plan, the visual in the upload area alludes to what you can upload, and there's a scanning animation on the visual while it loads.

4. Adding your employees

  • Introduces the idea that plans cost differently based on a couple factors, only when you get to the upload employee step.
  • Adding employees is as simple as adding a row to a table, and editing happens inline so mistakes are cheap to fix. Adding dependent ages and emails are given a dropdown to allow for detailed inputs and context on why they're helpful.
  • Personally love the animation of pins falling, especially the grouping of pins in close proximity.

5. The quote

  • Instead of showing all the levers, we make suggestions based on their previous inputs. All suggestions are also anchored conceptually to companies similar to them, which provides comfort in social proof.
  • Custom options are there but attention is only called to it when you've clicked back and forth between options, which signals mulling various options over and potentially needing something more.
  • By leading with suggestions and allowing for customizations, I first set the stage of what numbers are realistic to start, and progressively disclose more options if needed .

Options for quote page layout

A two-column layout with the budget controls beside the employee impact

Shipped · Single column with collapsing actions

Roughly explored direction · Controls and impact side by side

Roughly explored direction · A draggable allowance slider

Shipped

Single column with collapsing actions

  • A single column with the actions collapsing on scroll, so the controls and the impact on each employee get read in turn rather than competing for attention.
  • The pattern translates well to mobile.
  • Main tradeoff is that the employees table gets pushed down. Added the black "See impact on 5 employees" to accommodate, with a minor fade out/in when disappearing and reappearing.
  • The animation persists the large number and buttons to preserve the most important elements of the card as you scroll down.

Roughly explored direction

Controls and impact side by side

  • Not focused enough – a side by side view lends itself better when one side is much more important than the other, or when one side contains all the action/inputs.
  • The vertical list of radio buttons wasn't great for showing necessary natural language context for each option.
  • Depending on viewport heights, the left side may have to scroll, which might hide some options by default.

Roughly explored direction

A draggable allowance slider

  • I had hopes for the sliding interaction, but in practice it only works for flat allowances.
  • Similar to above, action/input is required on both sides, and the side needing input will be inconsistent depending on which level of benefits is selected (i.e. slider on right fot "Same allowance for everybody" but nothing on right side for the other options)..
  • Click/drag is a more difficult interaction than simple clicking a button or typing a number.

📈

Impact: A v0 with a minimal, core set of changes was released first, and already saw a 50% increase in employers seeing a quote and a 27% increase in employers sending their first invites.

Back home Back to top