Yina Smith-Danenhower - Perfect Properties

Helping young first-time investors invest and provide financial security to their families

Tools/ Sketch, Invision Studio, paper, pen, Angle, Craft, Zeplin

Role/ UI Design (Solo project)

Problem

The brief is to design a responsive web app that provides property buyers with information on interested properties. The target audience is represented by persona - Rashida - who is quite mature in her career and is starting to think about providing financial security to her family by investing. She is a busy professional and she wants to find the right information quick, so she can make fast decisions. I started with 5 user stories based on Rashida:

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

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

Solution

Perfect Properties - a responsive web app that delivers personalized property preferences and presents investors with detailed and relevant information to help them make the right investment. The clean, minimalistic interface targets professionals who are busy and in a hurry, and needs to receive information quickly and accurately. A "save" feature also allows them to save an interested property and quickly access it once they are logged in. Designs for phone, ipad, laptop, and desktop HD are created as I anticipate potential users will be using the app under many different contexts, on the bus, in the living room, at work, etc.

Tailored Recommendations

The Perfect Properties app's smart engine helps you set a detailed profile so you are only shown properties that you are interested in, saving you time and making the property searching process a breeze!

More refined search using filters

You can add additional, real-estate-specific filters to your results and find your perfect match.

Keep an eye on your favourites

Perfect Properties makes it really easy for you to save interested properties and later come back and access them quickly. Keep an eye on the market and make the move when the opportunity comes!

Comprehensive Information

Your destination for all real estate listings. We collect property information with experienced researchers, insights from real estate agents, landlords and other investors. In Perfect Properties, you can expect information to be honest and straightforward, so you can find your dream home fast.

Schedule a viewing right here

View in VR, contact the right person and schedule a viewing right away on Perfect Properties.

DESIGN

Low-Fidelity Wireframes

Using the user stories, I sketched out five core features of this app:

Feature 1: As part of an on-boarding process, prompt user to set her preference for property criteria, so that relevant properties can be recommended by the app. Provide users a way to skip that and allow them to use the app's filter function to search.

Feature 2: Provide filters for users to narrow their options further, both for users who have signed up and set a profile, and users who skipped the set up process.

Feature 3: Provide a quick and simple way to save properties, and to revisit them the next time users sign back in.

Feature 4: Provide as many visual and written details about each property in an honest and comprehensive way, so that users can make the best decisions quick.

Feature 5: Provide request info button directly on the property details page, so that users can easily request more information for interested properties.

Mid-Fidelity Wireframes

After a few simple user tests, I learned that users would like more types of filters as well as more kinds of property details, to distinguish the app from other apps on the market. I also added more information for users to explore on the home page. I then set out to craft mid-fidelity wireframes, incorporating these insights. However, before drawing anything in Sketch, first I defined a grid system:

4-columns

60px wide

20px gutters

12px baseline

Feature 1: Set property criteria

Feature 2: Filters

Feature 3: Easy access to saved properties

Feature 4: Detailed text and visuals

Feature 5: Request viewing

After the completion of mid-fidelity wireframes, I created two mood boards that reflect the objectives of the design brief in two very different directions.

Mood Board 1: Aspiration

My first idea of the app is to give potential users feelings of aspiration when they look for new properties to invest in. Many target users are first time investors who aspires to secure their families’ financial security. The scenery and colors of sunrise symbolize aspiration for many people. The color pink / orange against a blue background is likely to elicit positive feelings of hope. Thus, in this idea, I will use pink/orange as the primary colors, and the blues as background color.

Mood Board 2: Reliability

My second idea for the app is based on notions of reliability and trust. Brown and blue are the colors of the sky and the earth, it gives feelings of grounded-ness and therefore reliability and trust. Button might take the style of an architectural blue print to look clean, and smart.

Choosing what is best for my users

Even though personally I liked mood board one the best, I picked mood board two to move forward with. The reason is that the mood and style of mood board two matches with the partial brand guide given in the brief better, which are "clean, quick, and smart." Rather than reinventing the style of the app, I chose to follow the partial brand guidelines given by earlier research, and filled in the gaps to create a unique brand. By tweaking the user interface using principles of visual hierarchy and spacing, incorporating UI design patterns into the app, and taking careful consideration for the typography, images, and colors, I created a high-fidelity prototype.

High-Fidelity Wireframes and Prototype

Feature 1: Set criteria