UI Design

UI Design

PropertLy
WebApp

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

Properly_Full-width image@2x

PROJECT: Property app for everyone

Kind: Responsive web app

Role: UI Design

As a short word before I move to the project itself: I’m a UX designer and UI is not my daily business but it doesn’t mean that I don’t see the value of UI. UI patterns can really bring product design to the next level and enrich UX. Saying that, challenge accepted and my UI shot is here ;) Don’t hesitate to give feedback!

Propertly_Group 6@2x

Empathize & Define

Research

objective

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

context

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 app will provide them with the expertise needed to get started efficiently.

The 5 W's of propertly

Who: This web app is made primarily for new 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 neighbourhood before spending time on-site.

Persona

Name

Jane

Demographics

  • Age: 42
  • Gender: Female
  • Education: Bachelor’s in Computer Science and Master’s in Advanced
  • Computer Systems
  • Marital Status: Married with 2 children
  • Job: IT consultant for a growing tech company

Goals

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

Tasks

  • Jane 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.

Quote

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

Propertly_Group@2x

Design Criteria

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

Key Messaging

“Finding the perfect property shouldn’t be hard”

Style

  • Clean, quick, smart

  • Greens or blues

Ideate & Prototype

User Flows

As you have now an idea what the project is about I would like to show you my approach and result.

I started first with understanding the user flow.

1_PrDJGBslUFgTteMUQJ-qgg

Low-fi wireframes

After getting the user flow done I moved straight away to pen & paper sketching. I always sketch things first. This is the only way that let’s me quickly move forward and not spend time on getting the best idea ever. 

It’s not about being right / perfect but moving forward!

1_FJBtxWi9OjadtignRJTJ8w

Search results & detailed property view

1_FJBtxWi9OjadtignRJTJ8w

Side navigation & account settings

Mid-fi wireframes

When the low-fidelity wireframes were done, I moved to mid-fidelity wireframing.

1_WEBAPHXxpsZMyq2CcMotww

Moodboard

The moodboard has big focus on real photographs, there are no illustrations. Best quality, professional photography plays here the biggest role. Colors are very modest but still strong. The design should show highest level of professionalism and great love to architecture.

1_ThKC3odPcMqvSpvUSAzGww

Hi-fi Wireframes & Prototype

Color was a big topic in my whole process. You’ve probably already noticed that I started wireframing with some blue elements but then I felt like light blue is kind of very common color among apps. I always want to try something new so I’ve decided to challenge myself and choose much darker colors. After multiple color schemes applied I went for a dark green color. In my opinion this color proves quality and good service, looks good with high quality pictures. Additionally, I decided to go for a palette that has no real contrasting color. Is a palette of different dark green hues.

This is an outcome of my first design with mentioned color.
Feel free to click through the prototype below.

UI Style Guide

Next step, visual style guide. I will not present here my full style guide as it is pretty big document, nevertheless, the most important parts are below.

1_pf2fLqoeIVqpSRoc7EwXFw

Conclusions

Sketch icon

First of all, I focused only on mobile but when I was ready and happy with the mobile design I moved back to pen & paper to wireframe a design for other breakpoints.

Mobile icon

I worked for the very first time through whole project with Figma (I’m a Sketch user) and I need to say I really like it. Especially, the comment part and that it’s enough to share a link with someone else. No need to share the file!

Other Projects

tes2UU

TestUX Design

ExpertAppUX Design

PropertLyUI /UX Design

Got a project?
Let’s get in touch!

Got a project?
Let’s get in touch!

© Copyright Ewa Mieżwińska 2020. All rights reserved.

© Copyright Ewa Mieżwińska 2020. All rights reserved.