Perfect Property

Perfect Property UI case study with property discovery and messaging screens

Project overview

A responsive iOS app that provides property buyers with information about properties of interest.

My role: UI Designer
Duration: 10 weeks
Tools: Figma, pen and paper

Perfect Property across mobile, tablet and desktop

Brief UX analysis

Problem

How might we help people looking to buy a property find exactly what they need simply and efficiently, while making it easy to communicate with the agent or seller?

Solution

Design an intuitive, user-friendly app with a modern look, combining filtering, sorting and map search with messaging between buyers and agents or sellers.

User persona

Rashida

IT Consultant · 42 years old · Married

“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!”

Goals

Rashida makes a good living and wants to invest in property outside the city to increase her family’s financial security.
She wants the right information to make decisions quickly.
She wants a tool that helps her find suitable properties without wasting time.

Tasks

Search for properties using criteria relevant to her needs.
Easily view and return to listings she is interested in.
Receive relevant, comprehensive information about properties.

Environment

Physical: Rashida lives with her family in a city on the East Coast and spends most weekends in the countryside.

Social: She enjoys hiking with her family and playing basketball with former colleagues.

Technology

Highly competent with technology, she uses tools that are functional, easy to use and intuitive.

User stories

A user story is a brief, plain-language explanation of a feature or function written from the user’s point of view.

As a user, I want to create a profile containing all my property criteria so that I receive recommendations that are relevant to me.
As a user, I want to search and filter properties so that I can find good matches based on my needs.
As a user, I want to save or mark properties I’m 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 contact the right people when I’m interested in a property so that I can schedule a viewing.

User flow

This diagram shows the paths and steps my persona would take to achieve her goal.

Information architecture

This sitemap shows the app’s hierarchy and how its pages are prioritized, linked and labelled.

Hand sketches

Before using design software, I explored and iterated on ideas with pen and paper, then chose the approach that best suited my persona.

Low-fidelity wireframes

Low-fidelity wireframes include the most basic content and visuals. They help map the interface, its screens and the underlying information architecture.

Low-fidelity onboarding, search and map wireframes

Mid-fidelity wireframes

I added more detail, including accurate spacing, headings, buttons, font choices and icons, to establish a visual hierarchy.

Design fidelity & iteration

Visual design

Mood board

The mood board brings together the colour palette, fonts, style, ideas and mood as a source of inspiration and motivation.

Clean · Simple · Modern · Green

Mood board with modern homes, greenery, forest imagery, type samples and colours

Style guide

Colour palette

Typography

SF Pro Text and Helvetica Neue.

Style	Typeface	Size	Weight
Heading 1	SF Pro Text	20 px	Medium
Heading 2	Helvetica Neue	17 px	Bold
Subheading	SF Pro Text	17 px	Semibold
Body 1	SF Pro Text	17 px	Regular
Body 2	SF Pro Text	15 px	Regular
Small text	SF Pro Text	13 px	Regular
Button	SF Pro Text	17 px	Semibold