UI Case Study
Find your perfect future home
Project Overview
Everyone will probably face a problem when considering buying a house. What house is it better to choose? A real estate responsive web app that provides new house buyers professional guidance with expertise and allows them to view properties by users’ preference and location to get started efficiently
Role
UI designer
Primary Stakeholder
CareerFoundry UI for UX designers course
Duration
3 months
Tool
Figma
Skills
Introduction
User Persona, User Stories, User Flows, Wireframes, Prototyping
Project Problem
Unseasoned house buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighbourhood before spending time on-site
Project Goal
“Finding the perfect property shouldn’t be hard” A responsive web app REAL HOMES provides new house buyers with information on properties of interest to find the perfect property for people who want to invest in property for increased financial security and provide a tool that helps them to get it started quickly.
The design process
Ideate
User Persona
Name
Age
Rashida
42
Job Title and Experience
As an IT consultant for a growing tech company, Rashida is frequently on the go, and often holds meetings by phone in her car while driving. She is good at multitasking and relies heavily on technology to help her with this.
Education
Bachelor’s in Computer Science and Master’s in Advanced Computer Systems
“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!”
User Stories/Flows
Design
Wireframes Sketch
After I defined the flow and thus what screens I needed, I quickly created the wireframe sketch to see how this content could be into screens. The focus of this exercise was to showcase the content of how simple and easy to use instead of focusing on the visuals.
Low-Fidelity Wireframes
Using Low-fidelity wireframes to move forward thoughts and ideas. I created low-fidelity wireframes with Figma in order to bring the user flow into the app and determine the application’s information architecture.
High-Fidelity Wireframes
Next, I dove into the high-fidelity design to focus on the visuals. Here are the final designs for the mobile web pages
Mood Board Options
Mood Board 1
Mood Board 2
I have decided to create my app with option 2 which is a modern green style. Firstly, our persona and our target audiences are new small-scale property buyers who are looking to invest for additional income or financial security. Therefore, It is essential to provide a clear and easy-to-use tool to guide them through the process of searching and finding new properties without making them frustrated.
Secondly, green colour is connected to abundance, growth, and health, and has become popularly associated with peace, and environmental consciousness. whether you’re in finance or gardening, green may be for our users.
The key message for my app is “Finding the perfect property shouldn’t be hard.” I focused on creating how easy and clean design and providing concise information for users who want to buy the property for the first time. I believe that the option 2 mood board can help users accomplish their goal of finding the perfect property.
Handoff
Style Guide
Animations
Responsive Design
Landing page
Mobile
Tablet
Desktop
Property details page
Mobile
Tablet
Mockups
Married with 2 children
Marital Status
The green conveys feelings of trust and professionalism. Also, it is associated with a positive outcome. I believe that those colours palette will make my product great innovative, beautiful and user-friendly.
Desktop
Takeaway/Nextsteps
Designing a REAL HOMES responsive web app as a UI designer gave me expand my UI design skills and understand how each content incorporate into the app. I’ve learned that prioritising important content and creating a user-friendly experience would help users to gain an understanding of how the platform works. I managed to introduce a significant amount of improvements compared to before I dive into designing this app. There will still be hundreds of challenges for me to become a great UX/UI designer but this work in property app built my confidence as a designer by more understanding of this industry and valuing everyone’s opinion to create a better product.
If my product was a real-world project, I would conduct user testing with the changes that I’ve implemented. Also, I would focus on updating new features or elements to see what my users need and how the flow was as smooth as it could be.