Submission for Kleiner Perkins Fellowship 2021
As a part of the design fellowship application, KP asks you to "redesign a feature of a Kleiner Perkins company's product." I chose to explore the apartment rental platform Zumper as I had just used it to search for a place to call home in the Bay Area.
Timeline: 1 week
Defining the user base.
By defining Zumper's user base and their goals I aimed to provide context for my design decisions. With more thorough user research, some of my decisions would likely change; however, for the purpose of this exercise (and with respect for my academic bandwidth at the time), this felt sufficient.
1 in every 9 Americans moved to a new home between 2012 and 2013, indicating that Zumper is addressing a massive annual market need. Based on this article from Livability I pieced together 4 main personas:
Larry is the majority of our user base. He is moving within the same county, so he knows the area well and knows what he is looking for in a living space.
Nancy is just married and looking to start a household. She is always conscious of her kids and future family life, be it suburbs or city.
Hannah is a young professional who was just promoted and is being asked to relocate. Her income is likely above $50,000 per year.
Ursula is looking to upgrade her current living conditions - be it a newer house, better neighbors, safety reasons, or any other improvement.
Based on my own experiences and mental models built from limited research, I envision that these 4 personas will approach property searching with the following mindsets:
- Precision searching: he knows what he wants and won't compromise.
- Urgency: whether he's unhappy with his situation or facing eviction, Larry wants to move fast.
- Price informed: he knows the area and is knowledgable on property values.
- Family-minded: wants to know the schools, parks, and community events and culture.
- Safety first: wants her kids to grow up in a safe environment so she doesn't have to worry.
- Work-oriented: needs a balance of parenting and career focus; commute time is important.
- Young and excited: she wants to know where the fun is happening!
- Feels foreign: she doesn't know the area well and needs help navigating the new terrain.
- Cost-conscious: she's still paying off her student loans and is saving for the future.
- Wants more: she has a baseline in mind (her current situation) and has an intentional plan for her upgrade.
- Plenty of time: she's not in any rush; she'll wait for the perfect upgrade.
- An expert: she knows the area - and its assets - like the back of her hand.
Scope of the Redesign
Desktop search + filter.
After conceptualizing the user base, I realized that a central part of each persona's experience is identifying properties that best fit their needs. For this reason I decided to focus on the search and filter feature for my redesign.
In this redesign: current product evaluation, comparator studies, and (finally) UI/UX and design system adjustments.
Current Product Evaluation
Spoiler: my key takeaway was the importance of thoughtful information architecture and hierarchy.
- How can a user tell when the landlord wants the renter to move in and what the timeline for that could look like?
- How could a user tell what kind of renter the landlord is looking for? For example, my friends and I are all young adults living together, but sometimes landlords want the renters to be a family, couple, etc.
- How could a user search with nearby amenities in mind? (i.e. public transportation, parks, schools, etc.)
Visual Design Evaluation
A tenet of product design that I've come to value over the last year is the power of a consistent visual language. While evaluating Zumper's UX, I noticed that the visual system had inconsistencies; 3 of these are discussed below. I also used a consistent grid system in the final redesign (not showed here).
I started by sampling all the different colors I could find in-use for the search and filter features. I then sorted these colors by their Hue-Saturation-Lightness values to reverse engineer Zumper's color palette for my redesign.
There seemed to be some key colors missing, so in the redesigned palette (left) I added a red and a purple and filled in the rest of the palette as best as I could.
With more time, I would've been more intentional with the darker colors (I like the CIELAB perceptually uniform approach for choosing text colors), but I'm happy with how this turned out.
<< Image explanation: I started with the sampled colors from Zumper's UI. I then sorted them by HSL and finally constructed the full palette.
Similarly to how I approached the color palette, I sampled all of the greys I could find between Zumper's current search and filter features. I found some text greys were blue-tinted, others were true greys, some text was #000000 black (an absolute no). The lack of text color consistency makes the interface feel disconnected. There also seems to be a disregard for accessibility standards, which can affect millions of users.
I looked at fonts across just the main page and found 7 different styles. The lack of consistency made it difficult to show hierarchy. To the right you can see how I parred down the font styles to only include what was essential for this redesign.
I approach redesigns with a strong focus on auditing competitors and parallel products because my goal is to improve what exists, not invent new features. Below I analyze Zillow, Apartments.com, Airbnb, and Booking.com.
Comparator #1: Zillow
Since Zillow is a direct competitor and incumbent in the rental space, I wanted to be sure my redesign put Zumper minimally in a position to keep up with the top players.
Zillow Key Takeaways
- Integrate the draw feature with other parts of Zumper's interface so users know how it should be applied.
- Include the number of search results.
- More pronounced hover state for the map.
- "Save Search" UX copy: "Save Search" feels the same as "Create Alert" but the UX copy for the former is more intuitive.
- Catch-all filter could be "More" instead of "All" if that feels right for Zumper's platform.
- Filters should be preset to their correct, respective defaults.
- Use the map to show important nearby amenities.
- For number value filters, be aware of the need for minimums, maximums, ranges, exacts, etc.
Comparator #2: Apartments.com
Since Apartments.com is also a direct competitor and incumbent in the apartment-specific rental space, Zumper needs to position itself to keep up with their platform as well.
Apartments.com Key Takeaways
- Indicate media types available to view for each listing.
- Ability to overlay relevant attractions on the map: neighborhoods, transit, school campuses, etc.
- Feature to find transit times from rentals to specified locations. Especially helpful for Hired Hannah and Newlywed Nancy.
- Display how many search results fall into each filter. Also deactivate the filter if there are no results to which it applies.
- Dedicated feature for a guide on the city/county being veiwed. Helpful for Hired Hannah who is moving to a new area.
- Ability to access liked listings and saved searches from the main page.
Comparator #3: Airbnb
Although it isn't a direct competitor of Zumper, they have similar design requirements (looking for properties, filtering, learning more, etc.), so studying Airbnb's interface might provide some fruitful insights on how to make renting an apartment feel like renting a hotel.
Airbnb Key Takeaways
- Structured search can help users feel confident in their initial queries.
- Adding landmarks to the map helps users orient where they should live in the context of work or school. Could also help users better understand the draw feature.
- Consistent visual hierarchy for info that is the same level of importance is key for parsability.
- Position of information (i.e. placement of the price) can communicate hierarchy equally as well as boldness or color.
- Putting "Popular Filters" at the top makes it easier for users to access and implement the most important factors in their searches.
- Short sub-explanations for less common filters can help users comprehend a foreign but useful feature.
- Split up long lists of filters (i.e. "Amenities" and "Facilities").
- Use plain English to provide more context to data visualizations. Remember that visualizations are always meant to help users answer their relevant questions.
Comparator #4: Booking.com
Since Zumper's goal (according to their LinkedIn description) is to make "renting an apartment as easy as booking a hotel," I thought it would be fruitful to see what a hotel booking process feels like on a popular website.
Booking.com Key Takeaways
- Communicating popularity of a property can help users get a feel for how urgently they must act.
- Hotel bookings have a strong focus on ratings and reviews which can be helpful in making decisions. Can this be replicated for rentals as well?
- Preset values are useful to set expectations (for example, price filter).
- "Popular Filters" section can be an asset, but can also feel disjoint.
- Could be helpful if the filters in each section were ordered by their number of applicable results.
- Adding accessibility filters ups the attention to inclusivity, which is always a good case to be aware of.
At first glance it doesn't look too different (success!). My primary goals were persona-centered UX adjustments and visual consistency. I detail these adjustments and recommendations below.
Below is an embedded interactive prototype of the new search and filter interface that I designed in Figma. Feel free to play with this prototype as you wish. In this section I will discuss my UI/UX adjustments and recommendations.
Search Results Feature
Some of my changes to the search results page include improved visual hierarchy with consistent typography and color, additional map features, and adjustments to the content on the listing cards. Before and after below.
- Card has consistent structure and is optimized for the user journey: what information is most valuable when browsing listings? Location, key attributes, top amenities, date posted, and price. Action buttons removed because they felt out of place in the browsing experience.
- Save search, sort, and filter are all separated.
- Popularity indicators and available media badges shown on the listing.
- Number of search results displayed.
- New feature: Search by Proximity. Not built out since this is a redesign and I'm not asked to build a new feature, but conceptually would ask for a location and (if desired) a commute time. Returns locations of rentals that fit those criterion.
- New feature: Show Nearby. Also not built out, but would allow users to overlay schools, campuses, transit, neighborhoods and more on to the map while they search.
- Suggested UX: Open listing in new tab on click. Users like to compare their options. Opening in a new tab allows them to look at multiple at once without losing their place in the search. Borrowed from Airbnb.
The filter page maintains a similar brand identity, but due to layout changes and reorganization it does look quite different from the original.
- Geographic filters are shown on the map instead of in the filters section (i.e. Neighborhoods).
- Number of applicable results added for each filter to set user expectations around filtering.
- More thoughtful filter organization for parsability.
This platform was really fun to work on for a redesign! I love pushing myself to produce designs that convey a lot of information. It's challenging but rewarding to get the hierarchy and structure optimized so users feel knowledgable and confident in their decisions.
Of course, as with any project, I would improve many aspects of my work with more time – particularly fleshing out the new feature ideas, perfecting some visual design instances, adding interaction design, and collecting more data with user feedback. However, I'm happy with how this turned out, and I learned a lot about filter optimization and information communication.