Home Listing Onboarding

Company: Modern Care Homes
Role: Design Engineer
Team: With Spencer Grzincich, Software Engineer
Status: Shipped

Product Design
Design Engineering
Illustration
Motion
React
TypeScript
SVG
Activation Flow

: Short steps from a license to a submitted listing
: Care axes, each with its own illustrated plot
Up from 23: Care camera while it pans

A guided flow that takes a care home owner from their state license to a listing ready for review, one short step at a time. I designed it and built the front end.

Problem

A new owner only got in when an admin invited them from their license. They landed in the full listing editor with a checklist, couldn't save a draft without three gallery photos, and publishing put the home straight in front of families with nobody checking it first.

Task

Give owners a way to claim their own home and get it to a listing worth publishing, without starting in the full editor, and give the Modern Care team a look at every home before families do.

Process

Designed and built in code, one step at a time, with each step in Storybook at desktop and phone widths. Spencer's care taxonomy set the structure of the care step, and the flow ships behind a feature flag.

The problem

Modern Care Homes lists residential assisted living homes in Arizona. Every one of them already holds a state license, so the owner and the address are on record before the owner ever visits the site.

The first version used that, but only from the admin side. An admin invited the owner from their license, and the owner landed in the full Manage Home editor with a checklist of everything a listing needs. Nothing would save without three gallery photos, and the publish button put the home live right away.

The design solution

01
Start from the license.
Owners search for their own home. Picking it fills in the name, address, care type and capacity from the state record, so the first question is just "is this you?" Progress is underway before they type anything, which is the whole point of momentum.
02
One topic per screen, saved as they go.
Seven short steps in three phases, each saved on its own. Photos and care are no longer required for a draft, so an owner can stop at any point and pick up later. Progressive disclosure does the rest: each screen asks only what its step needs.
03
Draw the home as it's described.
Every step has an isometric illustration that reacts to the form. Long checklists turn into a yard that fills up, which shows progress better than a counter does. It borrows the reward of a game's progress loop without the points and badges.
04
Review before families see it.
The last step submits the home to the Modern Care team instead of publishing it, and emails them a link to check it. That step is friction on purpose, the one place a slower path protects families.
05
Readable for everyone.
Welcome text stays at 16px or larger, the illustration pins above the form on phones, and on touch screens a tap never moves the page.

Step by step

Find your home: a welcome, an isometric house with a map pin, and a search for the licensed home’s address

Step 1 of 11

How it got here

The illustrations started as a way to make a long form feel shorter, and changed a lot once I could click through them.

The yard started as an empty lot

The first amenities stage was a blank grid of plots waiting to be filled. The next version filled them, but in black outlines with flat color, and the objects floated with no sense of a place. The shipped yard keeps the line work but lightens it, brings in Modern Care's palette, gives each object its own detail and an animation when it lands, and arranges them like a real backyard.

Shipped amenities step: a detailed yard with a garden, patio umbrella, walking path and wifi router — Drag to compare. Pick a pass on the left: the empty lot, then the outlined objects, against the yard that shipped.

Early amenities step: an empty isometric grid of dashed plots beside the checklist — Drag to compare. Pick a pass on the left: the empty lot, then the outlined objects, against the yard that shipped.

The book became a desk

The About step first opened on a blank editor with tips above it and a book being written in. The desk replaced the book, the letter on it fills in as the owner types, and the tips moved into the draft itself as bracketed prompts, so the owner edits instead of starting from nothing.

Shipped About step: a pre-written draft with bracketed prompts, beside a writing desk with a letter, lamp and mug — Drag to compare. Tips above a blank editor and a book, against a draft to edit and the writing desk.

Early About step: tips listed above a rich text editor, beside an open book with a pen — Drag to compare. Tips above a blank editor and a book, against a draft to edit and the writing desk.

The care yard got a camera

Early on, the whole care yard sat above the checklist at once, and on a phone each object was small. Splitting care into one plot per axis, and adding a camera that moves in close to the axis being edited, made every tap visible.

The shipped care step on a phone: the camera close on the bathing plot, above the ADL Support checklist with Bathing and Dressing checked — Left, the first pass on a phone: the whole yard at once. Right, shipped: the camera close on the axis being edited.

An illustration system

I wanted setting up a listing to feel delightful, not like paperwork. The illustrations carry that: each one moves as the owner answers, so every checkbox and every room gets a small reward on screen.

The figures are one isometric system, drawn as SVG components in the codebase and animated in CSS, so each one reads the form's state directly. Nothing is a static export.

From a skill to a brand

I started the figures with iso-figure, a skill that has Claude draw isometric line art as plain SVG. It gave me a base where the angles, line weights and proportions already agreed. From there I designed on top of it in Figma to make it friendly and on brand: fuller color from Modern Care's palette, softer shapes, and a yard with room for every amenity an owner can pick.

A sparse isometric amenities scene in thin line art: a house, a router, a tree, a washer, a TV, a bed, a table and a car on a gray plate — Drag to compare the skill's starting point with the yard I designed on top of it.

0:00

The camera pulling back from one plot to the whole yard.

Every care attribute

The yard draws 48 care services, each with its own object, chosen so it reads at a glance: a rubber duck for bathing, a pill organizer for medication, a piggy bank for money management.

0:00

Each axis from empty, every service added in turn as an owner would pick it.

Here they are on their own.

ADL
Bathing
ADL
Dressing
ADL
Toileting
ADL
Continence care
ADL
Eating
ADL
Grooming and oral hygiene
IADL
Medication management
IADL
Meals

The amenities yard with every amenity switched on

A writing desk with a letter, a lamp and a mug

After it's live

Once the team approves a home, the owner keeps it current in the Manage dashboard, the editor new owners used to land in on day one. Spencer built the dashboard; I redesigned the two pages owners come back to most, so they read like the flow that came before them.

Care, in the same eight groups

The care step and the dashboard share one taxonomy. Care is grouped by the same eight axes, and in the dashboard each axis opens in its own dialog, a bottom drawer on a phone. Saving one axis replaces only that axis's answers, so two people editing different parts of a home don't overwrite each other.

The Manage dashboard's Care page with the ADL Support dialog open: six services, each with a one-line definition, Bathing and Dressing checked — Each axis edits on its own, with every service defined in plain words.

The ADL Support editor as a bottom drawer on a phone, with Save and Cancel stacked at the bottom — On a phone the same editor opens as a drawer from the bottom.

Availability families can trust

Open rooms are what families act on, so the Availability page leads with how fresh they are. A badge reads when the owner last confirmed them, rooms sit in one table with their details as chips, and several can be updated or removed at once. With no rooms, the page shows an example room and says plainly that the home stays unavailable until one is added.

The Availability page: a Last confirmed 3 days ago badge, and a rooms table with East, West and Garden Room, their details as chips, and Available or Unavailable status — Rooms in one table, with when they were last confirmed up top.

The Availability empty state: Add your first room, an example Garden Room card, an Add button, and a note that the home is unavailable until rooms are added — The empty state shows what a room looks like before there is one.

How I built it

I designed this in code rather than in Figma. The flow and its illustrations were new, and the questions that mattered, like how a yard fills up, how a camera pans and how a step feels on a phone, only had answers once they moved.

Storybook first. Every step has stories at desktop and phone widths, including the awkward states: an empty price, a shared room with no gender set, a review with something missing.
Smooth motion. The care camera panned at 23fps. Moving the transform onto the SVG's own box brought it to 60.
Built on the shared system. The steps use the product's design system components, with one new pattern: a double-bordered panel that frames every block of content in the flow.
Tested where it counts. Submitting is covered for an incomplete draft, a non-owner and a home that's already been submitted.

Where it stands

The flow is complete and running behind the home-onboarding feature flag while the pull request is in review. Before it opens to owners I want to check touch behavior on a real phone, and then measure time to submit and where owners stop, step by step. The next piece I'd design is the email that says a home is live: it should show owners their listing as families see it, so coming back feels like picking up where they left off.