Finding the perfect property shouldn't be hard.
UI Design
perfect
properties
Client /
Personal
Role /
UI Designer
Year /
2019
Objective
To create a user-friendly, responsive web app that provides property buyers looking to invest with the information and tools to make purchasing properties of interest easier.
Background
Perfect Properties was developed for my UI specialization course as part of my UX Design certification program. The main goal for this project is to learn the UI design process, principles and tools and use them to create a new property-buying web app.
Problem
Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site.
Solution
Create a responsive website where users can search for new properties while they're at home or on the go that will help them decide on which properties they should invest in. A few of the features will include showing available residential properties and land with comprehensive information for each listing, filtered searching to ensure users get the results they're looking for, the ability to add listings to their favorites and the option to contact someone to schedule a home tour.
design process
Project Brief
Since this course project concentrated on learning UI tools and skills, the project brief was provided by CareerFoundry. This enabled us to focus solely on the UI aspects of the project and provided all the UX research already completed for us to design around. This provided the user persona, feature requirements for the web app and all the necessary details about the needs and wants of the persona. I referred back to this brief for all design decisions in this course.
Our user persona, Rashida
User Persona
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.
Demographics
-
Age: 42
-
Gender: Female
-
Education: Bachelor’s in Computer Science and Master’s in Advanced Computer Systems
-
Marital Status: Married with 2 children
Goals
-
Rashida makes a good living and wants to invest in 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.
Tasks
-
As she is new to real estate, she wants a tool that is easy to use and that will help her find the property she’s looking for.
-
Search for properties, inputting criteria relevant to what she’s looking for
-
Easily view and return to listings she’s interested in
-
Receive relevant and comprehensive information about properties
"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!"
Persona Design Criteria
User Stories
-
As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.
-
As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.
-
As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them.
-
As a user, I want access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.
-
As a user, I want to be able to contact the right people if I am interested in viewing a property, so that I schedule a viewing.
-
As a user, I want to see how well a property meets my criteria or compares to other properties, so that I can refine my options.
Feature Requirements
-
Sign in, create user profile, and input property criteria
-
Search and filter available properties
-
Access comprehensive information about a given property (e.g., specs, value, previous sales, location, 360° visuals, etc.) and its neighborhood
-
Bookmark a property listing
-
Property recommendations feature
-
Ability to contact real estate professional when wanting to move forward with a property (i.e., guided viewing, ready to invest)
User Flow
With all the information gathered from the user persona, I was able to create a user flow to meet all of the goals and feature requirements Rashida wanted in a web app.
User flow for Perfect Properties
Wireframes
Once the user flow was complete, I then created low-fidelity wireframes to begin the visualization process of how the web app will need to look like to meet all of the feature requirements.
Low-fidelity wireframes for the mobile web app
Mood Board
With the wireframes mocked up, I then created two different mood boards to test how I wanted the web app to look and feel. I created option (1) with a clean and refreshing feel with a more modern interface and option (2) with a more traditional look with more muted colors and conventional styling. I ultimately decided to go with option (1) because it seemed to meet the user persona's needs better as she was familiar with modern interfaces and needed something clean and smart looking.
Mood boards showing two different design options. Option (1) was chosen to better meet the needs of Rashida.
Style Guide
Once the correct mood was selected, I set out to create a visual style guide to serve as a guideline to maintain a consistent brand, look and feel across the whole project. This ensured all visual design components and UI elements adhered to key rules to stay uniform throughout the web app for anyone working on this project.
Style guide for Perfect Properties
Multiple Breakpoints
Knowing that the web app will most likely need to be used across different platforms, I created low, mid and high-fidelity mockups for three different breakpoints of the web app. These various breakpoints included the mobile, tablet and desktop views.
Low, mid and high-fidelity mockups showing various different breakpoints
Perfect Properties shown on 3 different breakpoints