"Finding the perfect property shouldn't be hard."
Consider the days of stressful house hunting over with the Perfect Properties app. The clean, quick, and smart design of this app works with you to find your dream home with ease.
Objective
A responsive web app that provides property buyers with information on properties of interest.
Real estate investment is a growing trend among individuals seeking 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.
User Flow
Design requirements for this app included:
Sign in, create user profile, and input property criteria.
Search and filter available properties.
Access comprehensive information about a given property (e.g., specs, value, previous sales, location, 360° visuals, etc.) and its neighborhood.
Bookmark a property listing.
Property recommendations feature.
Ability to contact real estate professional when wanting to move forward with a property (i.e., guided viewing, ready to invest.)
To account for each of these requirements, a user flow with distinct tasks marked out was created to ensure each deliverable was met.
Persona
Low Fidelity Wireframe
I began my wireframing process by creating paper sketches of each screen needed to complete the given tasks. This allowed me to efficiently build the foundation of the app without going into too much detail.
Mid Fidelity Wireframe
From my paper wireframe, I created a digital version and cleaned it up for better usability. At this stage, I also began creating an asset library to make designs universal and easily altered in future versions.
Moodboard Exploration
Before moving forward to high fidelity wireframes, I needed to establish a distinct brand identity based on the keywords given in the project brief: "clean, quick, and smart." The design also needed to include either green or blue, so i created a moodboard based off each color.
I chose to follow the visual direction of the second mood board. While each mood board provided a unique and distinct visual identity, the second option more clearly follows the branding guidelines of “clean, quick, and smart.”
The brutalist, structured, and organized elements within the images portray clean, thought-out lines that easily translate into an online interface and digital brand identity. Simple, geometric shapes emphasize the straight forward nature of a quick user experience. Lastly, the crisp colors and sharp structures evoke a smartness to the design, tying in the whole mood together for the most seamless house buying process for users.
The brutalist, structured, and organized elements within the images portray clean, thought-out lines that easily translate into an online interface and digital brand identity. Simple, geometric shapes emphasize the straight forward nature of a quick user experience. Lastly, the crisp colors and sharp structures evoke a smartness to the design, tying in the whole mood together for the most seamless house buying process for users.
Creating a Logo
I based the logomark on Syne: the primary typeface for branding. I wanted to maintain a clean, more brutalist design to adhere to the moodboard. The logo also needed to be scalable and still read as a real estate logo.
Style Guide
Logo
Typography
Color
Icons
Assets: Buttons and Form Fields
High Fidelity Frames
Screen Comparison: Through the Stages
Final Design Implementation
Try Out the Prototype Yourself!