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. The process starts with a homeowner typing an address into the website. I redesigned the site around that one input, and A/B testing against live traffic decided which layouts shipped.
-
No shared conversion path
Each template had been built to answer a different question about the company. The address field appeared on only two of the ten templates.
-
Inconsistent, dated components
Years of page-by-page additions left layouts, type and components that no longer matched, on a site where most traffic came from mobile devices.
-
No route from content to conversion
A visitor ready to act partway down a market page had to navigate to one of the two templates that collected an address.
-
Incomplete lead records
The form captured a name, a phone number and an address. All other property data was researched by hand before the first conversation with the homeowner.
-
Role
UX design, information architecture and design system
-
Scope
- 10 page templates
- 6 primary templates
- Design system
-
Method
- Current state audit
- Process mapping
- A/B testing
-
Platform
Responsive web, designed for mobile devices first
My goal was to design 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 tap of a button.
From current state audit to A/B tested launch.
I started with a current state audit of the site and a map of the lead process. I then took each of the six primary page templates through the four phases below. The steps follow the homepage, the template with the shortest path to a Guaranteed Offer.
01Discover
Auditing the existing site.
I audited the ten page templates on the existing site. The site had grown one page at a time, and each page had been built in a different design to answer a different question about Mark Spain Real Estate and its offerings.
I found no cohesive conversion path across the site. A visitor could move from an informational page to careers to the blog without once being asked for an address, the one input the Guaranteed Offer depends on.
01Discover
Mapping the current state lead process.
I mapped the lead process to see how leads entered the business 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 check availability.
- 7Appointment booked A time is agreed with the homeowner and written back into the record.
The map exposed the friction in the current state lead process. Four of the seven steps required manual data entry, and no step could be skipped. An agent was not able to confirm availability to meet a lead until every required field on the record was complete.
02Define
Mapping the future state lead process.
The future state map moves the same work into an automated sequence. The address is captured first, and the appointment is booked before the remaining admin is completed, while the homeowner is still engaged.
- 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 the agent meets the lead.
- 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.
- 6Marked converted Conversion is marked at the end of the sequence, once an appointment exists.
The future state removes one step and every manual entry that stood before the appointment. Because the address arrives first, the record fills itself from public data, and the agent starts the first conversation with the home already valued.
The reordered process set the main requirement for the redesign. Every page had to be able to collect a home address, while contact details, marketing source and the remaining record fields moved after the appointment.
A single address field, repeated at the points where a visitor was likely to stop scrolling, replaced the contact forms the previous pages led with.
02Define
Defining one job per page.
I mapped the future state information architecture from the site’s navigation and footer. I sorted its 30 pages by what each one needed to do and identified six primary page templates to cover all of them, so Mark Spain Real Estate can keep building pages from them after my work wrapped.
- Guaranteed Offer, Guaranteed Offer page template
- Sell Your Home, Sell your home page template
- Signature Collection, Sell your home page template
- Find a Home, Sell your home page template
- Lease a Home, Sell your home page template
- New Construction, Sell your home page template
- Mortgage Calculator, Sell your home page template
- Georgia, Market page template6
- North Carolina, Market page template3
- Florida, Market page template3
- Texas, Market page template2
- Tennessee, Market page template1
- South Carolina, Market page template1
- About Us, Careers page template
- Careers, Careers page template
- Success Stories, Blog template
- Blog, Blog template
- Mark Spain Foundation, Careers page template
- Contact Us, Careers page template
I gave each of the six templates a single job, and every job included keeping the Guaranteed Offer one step away from that page.
Homepage
Used by 1 page
Introduces the Guaranteed Offer and asks for an address in the hero, before a visitor has to scroll.
Guaranteed Offer page
Used by 1 page
Explains how the program works and which homes are eligible, then asks for the address.
Sell your home page
Used by 6 pages
Sets out the ways to sell a home with Mark Spain, with a route to the offer from each one.
Market page
Used by 16 pages
Introduces the local office and its agents in each city, with the address field carried down the page.
Careers page
Used by 4 pages
Lists current openings for agents and staff, with a route to the offer for homeowners who arrive there.
Blog
Used by 2 pages
Answers homeowner questions about selling, with a route to the offer from every article.
03Develop
Drafting low fidelity wireframes.
I drafted low fidelity wireframes to define structure before making any photography, color or type decisions. 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, under a hero that introduced the company without asking for an address.
03Develop
Exploring eight directions.
Most engagement and most leads came from mobile devices, so every direction started at mobile width. I drew eight directions in parallel and then iterated each one within its own family.
The selected direction moved the address field into the hero. The headline named the offer, and I placed the address field on the hero image, so the ask that had sat at the bottom of the wireframe became the first thing on the page.
I also reviewed the page in its scrolled and tapped states. The call to action scrolled off screen with the header, so I detached it into a sticky component. It appears after a short delay once a visitor stops engaging with the page, which brings the address field back to anyone who has scrolled past the hero.
At rest
The call to action sits over the page after the header has scrolled away.
Tapped
The address field opens with the mobile keyboard raised. Several heroes were also mocked up in this state.
Submitted
The homeowner enters an address and submits it without leaving the screen.
03Develop
Building a shared component set.
At this stage I refined the existing design system components and designed new ones. Every future state page was assembled from this set, which removed redundant design work across the ten templates.
Address bar
The address bar is one field and one button. Every web inquiry the business receives arrives through this component, so it repeats within a page. On a long page it appears three or four times, so a visitor can act at any point in the scroll.
Sticky call to action
As the header scrolls off screen, its button detaches and stays in the corner for the rest of the page. I also drafted a version with a bar fixed across the bottom of the phone screen, and chose the detached button.
Track record blocks
The company track record is set as large numbered blocks, so the figures can be read at a glance while a visitor scrolls past them.
Four step process
Submitting a home address to a real estate company is a high commitment action, so the page explains the four steps that follow a submission before a visitor is asked for an address.
Eligibility conditions
The offer carries eligibility conditions: single family, built after 1950, inside a defined value band, owner occupied or vacant. A homeowner sees the conditions on the page before submitting an address.
Footer
The footer is the same on every template, so I built it once as a single component. It carries the site navigation and the company details, and gives a visitor one last place to act before leaving the page.
04Deliver
Testing against live traffic.
I A/B tested eight high fidelity heroes against live traffic in light and dark themes, with variations in call to action and field placement. Some rounds measured engagement with the address field and others measured completed submissions. The simplified, field forward variant won and runs in production.
The version in production, and the hero variants it was tested against.
I added lightweight animation across the site for launch and scoped it to the four purposes Nielsen Norman Group identifies for motion in UX: feedback, state change, spatial orientation and signifying what is interactive. Static changes are often missed due to change blindness, and peripheral vision is sensitive to movement, so an animated response is more likely to register with users. I designed every animation on the site to be brief, subtle and unobtrusive. Laubheimer, Nielsen Norman Group, 2020
Scroll the row sideways for the other two.
What shipped.
The redesigned site keeps the address field within reach of a thumb on every page. I rebuilt ten templates from one component set, and four changes run across all of them.
One component set across ten templates
Every page was rebuilt from the same components. A homeowner sees the same address field, in the same form, on a market page, an agent profile or the homepage.
The address field on every page
The address bar ships on all ten templates and repeats three or four times on the longer ones. A visitor can request an offer from the page they are already reading.
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. I added the routes without displacing the content each page was built to deliver.
The tested direction is in production
The field forward hero that won the A/B test runs on the homepage, and the other nine templates were built from its layout.
Where the redesign shipped.
Each page below runs in production and was built from the same component set. The walkthroughs show each page at desktop and mobile width.
Leading every section toward the address field.
The homepage exists to capture leads. The Guaranteed Offer explainer, the proof points, the property imagery and the FAQ each move a seller toward entering an address. On mobile the Get cash offer button stays fixed to the bottom of the screen, so the primary action is always in reach.
Comparing the ways to sell before choosing one.
The sell page serves homeowners who have decided to sell and are choosing how. The ways to sell with Mark Spain are set out side by side, with the Guaranteed Offer among them, and each option carries its own route to the offer, so a homeowner can compare them without leaving the page.
Answering local sellers with local data.
Each city page is built for homeowners searching to sell in that city. The address field leads the page with autocomplete, and the estimate it returns comes with an option to schedule time with a local agent. A Local Market Snapshot, how the Guaranteed Offer works and a directory of nearby cities follow.
Splitting buyers and sellers at the state level.
The state page introduces Mark Spain’s agents in Georgia and splits buyers from sellers in the hero. Sellers are taken through the cash offer benefits, an address field, the market snapshot and local resources, and every city in the state is listed so a visitor can move to their own market.
Connecting a homeowner to the local office.
The market page is built around one local office. Its hero pairs finding an agent with the address field, and the coverage area map shows the neighborhoods the office serves, with active listings for each on hover. The market snapshot, local resources and office information follow, so a seller can judge the office before reaching out.
Offering a valuation before an offer.
The home valuation page serves homeowners who want to know what their home is worth before they ask for an offer. The address field leads, followed by the three steps to a valuation and the four factors that determine a home’s value. A sample valuation report shows what the homeowner receives, and a Guaranteed Offer field sits further down the page.
Putting named experts behind the blog.
The authors pages give the blog its credibility and support search visibility. The author directory is filtered by office and sorted, and each card shows the author’s role, location, a short bio and article count. The Guaranteed Offer address field closes the page, so content readers stay one step from an offer.
Splitting agent and corporate hiring with one toggle.
The careers page recruits two different audiences, licensed agents and corporate hires. The reasons to join and the core values come first, and one toggle splits Agent Careers from Corporate Careers so each group lands on its own openings. Openings are searched by keyword, department and office, and a job alert can be created from the results.