Rishab Realty web design

User Research / Prototyping / Web Design
Looking up to the skyscraper from ground
client
Rishab Realty
project type
User Research / Prototyping / Web Design
project year
2023

Background

My friend Rishab, is a new licensed real estate agent who is looking to make a footprint in Toronto – GTA real estate market. As a realtor, it’s quite important to have a digital presence so that people looking for properties to buy, sell or rent can get in touch with him. The first step towards this goal is to have a website for his business.

Discover

Problem

Currently, Rishab isn’t having any website highlighting his real estate profession & related details. Here’s are some problems due to non-availability of real estate agent website.

i. Limited Visibility: Without an online presence, potential clients will have difficulty finding Rishab. Most people begin their search at home with online mode first, and if Rishab isn’t there, he might miss out a big chunk of potential clients.

ii. Low or no Credibility: Some buyers perceive a credibility issue for the realtors without online presence & recommendations.

iii. Issue with Listings publication: A website is a tool to share listings, photos, videos, book showing and detailed descriptions. Without one, Rishab has to rely solely on brokerage firm services and social media, which can limit the amount of information to be provided.

iv. Restricted Marketing Opportunities: Social media campaigns, email campaigns, and pay-per-click advertising, can be very effective for real estate agents.

v. Lack of Data Analytics: Websites can provide insights on user behavior, which can help understand what types of listings are popular and how visitors are interacting with content. This will help Rishab to set up the future marketing strategies.

Goal

The objective of the project is to create a user-friendly website for Rishab’s real estate business that enhances the experience of potential homebuyers and sellers when interacting with it.

The website aims to cover all the major needs identified during the subsequent user research.

Business requirements

Based on the interviews with Risab, following requirements have been chalked down which needs to be vetted with research outcomes.

i. Property Search: Search feature with filters for location, price range, property type.

ii. Map View & List view: Map as well as list view to see properties based on user choice.

iii. Property Listings: Show listings with images, detailed descriptions, book a showing.

iv. User Profile – Creation & Login: Allow users to create accounts for saving favorite listings, set up preferences, and receiving personalized recommendations.

v. Contact Forms: Have contact form for inquiries, scheduling property viewings and additional information.

vi. Testimonials and Reviews: Display client testimonials and reviews to build trust and credibility.

Identifying Users & their needs

i. Potential Homebuyers: Individuals and families searching for homes in specific locations, with varying preferences and budgets.

ii. Home Sellers: Property owners looking to list their homes and receive support in the selling process.

iii. Investors: Individuals seeking investment opportunities in real estate.

Research plan creation

In order to gather user insights and market data for successful design and development of a user-friendly and effective website for Rishab, here’s the key research questions and methods discussed and finalized with client.

1. Key Research Questions

i. What are the homebuyers and sellers’ preferences and pain points while browsing real estate agent websites?

ii. How buyers search for properties and what are the valuable features for them in a real estate agent's website?

iii. What are the must have information & resources for a real estate agent's website and effective way to present them?

iv. How users want to contact real estate agents, and what methods to be used for inquiries or appointments?

v. What are the current best practices and trends in real estate website design and functionality?

2. Research Methods

i. User Surveys: Sample Size: 280 potential homebuyers and sellers(43 responses received).

Starting with screener questions so that survey is being filled by target audience, following with survey questions. The demographic data is asked at the end of the survey reducing the possibility of abandoning the survey mid-way as many participants may feel them bit tedious.

Based on the survey, following results were concluded

- 85% of the respondents use mobile device.

- 60% of the respondents prefer location and price range as primary filtering criteria for the searching the properties.

- 58% prefer online reservation for property showing.

- 70% respondents prefer both map and gallery view of the properties.

Click here to go to user survey link

ii. Competitive Analysis:

Scope: Analyze the websites of 3-5 leading real estate agents and agencies.          

Focus Areas: Site purpose, primary categories, content type, flows, CTA , personalization & others.

Click here to view the competitive analysis report

iii. User Interviews:

Sample Size: 15 potential clients

Inquiries: Explore their experiences, preferences, and challenges when searching for properties and interacting with real estate agents.

Click here to view the questions prepared for the interview

Persona

Based on the feedback & responses received from the initial research, the following 3 personas were developed to focus on.

3 personas for the project

Click here to view the persona in Figma

Define

1. Develop the User Stories

Personas hold the lights for developing the user stories. Initial focus is to develop as many user stories possible to identify every possible use case.

Here’s the list of user stories developed from the persona to work on:

As a Homebuyer:

Story 1 :

As a homebuyer, I want to be able to search for properties based on my specific criteria (location, price range, number of bedrooms, etc.)so that I can find homes that match my preferences.

Story 2 :

As a homebuyer, I want to view high-quality images and virtual tours of properties, so I can get a better sense of what each listing looks like.

Story 3 :

As a homebuyer, I want to save my favorite listings and create a personalized account, so I can easily access and review them later.

Story 4 :

As a homebuyer, I want to receive email notifications about new listings that match my saved preferences, so I don't miss out on potential homes.

Story 5 :

As a homebuyer, I want to see information about nearby schools and neighbourhoods, as this is an important factor in my decision-making process.

Story 6 :

As a homebuyer, I want to be able to contact the real estate agent directly from the listing page, so I can inquire about specific properties.

Story 7 :

As a homebuyer, I want to easily schedule property viewings online, so I can efficiently plan my visits.

As a Home Seller:

Story 1 :

As a home seller, I want to see my property as an exclusive or highlighted one on the website, providing detailed information and high-quality images, to attract potential buyers.

Story 2 :

As a home seller, I want access to tools that help me understand the market value of my property, so I can set a competitive listing price.

As a General User:

Story 1 :

As a general user, I want the website to be easy to navigate and user-friendly, so I can quickly find the information I'm looking for.

Story 2 :

As a general user, I want the website to be mobile-responsive, so I can browse listings and access information on my smartphone.

Story 3 :

As a general user, I want to see testimonials and reviews from previous clients, so I can gain confidence in the real estate agent's services.

2. Prioritize the User Stories

Once all the possible user stories are crafted, the task of prioritization of stories begin. Here, the Pareto principle (80-20 rule) is considered to select the stories keeping in mind that 80% of time users use 20% of features.

Going ahead with this thinking, following user stories are prioritized for building the website.

Story 1 :

As a homebuyer, I want to be able to search for properties based on my specific criteria (location, price range, number of bedrooms, etc.)so that I can find homes that match my preferences.

Story 2 :

As a homebuyer, I want to save my favorite listings and create a personalized account, so I can easily access and review them later.

Story 3 :

As a homebuyer, I want to receive email notifications about new listings that match my saved preferences, so I don't miss out on potential homes.

Story 4 :

As a homebuyer, I want to see information about nearby schools and neighbourhoods, as this is an important factor in my decision-making process.

Story 5 :

As a homebuyer, I want to be able to contact the real estate agent directly from the listing page, so I can inquire about specific properties.

Story 6 :

As a homebuyer, I want to easily schedule property viewings online, so I can efficiently plan my visits.

Story 7 :

As a general user, I want the website to be mobile-responsive, so I can browse listings and access information on my smartphone.

Story 8 :

As a general user, I want to see testimonials and reviews from previous clients, so I can gain confidence in the real estate agent's services.

3. Crazy 8s

Crazy 8s helps me to push beyond my first idea, which is often the least innovative, and to generate a wide variety of solutions to the challenge.

Hand written Crazy 8's for the project

4. User Flows - By Hand

Once Crazy 8s are done, I have created user flow to take care of all the focus areas discovered in the ideation phase. User flows are first done by hand, to generate more possible potential flows. Sketching by hand provides me more flexibility and fluidity to rearrange the flows.

Hand written user flow for the project

5. User Flows - in Figma

The finalized user flow is been done in Figma.

Here’s my finalized user flow for the project.

User flow designed in Figma

Click here to view the user flow in Figma

6. Site Maps

The site maps are next created to show the overall hierarchy of the application and also depicts the relation between subsequent pages.

Here’s my site map for the project.

Site map designed in Figma

Click here to view the site map in Figma

7. Wireframe

As a design deliverable, I have next developed the wireframe to ensure that features, scope, and product intention are clearly understood by all stakeholders before anyone starts creating visual assets or writing code.

8. Lo-Fi Prototype

With wireframes done, I have now converted them to lo-fi prototypes for testing and stakeholder feedback.

Here’s my lo-fi prototype for the project.

Thumbnail for low fidelity prototype

Click here to view the Lo-Fi prototype in Figma

9. User Testing

The lo-fi prototype is being now tested with the interested participants from research phase to collect feedback and check if the concerns and requirements have been addressed or not.

Here’s the feedback that has been received about the lo-fi prototype

  • Need some sort section in menu bar and enlist resource materials or added services like – seller’s guide, buyers’ guide, mortgage calculator, free home evaluation
  • Agent contact button in customer profile, search results and within detailed property view to enhance the chances of calling the agent.
  • Mortgage calculator in detailed property view, so that customer can calculate mortgage charges before requesting a viewing.
  • Sellers want to have their properties highlighted separately in the website, as this can increase the chances of getting their properties sold at the earliest.

10. Incorporate the Feedback

The feedbacks are being incorporated into wireframes to align the design as per the stakeholders requirements.

Develop

1.Create the Mood Board

Mood boards are inspirational and directional, so I make sure to includes anything that will help me establish a foundational look and feel for visual design.

Here’s the mood board for the project -

Mood board for the project

Click here to view mood board in Figma

2. Finalize the Typography

I have selected 3 typography – Roboto, Noto Sans and Crimson Pro due to availability of several font weights and variables. It will help to present the design and content as clearly as possible. Noto Sans has been selected for typography.

Here’s the view of fonts for display, headings and others –

Typography selected for the project

Click here to view typography in Figma

3. Color Palette

I have decided to use M3 design to generate color pallet based on the logo of the website.

Here’s the color palette based on the logo for the website –

Color palette for the project

Click here to view the color palette in Figma

4. Hi-Fi Prototype

After setting up the typography, color palette and mood board, it’s the time to work on hi-fi prototype

Here’s the hi-fi prototype for the project.

Thumbnail for high fidelity prototype

Click here to view the hi-fi prototype in Figma

Deliver

1. Usability Test

The hi-fi prototype is being now tested with the interested participants to collect feedback and check if the concerns and requirements have been addressed or not.

Here’s the feedback that has been received about the hi-fi prototype-

  • User flows for various sections has to be uniform.
  • While selecting from Menu, page should drop down or move up to the selected topic.
  • Filter search section should allow multiple selection of bed room numbers and house type.
  • A page to show all the photos of property and enlarge any particular photo.

2. Incorporate Feedback

The feedbacks are being incorporated into hi-fi mock-up to align the design as per the feedback.

Conclusion

What I learnt

This is a project that I am very passionate about. There were times where I wasn’t 100% sure on making a decision so I decided to ask the right questions and test them out. I found out the answers within many of those user testing, which resulted in consistent creative output.

In considering further development of the current minimal viable product, I would like to see if the enquiries have improved.

I believe these goals can be achieved through user research, ideation, prototyping, wireframing and usability testing.

Other projects

Have a question about my work? Let's chat!

Connect with me to bring your ideas to life through compelling design and seamless user experiences. Let's collaborate and create something extraordinary together.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.