Multi-Step Forms Pattern (Wizards)
The multi-step form pattern helped define a Wizard framework to empower designers and developers to move faster, raise the quality bar, and design systematically. We applied the pattern in product to revamp the Zillow Rentals modular listing flow (which used to be a long scroll form), which was then tested numerous times in a 2 week long research blitz and smaller rolling research sessions. This was a very unique design partnership between product designers, system designers, and experience researchers (something that doesn’t happen often at Zillow), which lead to lots of fun, impact, learning, and collaboration.
Duration: 6 months
Team: Sam Cook (Systems designer), Graham Young (Rentals designer), Genny Mangum (Experience Researcher)
Role: Competitive analysis, internal audits, hypothesis framing, best practices research & synthesis, UI design, prototyping, Figma component construction
Problem Area
It was identified through various audits that every line of business at Zillow designed multi-step form experiences differently, resulting in an incohesive user experience. In addition, many of the form experiences throughout Zillow had usability issues, didn’t follow modern form best practices, lacked accessibility and were just plain confusing. It was clear that there was an opportunity to find a way to standardize how we think about and design forms at Zillow.
How might we create a reusable, robust multi-step form pattern that inherits modern form practices while taking into account different business needs across Zillow?
Internal Audits
A few samples of existing form experiences across Zillow business lines.
Areas of opportunity
After tracking down the many different variants of form experiences, we were able to identify the areas for growth + standardization.
The design blueprints and prototype
I leveraged insights and learnings from modern form best practices, competitive analysis and internal audit findings to inform the UI of the new multi-step form blueprints. I then used the blueprints to build out the Zillow Rentals modular listing flow. Below are a few samples (mobile, tablet, and desktop) of the first version of the multi-step form design that I converted into a working prototype in ProtoPie to prepare for a two week long moderated research blitz with our research partner, Genny Mangum.
Research, research!
During our two week long research blitz, we tested the new multi-step form design for rentals modular listing against the original long scroll experience. We ultimately learned that the step by step pattern has clear functional benefits over long scroll (hooray!). We then shifted our research focus to honing specific micro-flows and components within the pattern.
Integration and adoption
After refining the blueprints and pattern due to our research learnings and critique, we were ready to put the pattern out into the wild. Our wizard pattern framework produced two major assets: The starter file and our pattern guidance.
The starter file includes:
1. The UI design blueprints
2. Pattern guidance tips on how to handle different interactive models (i.e. save & exiting, return & edit
3. The case study of the modular listing experience leveraging the multi-step form pattern
4. a FAQ section
The pattern guidance file includes multi-step form guidance on the following:
1. Page architecture
2. Information/Question sweet spot
3. Progress
4. Navigation
5. Guidance & helper text
Reflection
This has been my personal favorite project I’ve had during my time at Zillow. There’s a whole other story on how the multi-step form pattern has evolved since releasing it into the wild- it took on a life of its own! But that’s for another time… :)