LawnGuru · Service booking · Conversational UI

Turning a drop-off-prone Typeform into a conversation that books the job.

LawnGuru's Yard Clean Up form bundled cleanup, mulch install, and weeding into a single Typeform. The work was to break that apart into a chat flow that asks only what the chosen service needs, and to establish which components the chat actually required.

Challenge

One form served several services at once, so every customer waded through questions that did not apply to their order. Photos sat at the end of the flow and were the single biggest source of drop-off, which meant the highest-value input was also the one most likely to be abandoned.

Approach

I containerised the questions into one set per service, so the chat loads only the set for what the customer added, one service at a time. Shared questions like timing, photos, and notes for the pro are asked once regardless of how many services are stacked. Photos became skippable by design, with post-booking automation prompting for them rather than blocking the order.

Outcome

A component audit across all seven services showed roughly 80% of every flow reduces to six reusable chat primitives. Only two custom components were needed: a mulch colour and type swatch selector, and a shared photo attach control with upload progress. Most orders are a single service on standard components, and stacked orders simply repeat the same primitives one service at a time.

Yard Clean Up service page showing how it works, price range, and customer reviews — The service page a customer lands on: what the job includes, a typical price range, and proof from other jobs, before any questions get asked.

Choice between starting with photos or entering details manually — The fork. Photos are the fastest route, but the manual path is offered as an equal, not a fallback, because not everyone can or wants to photograph their yard first.

Photo-first flow: attaching photos and receiving an AI-drafted work order — Photo-first: the customer attaches images, the system drafts the work order from what it sees, and only asks about what the photos cannot answer.

Manual chat flow asking one question at a time with quick-reply options — Manual: one question at a time, answered with quick-reply chips and checklists, with each answer echoed back so the customer can see what has been captured.

Editable work order summarising cleanup, weeding, and mulch install before submitting — Both routes converge on the same editable work order. Every line can be corrected before quotes are requested, so a wrong AI draft never becomes a wrong job.

Containerized question sets for Yard Clean Up, mulch install, and weeding — One question set per service, so the chat loads only what the customer actually ordered. Timing, photos, and notes for the pro are asked once regardless.

Audit table mapping each service to the chat components it requires — Every service mapped to the components its questions need, separating the reusable primitives from the two custom builds worth the effort.

More work

Read case study

Automated Design System

A fully automated design system built with Figma MCP and Claude Code: Figma tokens turned into multi-platform libraries, production-ready React components, and living documentation.