House Hunters
Real estate responsive app
UI case study
February 2021
Project
House Hunters is a concept of responsive web app containing a database of available residential properties and lands, and comprehensive information on each listing. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site and further decision-making. This project is a result of my UX/UI Design Bootcamp and here I focused on UI design, color, typography, UI elements. The brief I used had 5 user stories, persona, and partial brand guidelines.
Skills
- User Flows
- Wireframing
- Prototyping
- UI design
Tools
- Figma
- Unsplash
Persona
Rashilda
- IT consultant for a growing tech company
- Lives with her family in a city on the east coast
- New to real estate
I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for, quickly!
Needs and Goals
- Invest in property beyond the city for increased financial security.
- Find the right information for fast decision-making.
- Need a tool that is easy to use and that will help to find the right property.
Tasks
- Search for properties, inputting criteria relevant to what she’s looking for.
- Easily view and return to listings she’s interested in.
- Receive relevant and comprehensive information about properties.
Visual direction
The mood board inspiration I get from coastal properties. House on the sea is a bit of a privilege and always represents value and the right investments. For smart, fast people on the go (like Rashilda) is crucial to have good data with simple access. So the app intends to be clean, clear, with quick access to the core information. Blue will present stability and reliability, as green - new beginning or renewal.
Wireframes
When the app structure became clear, I created low-fidelity wireframes and turned them into a clickable prototype to test if navigation and main features respect all the user flows. Then I made mid-fidelity wireframes to see if layout, visual hierarchy, and spacing works well. After that, I took time defining the style guide and finish with high-fidelity wireframes.
Final screens
Landing page
Landing page clean, minimal information. The user only needs to choose the option to buy or rent and the preferable location. These will be the first criteria applied for the search result. By scrolling, there will be short onboarding of main apps features. It is possible to use an app without login until the user wishes to save search criteria, properties, book a tour or contact a real estate agent
Log in & sign up
Users are requested to log in or sign up if they want to save preferences, properties, or organise a call or visit. Login is available via Facebook or Google accounts, or the user can use his preferable email address.
Menu & profile
The menu is simple and can direct the user to the section he needs. The profile has all the saved preferences, search, properties, settings, and scheduled visits. It is also possible to sign out from this page.
Search results & filter
Once the user enters the place he will be directed to the search result page, which he can filter by a range of parameters. It is possible to save these parameters and set up alerts on the profile page. Users can save property directly from the search result screen, to view it later. Floating CTA button is available at any moment.
Property details
Property details screen has all necessary information the user needs to take decision and then take an action: to book a tour, contact an agent, etc. It is possible to launch comparison of current property with any other(s). The top panel with actions is fixed during scrolling, like that users can react at any moment. On this page, users can see similar announces based on defined preferences earlier.
Schedule a tour
Users can book an in-person or online tour (visit) for the chosen property using a calendar. And then will receive a confirmation email. Booking will be saved in a profile.
