Multi-Step Forms Pattern // Zillow Group

Multi-step Forms Pattern

During the summer of 2020, I organized and led a cross team Experience Audit of Zillow’s Buy/Sell Transact experiences. Among many issues and opportunities discovered, it was evident that every designer and team was building forms differently and with wildly different levels of quality.

This was not only expensive, but even worse, it was a really jarring customer experience. Zillow’s grand aspiration is that people would use Zillow to sell their home, find their next home, finance with Zillow Home Loans and close with Zillow Closing Services, all in a “seamless transaction experience”. Instead we were shipping our org structure to customers resulting in a low quality, high friction and untrustworthy user experience.

 

The Problem

Similarly to Property Card findings a year later, the audit revealed Zillow had no standard practices for designing or building forms. Every team had a different approach to nearly every element or aspect, little of which was grounded in form design best practices.

Mobile forms samples

 
 

Numerous areas of inconsistency

 

The Solution

Research Backed Pattern

I led a small team made of up research and design to develop a research backed cross-functional pattern, based in form design best practices, for use across Zillow Group’s product footprint.

Mobile & Tablet Anatomy Sample

 
 

Desktop Anatomy Sample

 

Validated in partnership with the Rentals org & UX Research.

We ran this new pattern through usability testing to validate that this direction was going to be easier to use than the original single page long-form. It performed very well and was subsequently built out by the rentals engineering org.

Modular Listing Form Mobile Sample

 
 

Modular Listing Form Desktop Sample

 

So much went into this project, drop me a line if you’d like to know more!