I was the sole designer working with a product manager and development team.
We wanted to improve the consumer facing agent directory experience to help buyers and sellers find and connect with agents. We felt we could surface more relevant information to help the consumer decide which agents to learn more about and ultimately contact. Originally we persisted with recommendations, but in the end we switched to five star reviews as our agent profile redesign moved forward.
After some initial sketches, I put together a bunch of rough wireframes to test out ideas visually. The product manager I worked with on this loved to print these out and draw on them, and I found that style of communicating ideas very effective because we could both see them visually on paper.
As shown above, I was trying out different layouts, and surfacing different metrics. Ultimately we decided to keep the top bar layout in order to remain consistent with our property search, which was also going through an overhaul at the time. To determine what information to surface in the limited space for agents, we conducted a round of user testing. It was in this user testing that we determined our iconography around recommendations was confusing. Facebook had dominated recognition of the "thumbs up" icon, and most of our participants thought it meant that the agent had been liked on Facebook, instead of being recommended by a client or colleague. Fortunately, we were soon moving to five star reviews, so the "thumbs up" icon would not be an issue anymore.
In user testing, we also found that consumers cared most about reviews, followed by an agent’s experience in the area where they are searching. Users were much more interested in agents with photos than those who had not uploaded a photo; agents without a photo seemed suspicious. Users were concerned that agents with a large amount of Active Listings would be too busy for them, so that was a consideration as well. We also determined that users were unlikely to contact the agent from this condensed view; they were much more likely to click through to the agent's profile first.
The final design was in use on trulia.com through the beginning of 2018. Some of the choices that we made in finalizing the design included only displaying the contact button on rollover, making sure we surface reviews prominently, showing the agent's acitivity in the location that the user entered for their search, and prioritizing agents with photos over agents without a photo. We also rolled up several search parameters into the search bar at the top so the user may filter down the list if they wish to find someone that specializes in something more specific or has a specific qualification.
Agent directory landing
Another facet to this project was creating an agent directory landing page. Users would land on this page if they clicked find an agent but did not enter any criteria for their search. We wanted to showcase the improvements we'd made to the agent search, as well as the jump from recommendations to five star reviews. Below are some versions of the landing page that I proposed. There are different visual treatments as well as some different marketing language and hierarchy between them.
In the end, the team decided to go with something simple and straight forward, using our expierence language's icons at a larger scale to communicate key concepts at the bottom.
Zillow Agent Finder hack project
In early 2017, for a hack week project, I took a stab at revamping the zillow.com "Agent Finder" experience. I took the learnings I had from doing the same thing for Trulia several years earlier, as well as the priorities from the product manager I was working with and gave them several options for an alternative experience. The problems presented by the current version include the top featured agents being ignored because they look like ads, the same map repeating all the way down the results list, the sort by option getting almost completely lost, and a generally difficult to scan layout. A new priority for this hack week was including special badges for agents that have a high rating in a specific skill. These would not be badges they could pay for, but would rather be based on performance.
One approach I took was a card type layout with expandable information. We could still highlight three agents, and hopefully they would not be skimmed over as was the case in the current design. We could also still have large photos, and promote the new badges.
Another approach I took was moving the search criteria bar to the side. I did this for two reasons. One, you could more easily have that bar follow the user as they scroll down the page as it will not be covering any info. Secondly, we didn't seem to need such a wide space for the information we were surfacing. I thought it might make for a nicer layout in a slightly narrower box. I also pulled out the sort by dropdown to a place where it was more discoverable.
These approaches were well-received, however the badging idea and redesign has been tabled for now.