Future Home
WELCOME
Future Home is a web app that provides property buyers with information on properties of interest.
ABOUT US
Real estate investment is an increasingly popular way for individuals to achieve financial security.
Now Future Home will be a user-friendly, responsive web app containing a database of available
residential properties and land, and comprehensive information on each listing. Buyers will use this tool when conducting property searches, and making a decision about where to invest.
TIMELINE OF THE PROJECT
Role
UX/UI Designer
Duration
3 Months
Tools
Figma
CONTENTS
-
User Stories
-
Persona
-
Web Flows
-
Wireframes
-
Mood Board
-
Style Guide
-
Hi-Fidelity Prototypes
-
MOCK UP
-
Hi-Fidelity Clickable Prototype Link
USER STORIES
•As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.
•As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.
•As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them.
•As a user, I want to be able to contact the right people if I am interested in viewing a property, so that I schedule a viewing.
Persona: Rashida
IT consultant, 29 Years
Goals:
-
Rashida makes a good living and wants to invest in property beyond the city for increased financial security for her family.
-
She wants to find the right information for fast decision-making.
-
She wants a tool to help her find the right properties so as not to waste her time.
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.
Quote :
“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!”
WEB FLOWS
WEB FLOW 1
WEB FLOW 2
WIREFRAMES
LOW FIDELITY WIREFRAME
HIGH FIDELITY WIREFRAME
MOOD BOARDS
MOOD BOARD 1
MOOD BOARD 2
I created two mood boards, and each mood boards depicts an interesting story.
First mood board says : How to stay cool, calm, composed and determined. As we know developing the ability to stay calm under pressure situations means that you are less likely to suffer from the effects of stress, anxiety, and worry.
Determination is very important because it enables us to persist in the face of difficulties.
Second mood board says : We live in a time of rapid change and increasing uncertainty, a time when planning for a predictable future has become extremely difficult. So, it is important to be connected and grounded with nature and its purpose of life.
I choose the second mood board. I feel that the user can connect more to it.
STYLE GUIDE
LOGO
COLOR PALETTE
TYPOGRAPHY
ICONOGRAPHY
IMAGERY
GRID AND BREAK POINTS
Hi-Fidelity Prototypes - Final Designs
FINAL MOCK UP
CONCLUSION
Firstly, I would like to thank Career Foundry for giving me this platform to showcase my designing work to the world.
While designing for my Future Home app, I wanted to make sure thinking about the user’s perspective, what users might need and ensuring that the interface has elements that are easy to access, understand and use.
After a lot of rough work while making number of wireframes, I realized it is important to think about the designs, colors, sizes, typography etc.
Since users can only interact with the app or website through the UI, its design will determine their main impressions.
These are my challenges which I faced and also very happy that I got to experience so many things in my design work.