Finding the perfect property shouldn't be hard
Overview
Challenge
Real estate, while an increasingly popular way for people to achieve financial security, is often a complicated experience. Buyers can get information from a myriad of agencies and websites, but those who are new to the market may struggle to get started without professional guidance and waste time viewing properties that are out of their range.
Solution
Perfect Properties, a responsive web app, will help small-scale property buyers who are new to the real estate market get the expertise they need to get started finding an investment property for additional income or financial security.
Background
This project was completed as part of the CareerFoundry UI Specialization Course. The goal of this project was to create a responsive web application with a mobile-first approach.
Role
Sole UI/UX Designer
Time
1 month
Tools
Wireframing - Sketch
Prototyping - InVision Craft Plugin
Mockups - Angle Plugin
Understanding the
Problem Space
The first step to starting a design project is understanding the problem space through user research. Because this project focuses on UI design, most of the UX guidelines and research was provided, like the persona for Rashida, a busy mom who works in tech and is looking for a way for her family to be more financially secure.
Sitemap
After reviewing the persona and related user stories to throroughly understand my user, I created a sitemap to provide an overview of how the screens would be organized and which screens I would design.
Low Fidelity Wireframes
Low fidelity paper sketches helped me ideate for the app quickly without getting caught up in details. Using the InVision Craft Plugin, I used the rapid prototying method to fix any obvious UX issues to make sure that the app is user-friendly.
Mid Fidelity Wireframes
With mid fidelity wireframes, I started to develop the UI elements and include visual hierarchy and spacing principles in my design.
Moodboard
Before diving into the bulk of UI design decisions, I created a moodboard to direct my decision making process and ensure that the visual look and feel was cohesive and on brand.
Because my persona, Rashida, is busy and already has a stressful life, I wanted to evoke a calm and easygoing feeling with the visual design. I want the experience of using Perfect Properties to be easy and approachable to take some of the stress away from looking for an investment property.
High Fidelity
Wireframes
Using the mood board as a guide, I added color and imagery to the app, and made the typography and iconography consistent.
Style Guide
This style guide documents the visual and UI elements and ensures that all future brand designs have a consistent visual experience.
Responsive Design with Different Breakpoints
I designed for 3 different breakpoints (Mobile, Tablet, and Desktop) so the design looks consistent and is usable regardless of what device its viewed on.
Perfect Properties Prototype
Reflection
Challenges
Choosing a color scheme and typeface for this project was definitely where I struggled the most. There are so many options out there that fit the brand and aesthetic I was going for, but eventually I set a timer for myself and told myself when the timer went off, I would have made a final decision and stuck with it.
What can be improved?
An improvement to make would be adding animations to make the design more visually interesting. There are multiple areas where an easing animation would be useful.
Next Steps
Because the focus for this project was UI design, I didn't do any usability testing, so that would be the first step I'd take to continue improving the app. There are also many more features to build out, like bookmarking a property, interacting with an agent, and viewing property information.