From address to cash offer.
Mark Spain's Guaranteed Offer buys a house outright and closes in as little as twenty-one days, with no showings, open houses or repairs. It starts with a homeowner typing an address into the website. BrilliantUX rebuilt the site around that one action, and live traffic settled every layout that followed.
The goal was to build the site for mobile devices first where most of the traffic already was, so that applying for a cash offer never needed more than a thumb.
Ten page templates, no shared components.
Mark Spain sells homes for cash through its Guaranteed Offer program. The business depends on a single input from a homeowner: the address of the house. An audit of the existing site found ten page templates, each built at a different time to answer a different question about the company. A visitor could move through all of them without being asked for an address.
How might we rebuild a marketing site so that every page moves a homeowner toward a cash offer, without any page feeling like a funnel?
No shared conversion path
Each template answered a different question about the company. The address ask appeared on two of the ten pages, both of them built to collect it.
Inconsistent, dated components
Years of page-by-page additions left layouts, type and components that no longer matched. Most traffic to the site came from mobile devices.
No route from content to conversion
A visitor convinced partway down a market page had to navigate back to one of two other pages to act on it.
Incomplete lead records
The form captured a name, a phone number and an address. All other property data was researched manually before the first conversation.
Six pages, one architecture.
The engagement did not start on the website. It started with a current state audit and a process map, and the page designs came out of both. The eight steps below are grouped into the four phases: discover, define, develop, deliver. Each of the six primary page templates was taken through this process in full. For brevity, the steps below follow it through the homepage, which carries the shortest path to a Guaranteed Offer.
Discover · Current state audit
Auditing the existing site.
Mark Spain sells homes for cash through its Guaranteed Offer. The business depends on a single input from a homeowner: the address of the house. The existing site had grown a page at a time, each built at a different time, with a different design, to answer different questions about Mark Spain Real Estate and their offerings.
Without a cohesive conversion path throughout the site, a visitor could find themselves on an informational page, then careers, then the blog, yet never be asked for an address, the primary goal of the site.
Discover · Process mapping
Mapping the current state lead process.
An initial current state audit identified the methods of primary lead ingress and how they progressed into a converted lead.
- 1Lead arrives A homeowner submits an address on the site or calls the sales line. The lead lands as a new record.
- 2Contact entered Name, phone number and email are typed into the record by hand while the homeowner waits on the call.
- 3Source entered The marketing source is typed in by hand as a separate required field.
- 4Fields checked Every required field on the record has to be complete before the agent can move on.
- 5Marked converted The record is marked converted here, two steps before an appointment exists.
- 6Routing tool opened Agent availability lives in a separate tool, so the agent leaves the record to go and look for a slot.
- 7Appointment booked A time is agreed with the homeowner and written back into the record.
Our research identified friction points in the current state lead ingress process, with four of the seven steps requiring manual data entry, and none can be skipped before progressing to the next stage. This became problematic to conversion, as an agent would not be able to confirm availability to meet with a potential lead unless every required field on the record was complete.
Define · Future state
Reordering the process.
While the future state map was not much shorter than the current state, the same work was proposed to occur in an automated fashion, improving efficiency.
- 1Lead arrives A homeowner submits an address on the site. Nothing else is asked for.
- 2Address captured The address is the single input the business needs, so it is the only thing collected up front.
- 3Record populated Public property data fills the record automatically. The property is valued, measured and checked against the coverage area before anyone speaks.
- 4Appointment booked Availability is known by this point, so real times are offered while the homeowner is still engaged.
- 5Details completed Contact details and marketing source are filled in after the appointment is set, not before it.
- 6Marked converted Conversion is marked at the end of the sequence, once an appointment actually exists.
The address is captured first, so the record populates itself from public data. The property is valued, measured and checked against the coverage area before the agent meets the lead.
The reordered process and the IA work set the requirements for the redesign. The critical requirement was the collection of a home address. Contact details, marketing source and the remaining record fields move after the appointment.
Every template was built from that requirement. A single address field, repeated wherever a visitor might stop reading, replaced the contact forms the previous pages led with.
Define · Information architecture
Defining one job per page.
The future state architecture was mapped from the site’s navigation and footer, with six primary page templates identified as the primary redesign scope. This allowed the remaining ancillary pages to leverage the designed templates, so Mark Spain Real Estate could continue site modernization, even when this engagement was finished.
- Guaranteed Offer
- Sell Your Home
- Signature Collection
- Find a Home
- Lease a Home
- New Construction
- Mortgage Calculator
- Georgia 6
- North Carolina 3
- Florida 3
- Texas 2
- Tennessee 1
- South Carolina 1
- About Us
- Careers
- Success Stories
- Blog
- Mark Spain Foundation
- Contact Us
A single job was written for each template. Every job named the same outcome: keep the Guaranteed Offer reachable from that page.
- Homepage
- Guaranteed Offer page
- Sell your home page
- Market page
- Careers page
- Blog
Develop · Wireframes
Drafting low fidelity wireframes.
Structure was settled first, in grey boxes with no photography, colour or type decisions in them. The first homepage wireframe laid out three ways to sell across the top, five reasons to choose Mark Spain, a row of statistics, and a contact form at the bottom of the page. The hero introduced the company rather than asking for anything.
Develop · Design exploration
Exploring eight directions.
Mobile devices were identified as the primary source of site engagement and lead ingress, so every direction was drawn at mobile width first. Eight directions were drawn in parallel rather than refined one at a time. Each direction was then iterated within its own family.
Eight homepage directions, drawn at mobile width.
The direction that carried forward moved the transaction into the hero: a headline naming the offer rather than the company, and the address field placed on the hero image.
Two more changes came out of reviewing the page in states a static frame does not show. The call to action left the screen with the header, so it was detached to sit on its own. It appears after a delay once a visitor has stopped engaging with the page, which puts the address field back in front of someone who has read past the hero and stopped, rather than waiting for them to scroll back up to it. Tapping it opens the field with the mobile keyboard raised, so several heroes were mocked up in that state rather than only at rest.
Develop · Design system
Building a shared component set.
Existing design system components were refined, and new components were designed at this stage. All future state pages leveraged the modularity of these components to reduce redundant design efforts.
The address bar
One field and one button. Every enquiry the business receives arrives through this component, so it is the only part that repeats within a page. On a long page it appears three or four times, because a visitor can be convinced at any point in the scroll.
The call to action that outlives the header
The header scrolls away and takes its button with it. As the header leaves, the button detaches and remains in the corner for the rest of the page. A version with a bar fixed across the bottom of the phone screen was drafted and rejected.
Proof you can take in while scrolling past
The company track record is set as large numbered blocks rather than as a paragraph, so the figures register while a visitor is scrolling past them.
What happens after you hand over an address
Submitting a home address to a real estate company is a high commitment action. A four step account of what happens after submission sits on the page, before the visitor has to decide.
The conditions, before the form rather than after it
The offer carries eligibility conditions: single family, built after 1950, inside a defined value band, owner occupied or vacant. A homeowner whose property does not qualify finds out on the page rather than after submitting an address.
The footer, drawn once
The footer is the same on every template, so it was built as one component rather than laid out again on each page. It carries the site navigation and the company details, and it is the last place on the page a visitor can act.
Deliver · Testing and launch
Testing against live traffic.
Eight high fidelity heroes were tested in dark and light themes, alongside test variations in CTA and field positioning. Testing measured engagement with the address field at some stages and completed submissions at others, with the test identifying the simplified field forward variant as the winner.
The version in production, and the hero variants it was tested against.
The launch version added lightweight animation across the site, scoped to the four jobs Nielsen Norman Group found motion actually does well: feedback, state change, spatial orientation, and signifying what is interactive. Considering static visuals often get missed to change blindness, and since peripheral vision is built to catch movement, an animated response is often registered to users, where a static one is not. Every animation on the site is designed to be unobtrusive, brief and subtle, yet eye-catching. Laubheimer, Nielsen Norman Group, 2020
Scroll the row sideways for the other two.
What shipped.
The goal was a site where applying for a cash offer never needed more than a thumb. What runs today is ten templates rebuilt from one component set. Four things changed across the site.
One component set across ten templates
Every page was rebuilt from the same components. A homeowner meets the same ask in the same form on a market page, an agent profile or the homepage.
The address ask on every page
The address bar ships on all ten templates and repeats three or four times on the longer ones. A visitor no longer navigates back to another page to act.
Routes added to every content page
The three market pages, the agent listing and profile, the sell page and the careers page each carry a route to the offer. Each route sits alongside what the page was already there to do.
The tested direction is in production
Eight high fidelity heroes were tested in two families, measured on engagement with the address field and on completed submissions. The form forward version runs in production and the nine other templates were built from it.
Where it shipped
