The Challenge

The website had to reinvent the way people search for their next home as well as provide convenient and powerful tools for real estate agents and brokers.

Realo's goals were threefold:

1. Become the go-to real estate database of future homeowners;
2. Empower the user by providing as much information and data as possible about their possible new home;
3. Provide real estate agents and brokers with intuitive and powerful tools to plan and follow up on appointments.

My Approach

I was hired as employee #2 and was the first designer on the team (the other person being a developer). In the early days, my task was to do research on all aspects of a real estate platform and present that at the end of each week to the managing team (my boss and my Head of Product). I created presentations and presented my findings while gathering feedback from the team.

As time went by, more and more people joined the team and my role became more focused. Working alongside Realo’s development team (around 5 people), I created an internal design system using HTML, CSS & Javascript to enable the developers to easily construct pages and layouts. This also proved very useful when new members came on board.

My main co-worker was Bregt Colpaert, Head of Product at Realo. We’d have meetings every other day to make sure we, as a team, were on the same level and that the product was headed in the right direction. We created sketches, screen designs, and various prototypes which enabled us to test our work before sending it off to the development team.

Each Thursday of the week, we’d have a so-called Product Meeting where Bregt would present our design work to the managing team and gather feedback. With that feedback, I’d plan my week accordingly and check with the development team to see what’s being worked on and what needed my attention.

This proved to be a very efficient way of working. I had a clear goal to keep me focused each week while, at the same time, I could provide design feedback to the development team from the managing team.

Making data easy to digest

One of the main challenges of designing Realo was the sheer amount of data we wanted to provide to our users. Everything from charts, maps, photos, and various interactive widgets needed to be designed in a way that it didn’t overwhelm the user. Using the aforementioned design system, I could quickly prototype our typography and colour palette in various scenarios.

When we started development our development team made the decision to have two separate codebases: one for the desktop version of Realo, and one for the mobile version. Since many sites were adopting a single codebase due to the rise of Responsive Web Design, it was my job to convince the team to go this route as well. Using my coding skills, I developed a few pages using this approach. The results were staggering, we saw a reduction in page load by 14%, and our codebase shrunk by over 26%. In other words, it didn’t take much to convince the team.

Due to my extensive experience with building responsive sites and native apps, it didn’t take long to make sure every layout displayed correctly on nearly every screen resolution. In this time, communication with the dev team was key to get everyone on the same level.

Result

After about 7 months of hard work and user testing, we were ready to unveil our creation to the world. Realo was easy to use, fast, and responsive. It was a real breakthrough in the real estate market and still is to this day. Members of the press praised Realo’s intuitive design. Users were impressed by the data we provided them.

Due to the nature of a startup, I learned a lot in terms of how to successfully work on many aspects of a product while, at the same time, communicate efficiently with a multilingual team.