RentCity Case Study

Empathize & Define

The first step in the design thinking process is to empathize— to understand the problems your users (or potential users) are experiencing. Once you have this understanding, you can define what that problem is and make efforts to solve it.

If I was to empathize with my users and define a problem I needed to gather research. I conducted an informal study asking some locals them about their experience searching for rental properties on websites such as Zillow or Trulia. I took notes by hand and was able to define three main “pain points” to tackle in my design.

Pain Points:

1. Complex designs make rental websites complicated to navigate

2. Saved searches are too hard to find on competitors

3. Communication with landlords is off-platform and hard to keep track of

With the main issues defined, I decided to employ the use of personas moving forward. Personas are typically fictional users with unique problems and perspectives. It helps to flesh them out as people to maintain empathy— how old are they? Where are they from? What are their goals and frustrations?

My personas were inspired by the people I spoke with. Raul here was a bit of a blend which combined multiple people’s perspectives. Raul is a 29 year old software developer from Long Beach who wants to find a great apartment where he can work from home with his fiancée. He loves breweries, coffee houses, and living the urban life.

It also helps to create a problem statement for each persona:

“Raul is a software developer who needs an easy, fast, lightweight apartment rental website because he works a lot and has little time to search for a new place to live.”

With personas like Raul, it’s easier to envision how the website would work for different people. Having these to reference along the way was helpful for maintaining empathy while designing.

Ideate

One of the biggest issues my research identified was the challenge of finding saved searches again, so I decided to place those saved searches front and center on RentCity. The second you land on the homepage you see a series of cards containing your searches, alongside the criteria underneath each.

With that in mind, not every user will save searches— so what happens in that case? If a user does not save their searches this area will be filled with recent searches, and if they don’t even have an account (or haven’t made a search yet) it will be filled with a random selection of properties near their current location. The section is adaptable and will respond to the user automatically.

The search page was another very important page to consider. Many of the people I interviewed complained about overcomplicated websites that made searches challenging to understand. I wanted to simplify this as much as possible without sacrificing functionality, so I began by defining 3 primary sections I would need:

1. A Map

2. Search Criteria

3. Search Results

Many other websites will overlay all this information onto the map creating a visually cluttered and confusing design. I opted instead to place the map up top— using a strong visual to anchor the design (and maintaining the structure established on the homepage), with the search criteria directly under the map, and finally a series of cards beneath the criteria so that the results stand out clearly and simply. Clicking on each result will bring up more information about the property, alongside the ability to directly message the landlord.

I switched the structure up a bit when designing the individual listing pages. It was important to me to display as much information as I could on a single page, so instead of opting for a vertical scroll on the desktop site I opted for a horizontal layout broken into two columns. Using columns is a helpful way of decreasing a user’s cognitive load so that they don’t become overwhelmed. The left column contains a carousel of property images, while the right column contains information about the rental, the ability to message the landlord, and an interactive map to highlight what points of interest are near the property. On mobile this becomes a vertical scroll with the map the only element offscreen. I intentionally placed the “Location” title section such that the user would be able to tell they needed to scroll down to see more.

There are more pages and aspects to this design, so instead of listing them all here I’ve decided to make the wireframe interactive so that you can take a look yourself!

Prototype

Next up, we arrive at the Prototype stage. This is the stage where a designer creates interactive, high-fidelity designs based on everything they’ve discovered in the previous stages. I started out by picking the colors and fonts I wanted to work with, as well as designing the look of the cards for each property. I chose coral and teal to create a complimentary color palette. Red and green are complimentary colors on the color wheel which work well together in color theory— however red and green scream "Christmas” to most people, so I opted to shift the colors a bit and pull them away from the Christmas association. I chose to use a white background in my design of the site so that the properties could stand out and be the visual focus on each page. When choosing these colors I made it a point to make sure they were compliant with the WCAG 2.1 AA Accessibility Guidelines by using Adobe Color’s Accessibility Tools.

The Pitfalls of Over-Designing

Now, I must make a confession. As much as I wish the polished color scheme and design I just showed you was my initial design, but it simply was not. At first I created a design which was much more colorful, but unfortunately quite ugly and over-designed. I received helpful feedback from my users which allowed me to reassess my design and accept the truth that, in the immortal words of George Lucas, “I may have gone too far in a few places.”

So what did I do? I accepted the feedback and completely redid the hi-fidelity visual design of the app to make it more pleasant to experience. It’s important to take your ego out of design, and I pride myself on my ability to take feedback and incorporate it into my work.

After all, the stages of design thinking are recursive, and the important feedback gained in the testing stage allowed me to come back into the prototype stage and make much needed changes.

Ok, so how does it all come together? Well, take a look for yourself! Here are a few screenshots for your consideration, as well as hi-fidelity prototypes for you to enjoy.

Test

Alright! Now there’s only one stage left in the design thinking process— and that’s to test the prototype. That’s where you come in! As I indicated above I have already incorporated a great deal of your feedback into this design, and I would love to continue doing so. Please explore the prototypes linked above, and contact me with your thoughts!

If you’ve made it this far, I salute you and thank you for your time.

Signing off for now,
Ivan Potter-Smith