Rentalocity is a modern real estate website for the Canada market. It has in-depth neighborhood and city guides to help users decide the best location, and a variety of in-depth filters (such as school ratings) to go through the available listings.
By the time we kicked off this project, I probably lost count of how many websites I had worked on. At some point in the past year I did a back-end dashboard for another property renting website, but Rentalocity would be the first time I’d completely own the end-user experience and interface of a real estate website.
Gotta say, I was excited for the challenge. And it was going to be a challenge. We had to nail the renter side and also take care of the landlord side — managing listings, communicating with rents, getting paid and more.
As usual, we began doing groundwork on the foundation. My initial set of goals were to:
For the last item, after speaking with the client and running base research, we created a few personas that summarized the users Rentalocity would focus on. Below are the two most important, Josh (Landlord) and Amanda (Renter):
We then moved to to thinking about the most efficient ways of enabling users to accomplish major tasks, such as listing a property (landlords) or finding a specific apartment (renters). We used functionality maps — a tool I absolutely love and recommend — to visualize how this would play out.
For logistical reasons I can’t possibly include all the maps we worked on and its iterations, but below is one example of what these usually look and feel like:
Once we were comfortable with what we had, we decided to move to wireframes and start thinking about how the interface would actually work. We started slowly, focusing on the core interactions. and gradually expanded to cover everything that was needed.
This was an extensive wireframing exercise. A lot of smaller, essential details, needed to be taken care of, and since we weren’t in a tight deadline, we took the time that was necessary to deliver really solid wireframes.
I’ll include a few of them below to give you a sense of what the exercise entailed:
The wireframes provided a really solid foundation of the core UI elements. Once we were happy with where we were, it was time to move on to higher-fidelity representations and incorporate the brand and visual elements.
Only that…there wasn’t a brand in place, yet. I won’t cover the branding exercise here — it probably deserves a case study of its own, to break down the rationale and the decisions made — but the short version is that, after a lot of sketching, we came up with the atomic logo — representing the granularity and level of detail the user could dive into. The client was also keen to differentiate it from the remaining real estate websites out there, most of which use some variation of a house outline.
The different interface elements created had one core objective in mind: versatility. They would:
I’ll list some of the essential mockups below — you’ll see, on the renter side, how the homepage turned out, as well as listing pages, profile pages, list of cities / provinces and some of the landlord experience, too. I don’t want to extend this too much, so I won’t dive in detail of more specific parts — such as the iconography or the color palette, but the following should give you a good grasp at the overall look and feel.
The mockups were well received by the users, client, managers and engineers involved in the project. Looking back, this was really fun to work on and I’d most certainly like to go back to real estate at some point.
The mockups were later passed on to engineering team and we worked together to make sure the final result was faithful to what we had in mind originally. Rentalocity should launch at some point in the next two quarters.