Acerca de
Perfect Properties
Perfect Properties is a responsive web app for people looking to buy, rent and sell homes through extensive database of residential properties and land. Allow users to explore listing information and easily connect with agents, making property investment stress free and accessbile for all types of investors.
Problem Statement
Property investors and people searching for a new home need on-the-go access to uncomplicated, detailed information about potential properties and a simple way to contact the relevant real estate agent because they want to find the perfect property in as little time as possible.
Hypothesis Statement
We believe that by creating a responsive web app for potential property buyers that provide comprehensive information on properties of interest and include a feature of direct contact with real estate agents, then we will see a high number of property sales initiated through our app.
Understanding the User
I created a User Flow based on the User Persona in order to set a framework for the app and the screen I would be developing.
Wireframes
After mapping out the process flow, I used Balsamiq to create low-fidelity wireframe, and then built a preliminary prototype with Invision to ensure that the process flowed smoothly through the wireframe. After that, I created mid-fidelity wireframes with Adobe XD using responsive grids and incorporating UI design patterns like the Flat navigation menu, overlays/modals, pop-over and input feedback.
High-fidelity wireframes were created after visual design features such as color, typography, and imagery were explored - all of which I will go into more detail in the next section.
Low-Fidelity
Middle-Fidelity
High-Fidelity
Visual Design
To define the visual direction of the app, I created moodboards for inspiration, explored different color palettes, and also explored typography.
Moodboard
The moodboard I selected embodies the lifestyle of young professional characterized by independence, as well the importance of and comfort of the home environment. This moodboard gives the impression of interriior space of young, tech-savy urban professional. It also shows that moving into a new home iis cause of celebration -
Color
The color palette compromise of lighter shade of blue, and white for background. The navy blue evoke feelings of calm and relaxation, which are essential in the lifestyle of professionals who nowadays live and work in the same space, while the dark blue tones emphasizes the professional, trustworthy image that a real estate app should provide
Typography
Responsive Design
Applying the mobile-first approach, my initial wireframes were for mobile/375px breakpoint, and then I designed sample screens for tablet/768px, and desktop/998ppx. Below are the layout grids and examples of how I applied them.
