Objective
Our goal was to extend Zillow Group’s offering beyond just the search experience into the full lifecycle of a renter - from finding the perfect rental, to applying and eventually paying rent. We felt confident we could be a trusted platform for renters (and landlords) given our brand recognition in the real estate space.

Designing at scale
An interesting part of this project was the desire to build something once and have it work for multiple brands. This meant the UX design would be the same across all 3 brands but the visual design might be slightly different. Tackling a project in this way was very new for everyone involved and required many discussions around how we might be able to pull this off. In order to do this we built a new design system made up of components that could be skinned for each brand.

Visual Exploration
I got more involved in this project when Trulia wanted to do some exploratory visual design work to see what direction we could take these new products and really push into some new territory visually. Initial wireframes had already been developed by other designers for rental applications and payments so we selected a set of screens to explore. After a couple workshops and shareouts, we narrowed in on one direction that we developed further as we moved into the visual design phase of the projects.

Start Screen Explorations for Rental Application Onboarding

Multiple Screen Visual Explorations

Defining the MVP
When I joined the Rent Payments team, designs has been developed to allow landlords to set up and start receiving payments for their property. This would notify the renter to start their payment onboarding and complete the payment setup process.

By the time I can onto the project, we had one designer working on the landlord side of the experience and one designer on the renter side. I took over designing for the renter side and ultimately both sides once we launched. The Trulia engineers were building lightweight components based on initial designs. This allowed them to get started laying the foundation while we continued to finalize the design work for the MVP. I extended the initial designs by finalizing all the additiona states and uses cases as well as applying the final visual design. As we all worked together to get the MVP built and ready to launch, it was all hands on deck, requiring lots of pairing with engineers to get things nailed down as best we could.

Renter Onboarding Prototype (WIP)
_{*note this is a basic prototype given it was made in Sketch and I’ve hooked up screenshots*}

Post-Launch
After we launched our beta we continued to add features that we knew were needed for the product to be successful. We tested and monitored our beta as we continued to roll it out to a larger audience.

We overhauled our onboarding experiences for both the landlord and renter after testing the MVP and realizing there were obvious improvements we could make.

There are many more insights and learnings on this project that I’d be happy to share!

MAY 2018

KARI WALDREP

ABOUT ALL