From the very beginning, even before understanding RE/MAX’s goals and concerns, we knew tackling a massive real estate website would probably mean thinking on a larger scale than usual. Whether it’s a platform like BMcar’s or a b2b Saas website like Quobis’ the majority of our projects here at Miew have specific target audiences in mind. Not RE/MAX Portugal, though. After all, every UX and Marketing persona you can think of (provided that they are of legal age and can actually own or rent a house, of course) need a place to call their own. And that was a major challenging point for us.

Luckily we had a strong team. Bruno Coelho from RE/MAX helped us understand the business needs thanks to his frankness and availability — he was the most valuable asset in order for us to fully achieve the product vision. Additionally, collaborating with our partners in crime DevScope is always a pleasure. João Sousa was awesome at coordinating the team and was always open to discuss new ideas. Last but not least, shout out to Frederico for being the bridge we needed for the final product.

Following the Design Thinking process, we started by collecting data using ethnographic research, a process that was essential to identify a suitably diversified sample of users who were later observed doing an array of tasks. Next, we conducted contextual interviews. During this process, we managed to capture a whole range of data in regards to the user behavior regarding the previous website, as well as the most common user flows. Interestingly enough, even as diverse as our user pool was, we noticed that most people were stuck in the exact same pain point, one that here translates as a specific bad user flow.

Running a successful real estate business means keeping an eye on the user flows that generate the most leads in order to boost sales. RE/MAX’s previous website simply wasn’t optimized to support the user along their way to accomplish what they were aiming for. Picture this — you want to buy your first house, so you make your way to a real estate agency. The moment you arrive, you ask for the nice agent with the radio voice you’ve talked on the phone with just yesterday, but the receptionist asks you to wait on a nearby couch, so you do… for one hour. See, that’s bad performance. The couch is an ugly green color, the room is drab and windowless, you start to feel a little bit skittish. Also, why is everyone so on edge? Not a good impression so far, right? Next, someone comes in and takes you to your appointment only for you to be sat down on a high chair by someone holding a drill.

That’s when a terrifying thought sinks into your mind.

“Is this RE/MAX?” you ask.

“RE/MAX? That’s upstairs, buddy. This is a dentist. Now open up!”

This is what we’d call a bad user flow.

When you’re left in the wrong place at the wrong time or when you don’t get what you’ve wished for. If your users have been wanting to buy a house and end up in a dentist chair, you might need to review the way your website and communication are structured. You probably don’t want to be the reason someone ends up in such a dreadful position, after all.

That’s how we knew we had detected a major pain point. Not because people were ending up in a dentist chair, don’t worry. No, because the process of renting or buying a house online was puzzling, even exasperating for most users. An unnecessary labyrinth of menus and filters, they said. Therefore, from this point forward, our main concerns would be performance, quick navigation, and smart search.

Additionally, we interviewed RE/MAX’s agents to understand their struggles as someone who is on the other side of the process — someone who is not looking to acquire a product but to sell said product. This brings us to how important the website is to the agents as well. Their personal page and agency page work as digital business cards of sorts, after all. Giving their best impression while having their job optimized was the best outcome they were hoping for. A new and improved real estate single page also meant having the means to showcase everything from mansions to apartments to terrains to their full potential. However, during our research, we’ve concluded that most users don’t search for a particular agent at first, but rather they prefer to browse through the results offered by their initial search instead.

The RE/MAX Portugal average user is also prone to be thorough in their search for a house. They take their time, probably throughout the course of many days, even weeks, so we knew a ‘Save search’ and a ‘Favorite’ buttons would be mandatory so that the user could quickly resume their search whenever and wherever they wanted.

Finally, we analyzed RE/MAX’s direct competitors and a few of the big worldwide names in the real estate business. We made sure to take notes on some of their own problems and solutions as well. Mostly, we were interested in studying their UI, UX, user flow, IA, and key features, and we noticed so many of them had either the same pain points as RE/MAX’s previous website, or presented similar solutions to prevent this outcome.

Now we had the overview we needed to identify what we could do to improve the user experience. Not only in terms of flow but also in terms of micro-functions that could really boost the comfort of buying or renting a house online through the roof (no pun intended).

From our numerous brainstorming sessions, we took note of the ideas we wanted to implement. Here are a few of them:

• Simplified search and filters — In response to our thorough UX analysis, we’ve focused our efforts on the creation of responsive-friendly components and a quick and easy-to-navigate flow. We wanted to highlight our search bar by displaying it front and center on the homepage and reprising it several times across the website every time a search bar was needed. Using the same component or functionality throughout a website or a platform is a great way to educate the users on how to use it. An element of familiarity makes it easier the next time the user encounters the same component. The search bar we designed allows the user to switch between the two focal categories — rent and buy — and uses autocompletion to suggest searches quickly, being them regions, agents, or enterprises. From there, the user can filter through several features and details, without compromising how easy it is to float between categories. Through our later analysis, it seems most users start their flow by this search bar, which means we’ve accomplished what we set ourselves for.

• Simplified cards — Product cards should be summaries of the content you will find inside. This can be hard to accomplish when you have so much information in number and diversity. Our main challenge here was to funnel said information to strip it to its bare minimum. What’s the user’s foremost interest when looking for a house? Once again, different personas imply different needs and different house typologies imply different available data. We looked through all of them carefully and concluded that price, region, typology, area, the number of rooms, and the number of bathrooms were the big winners. In addition to this, we also designed a discreet ‘Add to Favorites’ button on the top right corner, and reserved areas for tags.

• Agent pages — RE/MAX Portugal has over 9000 agents and each one of them has a story to tell. To showcase each of these stories we needed to understand what key points they had in common and which ones should be highlighted the most. This has been a long process, one that lasts to this day. One thing we wanted was to facilitate the conversation between the agent and the user in the era of social media and digital conversations. That’s why the contact widget has been such a focal point during our design process.

• Content — instead of your run-of-the-mill static image on the product single page, we wanted it to be possible to upload different media formats like video or a 360º view, making the experience of browsing through a house/terrain more engaging and trustworthy in the process. Also, we were aware that most content like apartment photos, copywriting, and profile pictures would be uploaded by agents, both in their own single pages and estate single pages. Making the content fit as diverse as it is proved to be a challenge all on its own.

• Browsing directly on a map — Having the ability to pinpoint the area you are looking for in a map and look through the options available seemed like the best compromise between practicality and comfort. This option is prompted by a toggle, for the user can still make a search by overall city or region, of course.

• Mobile-first — With more than half of the users preferring mobile over desktop, we needed to prioritize lower resolutions during the wireframing phase. Cards especially were made to suit mobile screens first.

Once we had the problem identified and the solutions pinpointed, we were confident we would be able to conceive a prototype. We were ready to move forward!

• Colors — RE/MAX’s signature color combo of blue, red, and white might be a bit jarring for some users on some screens, a combination that might create accessibility issues if not dealt with properly. A less colorful and more minimalist approach would also help us achieve a better user experience through a quicker search, as our brain can better focus on what requires attention when it doesn’t have other colors, motion graphics, or different fonts to process, after all. Let alone on some people’s cases where certain conditions mean they have trouble focusing, to begin with. So how does one make a website look like RE/MAX without looking like RE/MAX? Simple. Through toned-down versions of the original colors, like pastel blue. Thus, we decided on using the original blue on CTAs and other clickable elements alone, including tags, dropdowns, and toggles. While red was only used in very specific parts of the website as an accent color to wrap everything together.

The course wouldn’t be as swift as expected, however. 2020 started and the COVID-19 pandemic was waiting just around the corner to burst our little bubble of blissful hope. Even though our client meetings were already fully digital (we’re stationed around 300 Km apart), what were previously team brainstorms in the office made way for remote team brainstorms through Google Meets. This was the first project we would be working on remotely, amongst the chaos of rethinking all the work methodologies we used to hold, so dear and the uncertainty of a bleak future. Nonetheless, we pulled through with flying colors.

We were facing yet another problem: the design handoff. Especially because we wouldn’t be working with our own developers this time but rather with our awesome partners at DevScope. This marked our first large-scale project. We settled on using Zeplin to exchange assets and, so far, it has worked wonderfully in our favor. Zeplin is a handoff platform that allows us to upload our designs directly from Sketch and the developers to download assets and strings of code that help them during the implementation phase.

Another solution that worked really well for us was the construction of a real estate Design System. You could say it was the key to achieve our goal in simplifying the process of handoff between the design team, as well as the prototyping phase itself. A design system is a compilation of components and patterns that can be used to build a website or app. Because of how important cards, menus, and search bars are, the design system helped us put things in perspective and optimize decision-making when building components. We knew we didn’t need to build a new card because we already had one that could be adapted to our design system. We didn’t stray into using more colors or text styles than we needed because we had a style guide in place that anyone inside the project could study. Design systems should be developed by the whole team, from designers to developers, and are a good way to consolidate UX research in UI components that can be later stored and reused.

RE/MAX’s design system has been our most successful yet because of its expanse and attention to detail, but also by how useful it proved in the times of COVID-19 and remote work.

Between UX research, persona profiling, design systems, accessibility awareness, and remote working RE/MAX Portugal reflects a lot of the work we usually do behind the scenes and served as a culmination in the momentum we’ve been picking up ever since the beginning of Miew by its expanse and diversity but also by our clients’ demanding but always constructive feedback (Thank you, Bruno!).

We’ve gone a long way since the first client meeting, but we’re not done with this project yet and big updates are coming soon. We can’t wait to see what will come next. There’s still a lot of work to be done — features and new pages to address — but we’re sure RE/MAX will be one of those projects that will forever live rent-free in our memory (pun intended this time).