The Brief

What is it?

A responsive web app that provides property buyers with information on properties of interest.​

Who’s it for?

Primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.​

Why bother?

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.​

My Role:                 

UX/UI designer,

Understanding the User
Primary Persona

The research phase of the project was done beforehand and provided in the brief. The next phase was to understand the primary persona. Meet Rashida.

Rashida

42, female, IT Consultant, mother of two, 

multi-tasker, on-the-go

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.

Tasks;

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

© Illustration by Caroline Cieslikowska

Journey Mapping & Storyboard

© Illustration by Caroline Cieslikowska

Rashida tries several different sites to search for properties but doesn't find what she's looking for and wastes a lot of time browsing through irrelevant listings. She gives up and loses all her data. However she's persistent and tries another site but ends up wasting more time and still doesn't find what she's looking for. She's frustrated and needs a web app to accomodate her needs quickly.

PROBLEM STATEMENT

Rashida needs quick access to descriptive property listings because she wants to make informed decisions on buying property that will give her and her family financial security. We will know this to be true when we see Rashida using our app to set up property buying criteria, search for properties and contact our agents for viewings.

Design

Proposed Solutions​

To include the following features and functions that will allow Rashida to complete necessary tasks​:

  1. A profile page where she can set up and save her buying criteria (she needs to be a registered user).

  2. An auto-search and filtering feature that will enable Rashida to find specific property listings quickly.

  3. A 'like' feature that will save Rashida's favourite listings into her Favourites Page.

  4. Comprehensive information provided with each listing, i.e, description of the property, visual imagery,  a map view to show location and surrounding amenities and data to help Rashida make informed decisions about mortgage plans etc.

  5. Agent profile page and contact features that will enable Rashida to reach out to the right people to schedule a viewing etc.

  6. A matching feature that will show Rashida how well a property listing matches to her buying criteria. (e.g. 90% Match).

WORKFLOW

  1. User flow

  2. Sketches 

  3. Mid-fidelity frames

  4. Testing & iterations

  5. Result

Design Problem #1

“As a user, I want to create a profile containing all my property criteria, so that I am

recommended results most relevant to me.”

By registering an account Rashida has the option to set up her buying criteria which will be saved in her profile page.

Drop-down menus were replaced by segmented controls and checkboxes. These with the additional slider elements allow Rashida to complete the task quickly.

Before

After

To guide Rashida with a quick and smooth register process the following input feedback was provided:

 

  • Placement holders,

  • error messages,

  • password strength indicator

Design Problem #2

“As a user, I want to be able to search and filter properties, so that I can find good matches

based on my needs.”

Rashida has various ways to search for property listings. Search suggestions and Autocomplete was added to guide her and quicken the process.

A sort & Filter feature was added to allow Rashida to sort and filter results according to her preferences, or to her buying criteria set up previously.

Design Problem #3

“As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them.”

By tapping on the heart icon, Rashida can save any listing for future viewing.

Rashida can view all her saved favourites by navigating to her Profile Page. She can remove a listing from her favourites page by tapping on the heart to 'unlike' it.

Design Problem #4

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

Rashida is given comprehensive info about each listing. She can easily navigate to the Description, Location and Data tabs.

In Descriptions she can see which of her requirements were met and read more about each listing.

In Location she can view the listing on a map and see what amenities are nearby.

In Data she can learn more about mortgage and other statistics of each listing. She can also use the Calculator feature to calculate mortgage estimates to make informed decisions.

Design Problem #5

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

Rashida can get in touch with an agent to get more information about a listing or to schedule a viewing.

She can easily exit and return to the listing by tapping on the cancel button.

She can also learn more about the agent by tapping on their profile picture to navigate to their profile page.

Design Problem #6

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

Rashida can view what percentage of her requirements have been met with each listing. She can find out more information on the Descriptions page of each listing.

Wireframes
Visual Design
Mood Boards

Mood board #1

Keywords:

crisp, sophisticated, neutral, geometric, family, harmonious, practical

Cool neutral tones in shades of blue and grey, with apple green pop colour. Clean and sophisticated look paired with bold lines and light typeface.

Mood board #2

Keywords:

quick, on-the-go, warm, secure, reliable, friendly

Warm tones paired with a vibrant orange pop colour. Shades of blues and brown used to create feelings of stability and investment. Paired with vibrant orange which is warm, friendly and grabs attention for people who are on-the-go and need to make quick decisions.

I chose to go with mood board #2.

 

Rashida is tech-savvy and wants to get results quickly. She follows the latest trends so the use of gradients and vibrant colours in a contemporary setting will appeal to her. The bright orange will also grab her attention and CTA buttons in this colour will give her an intuitive and easy navigation to enable her to find properties quickly. As she is looking to invest for financial security the shades of blue will create feelings of trust. The above-mentioned design aesthetics deliver practical, reliable and uncomplicated solutions which is what Rashida is looking for in an app. However, she is also a mother of two and likes to have fun, so the warm and friendly tones in mood board #2 are more suited for her needs than the cooler, neutral tones set in mood board #1.

Style Guide
Designing for different breakpoints
High-Fidelity Wireframes
Mockups 
Prototype
Project Insights

What went well?

​​

  • Applying an iterative approach, I believe I was successfully able to to create solid design solutions that met the brief.

  • Applying UI patterns from user-centered approach ensured that functionality of the app was achieved and overall user experience was improved.

  • The mockups look polished and the app is ready for handover.

What could be improved?

Paying more attention to small layout details early on in the process that could have saved time in the end.

linkedin-1.png
dribbble-1.png
behance-1.png
instagram-11.png

© 2019 by Caroline Cieslikowska