arrow_back

Thatch – Helping our largest employers manage enrollments

Thatch has some large customers. Think mid-size to enterprise companies with 100+ employees, or large enough to have a team dedicated to administering employee benefits. They care a lot about how much of their employee population enrolls in the benefits offered to them, since it helps HR and People teams track the health of their benefits programs.

🚨

Problem: HR and People teams had no visibility into how their employees' enrollments were tracking and, subsequently, no way to nudge employees who are lagging behind.

🎯

Goal: solve the problem :)

Key design decisions on the enrollment tracker

Vertical vs horizontal breakdowns

Visual next to each employee breakdown

1. Vertical vs horizontal breakdowns

  • Horizontal: chosen for visual hierarchy of seeing the large % number first and how the horizontal nature future-proofs for different string lengths of a breakdown's name – if one label was long in a vertical list, then the entire list would get wider.
  • Vertical: skipped because of how the left-hand list pushes the large % number to the right, which makes the page look imbalanced – the focal point of the page should be at the top left.

2. Visual next to each employee breakdown

  • Donut: chosen for its small size and ability to match the green colour of the "enrolled" section below.
  • Percentage: skipped because it could easily be interpreted as, for example, "19% of employees are renewing" instead of "19% of employees who are renewing have enrolled".
  • Meter: skipped due to its similarity to the larger bar visual below and large width that made it less effective as an "at a glance" visual.

Subtle polish details

Tooltips only show up on point and click

Mobile interactions

Hover interactions on segments

Hover interactions on employee pills

1. Tooltips only show up on point and click

When the tab bar scrolls and your cursor is stationary while tabs scroll by underneath, the tooltips don't show up to prevent flashing of tooltips. Tooltips will only show up when explicitly pointing with the cursor.

2. Mobile interactions

Clicking once does the same thing as hovering on desktop so that you can preview the big number before deciding if you want to see all. It maintains the ability to see the isolated views one tap away without needing to use the visual indicator of "View all" text repeated down every single legend item.

3. Hover interactions on segments

The large % number stays the same width so that the smaller text doesn't do slight jumps around while hovering, making it easier to read. Upon hovering over items, "View employees" appears for affordance that clicking does something, and other items are greyed out to give the hovered segment emphasis.

4. Hover interactions on employee pills

When filling in the employee list of folks to nudge, the list can get long given larger employers are mostly using this feature. If you're adding somebody and not sure if you already added them, hovering over a person that's already been added will turn their pill black in the text input for easy identification.

Upcoming deadlines

  • Deadlines are grouped by how long is left, with the most urgent one carrying a red day count and a "!" badge nested inside at the top left.
  • Each spells out the consequence in words — who goes uninsured, for how long — rather than just a date.
  • There's always an action associated with an upcoming deadline so that employers can easily act on any given insight.
Back home Back to top