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:

Local Larry

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.

Newlywed Nancy

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.

Hired Hannah

Hannah is a young professional who was just promoted and is being asked to relocate. Her income is likely above $50,000 per year.

Upgrade Ursula

Ursula is looking to upgrade her current living conditions - be it a newer house, better neighbors, safety reasons, or any other improvement.

---

Renter profiles.

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:

Local Larry

  • 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.

Newlywed Nancy

  • 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.

Hired Hannah

  • 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.

Upgrade Ursula

  • 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.

Additional Thoughts

---

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).

-

Color Palette

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.

Greyscale 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.

Font Adjustments

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.

Comparator Studies

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

---

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

---

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

---

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

The Redesign

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.

-

Interactive Prototype

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.

Highlights

Filter Feature

The filter page maintains a similar brand identity, but due to layout changes and reorganization it does look quite different from the original.

Highlights

Parting Thoughts

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.

Up Next