Mark Spain Real Estate, a cash offer flow drawn, tested and rebuilt three times.

The Guaranteed Offer program gives a homeowner an all cash offer with no showings and a close in as little as 21 days. I took the intake flow behind it from hand sketches to a shipped product across three high fidelity versions, and tested each one against live traffic before drawing the next.

My goal was to ask one question per screen, so that requesting a cash offer never asked a homeowner for more than a tap of a button.

From pencil to shipped, in five passes.

Ten hand sketches became eleven wireframes, then three high fidelity versions. I tested every version against live traffic, and the result decided what I drew next.

01 Sketching

Sketching one question per screen

I sketched the flow by hand before anything was built. I drew ten sheets, each carrying a section label, one question, a slot for an image of the house, the answer set and a single forward control. I drew the header and the footer on every sheet rather than leaving them to the build.

The alternative was one scrolling form. That puts every field in front of a homeowner at once, and the number of fields is what a seller weighs up before deciding whether to start. One question per screen keeps that count off the first screen.

Every version after this one kept the structure the sketches set.

The sketch board, drawn screen by screen.

02 Wireframing

Wireframing the whole path

I took the sketches into Figma as eleven low fidelity wireframes and filled in the paths the pencil had skipped. I nested specific radio stations under the attribution answer, drew an appointment picker as three days and six times, and gave the flow an appointment confirmation and a thank you screen.

Greyscale kept the review on the questions. I rewrote two of them here, because the wireframe made it obvious they only read correctly with an illustration above them.

Everything version one was built from was settled in this pass, including the appointment picker.

Low fidelity, including the paths the sketches skipped.

03 Two flows

Testing two flows against live traffic

I built two high fidelity flows from those wireframes and ran them against live traffic. Both open on a photographic hero, take the address, then collect name, email and phone immediately afterwards, and both carry a line illustration above every question. Flow A ends on submission, with Mark Spain Real Estate calling the seller. Flow B adds a self service appointment picker between the last question and the confirmation.

The picker was the only difference between the two. It asks a seller to commit to a date before an offer exists, which is a separate decision from the one they came to make.

Flow A converted ahead of Flow B. Drop off concentrated on the appointment step, among sellers who had already answered every question.

Flow A, carried forward. Submit, and the team calls.

Flow B. The seller picks a date before any offer exists.

04 Contact last

Moving contact capture to the end

Version one asked for name, email and phone on the second screen. Version two moved all three to the last. The yes and no tiles became full sentence rows, so a chosen answer reads back without the question above it. Next stays disabled until an answer is selected, the contact fields validate inline as they are filled, and the TCPA consent language sits directly under the submit control.

The qualifying questions are cheap for a seller to answer. Asking for them second put the largest request in the flow on a screen where the seller had answered one question.

Version two converted ahead of version one. Contact capture has stayed at the end of the flow since.

Version two. Full sentence answers, validation inline, contact last.

05 The card

Rebuilding the question as a card

Version two still ran each question down a full page with an illustration above it. For version three I lifted the question onto a card floating on a light ground. I moved Previous and Next inside the card at its top edge, so the controls stay in one place whether a question carries two answers or seven. I took the illustrations out and ran a progress bar under the header.

I turned attribution into a branch. A seller names radio, television, billboard or online, and the screen after it asks which station, which channel or which platform, so every submitted lead carries the placement that produced it.

Version three converted ahead of version two and shipped. Removing the illustration brought every answer above the fold on a phone.

Version three. The question sits on a card with the controls inside it.

Seven screens, the same card at every width.

The shipped flow runs seven screens from the address field to the confirmation. The attribution branch adds one more, where a seller names the station, channel or platform. The desktop build uses the same card at a wider measure.