↑

Home

UX/UI Design 2022-2023 | A real estate platform
Market Research
User Persona
User Flows
Sitemap
Wireframes
Prototyping
Usability Testing
High-fidelity UI
Responsive Design
Mood Board
Style Guide
The prototype can be live-previewed from here.
View the prototype ➜

Project

A responsive web app with a focus on Mobile-First Design developed as part of the certified UI for UX Design course at CareerFoundry.

Role

Existing UX Research |
UX Designer | UI Designer

Timeline

2 months

Tools

Figma, Adobe Creative Suite, Optimal Workshop, Diagrams.net, Google Drive & Form

Deliverables

User Experience Prototype, User Interface Prototype
Mood Board, Visual Style Guide, Iconography

Why I made this project?

"I wanted to use my background in architecture and my experience looking for a house in the Netherlands.

Home is designed to help new, small-scale property buyers who are looking for properties beyond the city so that they can invest for additional income or financial security."

Market Research

Despite the economic crisis, relocation to rural areas across Europe has become a major trend during COVID-19. 45% of people were in 2022 more likely to buy a property than they were last year.

Problem

- Property investment is an increasingly popular way for individuals to achieve financial security.
‍
- Buying a property is a highly complex process becoming a stressful experience.
‍
- Plenty of blogs and agencies offer too much information which leads to wasting time on properties out of range.
‍
- The buyers new to the market struggle to get started without having professional guidance.

Opportunity

- User-friendly, Responsive Design. Home contains a database of available properties and comprehensive information on each listing available anytime on any device.

- Personalized Account. The filters are available during registration and searching for a property so the properties listed match buyers' interests.

- Perfect for unseasoned buyers who need access to reliable, uncomplicated information about their potential property investments.

- Let’s chat or book a visit. Professional guidance provided by a real estate agent.

Basic Goals

Filter Properties
Property Profile
Share & Save
Contact the agent
Book a visit

Who was I designing for?

First contact with Home.

"Since UX Research was realized before my involvement in the project, the focus was on UX and UI Design. I had the opportunity to improve my UI Design skills.
‍
I received the project brief with the objective, context, design criteria and Persona, Rashida, with goals and frustrations. My task was to design a real estate platform that met Rashida's needs."

  1. To get started, let’s met Rashida.

  2. In the beginning, I conducted a minimal Competitive Analysis to understand the local' and Europeans' real estate market which helped me to make the design decisions.

    I used the information from the project brief to create Rashida's goals and frustrations, and I added a representative picture that brings her to life.

    Rashida represents the people who need simple information and easy-to-use platforms when searching for a house. I used User Stories to showcase the features that can help people like Rashida to reach their goals.

    ‍Below is highlighted information that influenced the design decisions for creating Home.‍

Ideate, Prototype & Test

Time to start designing.

"Once I had all the information organized it was time to start sketching the first User Flows and Low-fidelity Wireframes and to indicate the necessary actions for Rashida to reach her goals."

  1. User Flows

  2. To outline all the necessary functionalities, I created 3 simple diagrams with FigJam of the main tasks that Rashida needs to accomplish: Register, Filter the properties and Book a visit. Two of them are shown below.

Organizing information easier for users to follow.

"Even wasn’t required, and because I developed a responsive web app, I decided to create a Sitemap to outline the hierarchy of Home screens. I conducted a Closed Card Sorting session to evaluate my decisions.

Due to time constrain, the focus was on the flows that I decided to approach."

  1. Sitemap

  2. After analyzing several related and unrelated platforms, I created a Sitemap with FigJam to organize all the screens and flows that I needed to create. I conducted a minimal Closed Card Sorting session using Optimal Workshop with 5 users to evaluate the information and organize the content easily and clearly to follow.

Prototype validation.

"The focus of the project was on UI and not on UX, but because I understand the importance of testing the prototype to validate the flows proposed, I decided to keep the design process flexible and introduce a mini session of Usability Testing.

I used Mid-fidelity Prototype as a support for testing session to make sure I am not too advanced in the process and I can modify the wireframes easily.

The Usability Testing result can be found below."

Decision based on time constraints.

"Due to time constrain, I decided to have just one mini Usability Testing session and implement the user feedback into my design.

If I had more time, there would have been other test sessions to validate all the implemented iterations."

Visual Design

  1. Define the design direction. Mood Board

  2. Once I had the Mid-fidelity prototype and User Testing results implemented I continued to focus on leveling up the prototype and covering visual design principles.

    The first step was to create 2 Mood Boards with 2 different visual directions from which I chose the most representative of my platform. This helped me to define how my users will be interpreting the visual content of Home. By choosing the most suitable Mood Board I could express a proper style related to Netherlands real estate.

Maintain a consistent design.

"I decided to start creating a set of rules for Home with the first wireframes in Figma which was changed with the project evolution.

This helped me be consistent throughout the process and having the components already created I was more focused on solving the problems because changing the prototype was fast."

  1. Home Style Guide

  2. Having the visual direction from the mood board in mind, I was able to establish the set of rules to keep the design consistent and minimal. This will ensure the correct use of typography, color palettes, imagery choice, iconography and UI elements and patterns.

    For alignment and grid, I kipped the layout grid responsive and established every breakpoint, so that I had 4 columns for mobile, 8 for tablet and 12 for desktop. For spacing, I had a multiple of 4.

    I used Material Design version as a support to create the UI elements and patterns. Below is presented a part of the style guide.

  1. Final solution

  2. I had 41 high-fidelity wireframes because I had different navigation patterns for Sign In or Create an account, 4 different navigation flows for searching for a property and I also showcases the result after booking a visit.

Try Home prototype!

Future Steps

Home was started as a project to be continuously developed.

UX Research and Design. To continue the prototype, there will be additional User Testing sessions until it won't be necessary to improve anymore. Passing to the next stage and creating features for Rent and Sell could be a great opportunity to attract another targeted audience.

Visual Design. I will approach A/B Tests to make a more user-friendly interface for Home and understand if my wireframes communicate the mood I decided to create.

Future goals. UX Research and Design for Sell and Rent. Implement optional filters for Green Houses.

  1. Other projects

  2. PlutoPay
    Read Case Study ➜

Let’s get in touch!

Resumesilvia.alexandrescu.93@gmail.com
Copyright © 2023 Silvia Alexandrescu