Perfect Properties

Responsive Web Application | Mobile-First Design

PROJECT OVERVIEW

Objective

Provide users with an engaging interface for a responsive web application that provides property buyers with information on properties of interest.

My Role

UX Designer (based on existing research)

UI Designer

Responsibilities

Information Architecture, User Persona, User Tasks & Flows, Wireframing, Prototyping (Low-, Mid-, & High-Fidelity), Branding & Iconography, Animations, Asset Management, Mockups

Tools

Figma, Lucid, Google Docs, Rotato, Adobe Illustrator, Adobe After Effects, Adobe Photoshop, Adobe InDesign

UNDERSTANDING THE BRIEF

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, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range. This web application will provide them with the expertise needed to get started efficiently.

>> WHAT are we designing?

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

>> WHO is this app for?

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

>> WHEN will the app be used?

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

>> WHERE will the app be used?

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

>> WHY are we designing this app?

Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments.

USER PERSONA

Parts of the UX research had already been conducted prior to my involvement in the project, leaving me free to focus on the UX and UI design. The information on our primary user profile was provided and formed the base for our main user persona Rashida.

User Persona | Rashida

USER TASKS & FLOWS

In order to design a sensible and smooth user experience clear tasks needed to be defined that the user personas wish to accomplish. Each of the user personas was assigned one main task which was then split into smaller steps, helping to design clear user flows.

User Task #1

User Task #2 & #3

User Task #4 & #5

User Flow #1

User Flow #2 & #3

User Flow #4 & #5

LOW- & MID-FIDELITY WIREFRAMES

Once there was a clear idea of the main features to be included in the product, some basic sketches of wireframes were created. These paper prototypes allowed it to think through and test the initial ideas, working from screen to screen, both on mobile devices and desktops. From this, it was quickly possible to validate individual design decisions and move on to interactive low- & mid-fidelity prototypes using Figma.

SETTING THE MOOD

In order to better understand the design direction the user interface was going to take, a mood board was crafted which would guide the visual design for the rest of the project. With the project brief in mind, it was clear that the app needed to be three things above all: clean, professional, and reliable. These characteristics are visually communicated through the use of color (and color psychology) and typography.