Mark Spain Real Estate, a cash offer flow tested through three versions.

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

The goal was to raise completion on the cash offer request by asking one question per screen, with every qualifying question answered in a single tap.

From sketches to the shipped flow, in five passes.

Ten hand sketches became eleven low fidelity wireframes, then three high fidelity versions. Every version was tested against live traffic, and each result set the change made in the next version.

01 Sketching

Sketching one question per screen

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

A single scrolling form was the alternative. It shows every field at once, and a seller judges the effort from the field count before deciding whether to start. With one question per screen, the first screen asks for an address and nothing else.

The one question per screen structure was kept in every version after this one.

The sketch board, drawn screen by screen.
02 Wireframing

Wireframing the whole path

Eleven low fidelity wireframes took the sketches into Figma and added the paths the sketches had left out. Specific radio stations were nested under the attribution answer, an appointment picker was drawn as three days and six times, and the flow was given an appointment confirmation and a thank you screen.

The wireframes were kept in greyscale so the review stayed on question wording. Two questions were rewritten in this pass, because they did not read correctly without an illustration above them.

The structure, the question wording and the appointment picker used in version one were all settled in this pass.

Low fidelity wireframes, including the attribution branch and the appointment picker.
03 Two flows

Testing two flows against live traffic

Two high fidelity flows were built from those wireframes and run 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 flows, so any gap in conversion could be put down to it. It asks a seller to commit to an appointment date before an offer exists.

Flow A converted ahead of Flow B and was carried forward as version one. Drop off in Flow B concentrated on the appointment step, among sellers who had already answered every question.

Flow A, carried forward. It ends on submission, and the team calls the seller.
Flow B asks the seller to pick an appointment date before an offer exists.
04 Contact last

Moving contact capture to the end

Version one asked for name, email and phone on the second screen, straight after the address. 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 take a single tap each. Asking for contact details on the second screen put the largest request in the flow in front of a seller who had answered one question.

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

Version two, with full sentence answers, inline validation and contact capture on the last screen.
05 The card

Rebuilding the question as a card

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

Attribution became 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, and the two questions rewritten in the wireframes already read correctly without it.

Version three, with the question on a card and Previous and Next 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.

The shipped flow running at desktop width.
  • Contact details. Name, email and phone sit on one card above a single Get My Offer button.

  • Address entry. A single field opens the flow, so every question after it is about a known property.

  • Ownership check. The address the seller typed is repeated in the question.

  • Listing status. Previous and Next sit inside the card, above the question.

  • Selling timeline. Four options are offered, from immediately to less than twelve months.

  • Attribution branch. The seller names the station, channel or platform behind the first answer.

  • Confirmation. The screen explains what happens next, above three resource cards.