HouseHunter App
Your Guide to find the Perfect Place
A UI Project for a responsive real estate app
UI CASE STUDY
This project is part of the UI Spercialization course for UX Designers at CareerFoundry.
DURATION
2 months
MY ROLE
UX/UI Designer
TOOLS USED
Figma , Miro, Google Slides
Project Overview
HouseHunter is a responsive real estate app that aims to revolutionize the way users search for properties by providing a user-friendly platform that offers comprehensive property listings, advanced search filters, virtual property tours, real-time communication with agents, and personalized recommendations.
Target Audience
This web app is made primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.
Problem Statement
Real estate investment is an increasingly popular way for individuals 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.
Solution
This responsive app will provide them with the expertise needed to get started efficiently. We will know this to be true when we see how many users are using our app in order to find the right property that meets their specific needs and preferences.
User Persona
For this UI project, the basic research results (User persona, User stories and Feature requirements) were given to me in advance with the project brief. I decided to develop futher the personality of my persona by adding some features.
User Stories
From the deliverables that I got with my project brief, I chose to work on the following four User Stories for my project.
User Flows
Low-Fidelity Wireframes
In the early stages of my design I started creating my low-fidelity wireframes. Low fidelity sketching provides a quick and tangible way to visualize and communicate design concepts before moving on to more detailed and polished prototypes.
Mid-Fidelity Wireframes
The next step was to focus on the interactivity of my design by creating my mid-fidelity wireframes in Figma.
High-Fidelity Wireframes
After testing my mid-fidelity wireframes with my users and making improvements and iterations based on the feedback I received , I created my high-fidelity wireframes.
Different Breakpoints
Moving across different breakpoints I made adjustments to my Grid system. I kept an 4-Column grid for Mobile, an 8-Column grid for Tablet and a 12-Column grid for Desktop. I also changed the px for Gutter and Margin for each Breakpoint.
Style Guide
Reflection
My first UI Case Study was a big challenge for me. I gained important knowledge about visual design and through my practice and engagement with the project I managed to apply what I learned. I recognized the iterative nature of the design process and the need for constant feedback and refinement and also, the importance of time management in order to meet deadlines and ensure a successful project outcome.
Next Steps
Further enhance skills in visual design and interaction design
Add new features
Accessibility check