Polishing a Real Estate Investment Web-App: A UI Case Study

Perfect Properties - Real Estate Investment made Easy

Client

Design Student (CF)

ROLE

UI Designer

EXPERTISE

UX/UI Design

YEAR

May-July 2022

Introduction

This work is a conceptual UI project part of CareerFoundry’s UI specialization course for UX Designers. Perfect Properties is a responsive web app for new, small-scale real estate buyers looking to invest in properties or property shares for supplementary income and financial security. Perfect Properties aims to provide them with suitable options and information to get started easily and efficiently.

Context

Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience but often complicated. While there are plenty of blogs and agencies providing information, usually, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range.

Objective

A responsive web app that provides property buyers with comprehensive and uncomplicated information on properties of interest.

Challenge

Design a beautiful yet usable and accessible user interface that gives unseasoned buyers access to reliable, uncomplicated information about their potential property investment.

Define

In the project's initial phase, I was given a project brief that provided me with the objective, context, persona, user stories, and feature requirements. Based on these research results, I visualized the findings, and designed user flows to map out users' interactions with the app.

5 Why's of Perfect Properties

Who:
This web app is made primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.

What:
This will be a user-friendly, responsive web app containing a database of available residential properties and land, and comprehensive information on each listing.

When:
Buyers will use this tool when conducting property searches, and making a decision about where to invest.

Where:
Buyers will use this tool at home or on the go. Users can search for properties anywhere, as long as they’re logged in on a device.

Why:
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.

Understanding the User

To better understand the users’ goals, need, and pain points, I visualized the project’s persona, Rashida. I referred to her throughout the entire design process.

From 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 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 be able to save or mark properties I am interested in, so that I can easily revisit them.

… to User Flows

I took the user stories and outlined the critical functionality. From here, I created a user flow diagram to ensure all necessary tasks were covered and optimize the user experience.

Ideation

Sketching the Blueprint

Low-Fi Wireframes

Sketching the Blueprint

(Low-Fi Wireframes)

Based on Rashida's goals and needs, as well as my flowchart, I started sketching out the app's main features. Before adding more detail, pen and paper sketches helped me quickly conceptualize the app's screens' main structure and functions.

Molding the Foundation

Mid-Fi Wireframes

After sketching out the app's structure, I moved the project to Figma, where I created mid-fidelity wireframes. Throughout this iterative process, I refined the versions focusing primarily on spacing, layout, and topography.

Building the Brand

I extracted three critical words from the research findings to build the brand and set a visual direction with a moodboard. Additionally, I created a style guide to establish a clear visual path and guidelines for Perfect Properties.

Keys to Success

I conducted a card sorting and designed an immersive sitemap to generate a fundamental understanding of the scope and limits of Consulo.

Clean

The app should convey a clean, minimalistic feel that simplistically presents the user with all necessary information.

Growth

Users are looking for economic growth and opportunities when using the app. The brand should focus on presenting opportunities.

Efficiency

Users like Rashida don’t have much time on their hands when selecting investment opportunities. Therefore it is essential to make the flows as efficient as possible.

Setting the Mood

When creating moodboards for the app, I discovered two potential opposing mindsets: Security vs. Growth. While a security mindset makes a lot of sense for a real estate investment app, I went with the Growth approach after consideration. I think a growth mindset aligns more with the core message of Perfect Properties and will help users find suitable investments quickly. Additionally, the modern approach of bold blueish/purple and yellow tones combined with a straightforward sans font like Montserrat will resonate with tech-savvy users like Rashida and benefit the app.

Design

Finishing Touches

High-Fi Wireframes

Once I established the brand identity and the UI elements, I started fleshing out my design and created high-fidelity screens. In addition I added animations and interactions to engage the user.

Built for all Screens

Based on a mobile-first apporach, I designed the app’s content for several breakpoints. Now, users can use Perfect Properties effectively with all screens sizes.