HOME DETAILS PAGE V1: DEFAULT STATE
Goal: Create a flexible template that can be used in multiple states to display varying amounts of information per home.
HOME DETAILS PAGE V1:
FOR SALE
For sale homes have photos and contact information above the fold.
To meet business concerns the Zestimate is shown farther down the page.
This page can have a lot of customer provided information, or very little, so the layout scales to hold the available information.
HOME DETAILS PAGE V2:
REDESIGN
Objectives
- Show both a medium rectangle ad and a skyscraper ad above the fold at 1024
- Fix the width of the page at 1024 to maintain readability
- Provide clear paths into data instead of showing it all at once
- Provide a clearer way back to search results and a consistent browse column on the left
Solution
Focus on the top 3 user persona goals and the top 3 business goals to create a more balanced layout which shows the most important information up front.
POST HOME FOR SALE
Objectives
- Simplify a multi step process into a single page.
- Make it possible for owners or agents to post their home for sale and show appropriate inputs for either case.
Solution
Instead of creating a multi page wizard, I condensed the optional information into expandable inline forms. The user feels prompted to enter more information without being overwhelmed.
POST HOME FOR SALE
Expandable Sections
Clearly labeled expandable form sections tested well with people. They did not feel overwhelmed and found what they wanted.
MULTI-SELECT FORM INPUT
Goal: Create an interaction pattern for an easy to use multi-select input that could be used everywhere on the site.Examples
In the posting process the user needs to be able to select multiple options from a page already filled with options. The same is true of the map page. This interaction pattern worked well in both places.Note: The overall map UI and look & feel were done by another designer.
POST HOME FOR SALE
Posting Process User Task Flow
I created a user task flow to help business and development teams understand what we needed to build to meet everyone's needs.View Visio file (requires Visio)
View GIF file
FAVORITE HOMES NAVIGATION
Goal: Allow users to immediately get to their home without doing a search and going to the map.Favorite homes Mini Nav
It was a problem for regular users of our site to always have to go through search to get to their home. I created this navigation device to help regular users get to their homes.
SIDE BY SIDE MAPS
Goal: Show our Zestimate and street map data along with the Bird's Eye Imagery.Bird's Eye & Street Map
The Bird's eye imagery is very helpful for users, but does not contain the street map information to help users orient themselves or the Zestimate information that is the core value proposition of the site. This layout allows users to see both at the same time and easily cross-reference information.
REAL ESTATE WIKI
Goal: Create a Wiki for our users to share real estate information.Wiki Content Page
This wiki content page allows users to easily edit and contribute information. Unfortunately due to development time constraints we were unable to do some core wiki features such as search.
WIKI EDITOR
We used this floating edit panel to allow users to edit content easily inline.
SITE ARCHITECHTURE
Goal: Diagram the basic overall site flow to help product teams have a comprehensive view of what we were building.Site Flow Map
One of my core duties during the first few launches of Zillow was to visualize all of the possible features into a comprehensive site plan that would show core navigation paths (and road bumps) for our users. This site map was very helpful during all phases of development from planning to test to help everyone know how things were supposed to fit together.View Visio File (requires Visio)
WIREFRAMES
Goal: Build simpler views of pages to define goals with team.Posting Example Wireframe
Often it is necessary to talk at a high level with team members to define strategy and goals of a project without getting bogged down in deciding what colors to use. These wireframes were helpful in early discussions to define core elements of user experience before starting on hi fidelity prototypes.Posting Form Wireframe
Posting Landing Page Wireframe
Home Details Page Wireframe
Home Page Wireframe