Perfect Properties

A property investment tool for on-the-go professionals
A photo of a phone frame with a screenshot from the app's search pageA photo of a computer frame with a screenshot from the app's search pageA photo of a tablet frame with a screenshot from the app's search page
The Challenge:
How might we reduce friction for beginner, small-scale real estate investors when using a responsive web app to browse prospective properties?
The Solution:
Build a user-friendly high fidelity mockup for a responsive web app.

Context

A schoolhouse icon in teal
Class project for CareerFoundry UI Design Specialization course
A clock icon in teal
May 2022-July 2022
A checkmark icon in teal
Competitive Analysis, User Journeys, User Flows, and Personas were all provided
A headshot of the designer
Sole UI Designer
The logo for the website FigmaThe logo for the website "Whimsical"The logo for the website "Undraw"

User Flows

Finding a listing
An image of the user flow for searching listings
Contacting a listing
An image of the user flow for contacting a listing

Low Fidelity Wireframes

Beginner real estate investors don’t do this full time.  We expect them to browse on the go.
A mobile-first strategy makes sense.
A photo of the initial paper sketches for the following screens: Log in, Browse Listings, Individual Listing, ContactA screenshot of the Low Fidelity Wireframes for the following screens: Log in, Browse Listings, Individual Listing, Contact

Mood Board and Visual Style

I provided two options for the mood board based on the key words in my project brief.

Key Words: Exciting, Reliable, Uncomplicated
An image of the first mood board An image of the second mood boardThe color palette for the first mood boardThe color palette for the second mood board
Final Choice: Mood Board 1 - More appropriate for an investment app, calm and reliable
A photo of the color palette used in the appAn image of the second mood board
Expanded the color palette with lighter and darker tints
- More accessible                
- More visually appealing

Wireframes and Iterations

A low fidelity wireframe of the appA high fidelity wireframe of the appA mid fidelity wireframe of the appA higher mid fidelity wireframe of the app

Black and white

Color too garish             

Logo too small              

Final version             

Style Guide

The style guide can be found at this link.

Responsive Grids

A photo of the different grids for mobile, tablet, and desktop

Responsive Design

Login Page

A paper sketch of a tablet screenA mid fidelity wireframe of a tablet screenA high fidelity wireframe of a tablet screenA paper sketch of a desktop screen
A low fidelity wireframe of a desktop screenA high fidelity wireframe of a desktop screen

Search Results

A paper sketch of the search results screen for tabletA mid fidelity wireframe of the search results screen for tabletA high fidelity wireframe of the search page for tabletA paper sketch of the search results screen for desktopA mid fidelity wireframe of the search results screen for desktopA high fidelity wireframe of the search results screen for desktop

Final Mock-ups and Prototype

A mockup of the welcome screenA mockup of the home screenA mockup of the filter screenA mockup of the listing screenA mockup of the contact screen

The final prototype can be found here.

Learnings

An icon of the accessibility symbol

Importance of accessibility
- Incorporating color contrast checkers in my workflow
- Need to continue to improve font sizing

An icon of media

My first try with animation
- It was a struggle in Figma, but very fun
- Timing is so important for the frames!

An icon of a color palette

Improving my skill in color selection
- I love bright colors, but am learning the beauty of more subtle shades