Real Homes

Walkthrough
Why I decided to work on this project?
OUTDATED INFORMATION AND COMPLEX NAVIGATION

I decided to work on this project because real estate is a growing market that has been proven not to have enough updated resources and easy navigation, making the user experience confusing and hard to understand, especially for many first-time buyers looking to find a new home.
According to my research, the main problems of these web apps tend to be:
User Persona:
Rashida
Quotes
“I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for, quickly!”
“It’s really frustrating that I have to go to an app to see my nutrition and then to another to see my physical activity”
Job title and experience
As an IT consultant for a growing tech company, Rashida is frequently on the go and often holds meetings by phone in her car while driving. She is good at multitasking and relies heavily on technology to help her with this.
Goals
● Rashida makes a good living and wants to invest in a property beyond the city for increased financial security for her family.
‍
● She wants to find the right information for fast decision-making.
‍
● She wants a tool to help her find the right properties so as not to waste her time.
After some research and my persona, I tried to meet the needs of the user by:
‍

Starting designing my ideas with low-fidelity wireframes

Homescreen
This is the overview and
below are more details of the
property by categories
Wish lists page
Sending a message to
the seller after clicking
"Talk to an agent"

A Mood board to choose the face of the app

After carefully considering Rashida’s priorities and aspirations, taking care of the structure and concept of the app, I was inspired to choose this mood board. I believe her foremost concern is securing financial stability for her family. Navigating the real estate market can be overwhelming, for this reason, I wanted to present a calming and practical approach to the process. This is why I incorporated warm hues and imagery of cozy homes in the mood board. My goal is to provide Rashida with a comforting and confident experience as she sets out to find her dream property.

Adding color and style to the wireframes:
Style guide and project brand guidelines

Typography

Brand colors/Palette

I chose these palette with the main color of the app being blue, it has some shades and complimentary colors that where the closest to the colors on the mood board.
Why? these colors bring trust and hope for the user.

Icon set rules

Rules: all icons must have a padding of 2px by 2px, with rounded corners of 1, 2x width, this is to keep consistency with the UI elements.
Complete style
guide presentation
After implementing UI elements and styles, I did the final designs, where I had some changes , like the shape of the buttons is less rounded and more like the navigation bar on the bottom. The navigation bar is a floating button that disappears when  scrolling down to save more space to see the
information and whole picture of the properties.

The primary color is blue, the secondary is green which was used primarily for green to keep a contrast and there's hints of brown as well.

Final design of
high fidelity wireframes

Welcome to Real Homes, where the journey to finding your perfect property begins! Designed specifically for new, small-scale buyers seeking additional income or financial security, as well as those on the hunt for their first home, Real Homes offers a safe haven in a crowded and confusing real estate market.Our mission is to simplify the process and eliminate any confusion for first-time buyers. We believe that purchasing a property should be a positive and stress-free experience, which is why we provide ample resources and guidance every step of the way. And just like a new home should feel like your own, we aim to create a web app that feels like a warm and welcoming environment. Come home to Real Homes!
See prototype
Extra:

Responsive Design

My goal with the responsive design was to be able to display how the app would look on different settings, I tried to stay loyal to the design, keeping the navigation as it was for the tablet and since I have more space at the top of the desktop, it was better to put it there to have more space for the content of each page.
Tablet designs
Desktop designs

Conclusion

Current real state/propierty selling apps can be a challenge to use due to outdated information and complex navigation systems, specially for first time buyers. I created Real Homes with the goal of making the process easier.
Though it was hard to find a way to build this prototype (specially the navigation architecture part), I achieved to do some improvements by letting the users talk directly to the sellers about all the questions they might have, curating the information of the properties by section (so users don't have a bunch of information and they feel overwhelmed by it), and having a navigation bar at the bottom, in this way they could find things faster within their account.
LinkedinDownload my resume