PERFECT PROPERTIES
Find your dream property in a perfect way.
THE OVERVIEW
Role
UI Designer
Time Line
May 2021 to July 2021
TOOLS
-
Balsamiq
-
Figma
-
Keynote
-
Lucid Chart
Perfect Properties is an app that helps you find information about potential properties in a reliable way.
The app lets the user get a feel of the place and contact the right person before spending time on site.
Perfect Properties is a project were UI design was needed for a responsive web app with a mobile-first approach.
Using UX knowledge and project guidelines, the objective was to deliver a polished, user-friendly, high-fidelity prototype and breakpoint mockups in line with the needs of the user persona.
DESIGN METHODOLOGY
OBJECTIVE
User stories for User flows
What do people need ?
Unseasoned 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 neighborhood before spending time on-site.
As a user, I want to create a profile containing all my property criteria, so that I can recommend the 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 access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.
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.
USER PERSONA
USER FLOW
LOW FIDELITY PROTOTYPE
USER TESTING
After testing the prototype with three users, it was observed that users wanted to see a demo of how the app works- hence onboarding was added.
Also, they expected to see the details of properties by clicking on location; which was included in the feature.
MID FIDELITY PROTOTYPE
With mobile first approach, I designed a grid system.
UI DESIGN PATTERNS
UI Design patterns such as swipe in a sequence, error message, icons for various modes, sorting the data and showing details in the map were added.
MOOD BOARD
Created two mood boards with visuals elements.
For a buyer, who wants to spend time away from home and financial security - looking at the properties as an investment.
MOOD BOARD 1
Earthy
A bit conservative
Reliable
Not very drastic
Predictable
MOOD BOARD 2
Earthy
Bohemian
A bit adventurous
Artsy
A bit whimsical
Mood Board 1 is more in lines with the given persona. Hence the choice is MOOD BOARD 1.
TYPOGRAPHY
Going with the personality of the app typefaces were chosen.
COLOR SCHEME
Based on the mood board, color schemes were developed.
Chosen Color Scheme 1
Earthly, a bit conservative, reliable, not very drastic, dependable, and secure choice for the real estate website in sync with the design brief and mood board.
LOGOS AND ICONS
Developed logo based on the persona and theme of the app. Chosen icons based on the character of the app.
INTERACTIONS AND GESTURES
Based on functions, I designed interactions and gestures of the app on mobile.
STYLE GUIDE
Guidelines for color, typography, icons, logos, UI elements and images for the app.
DESIGNING FOR DIFFERENT BREAKPOINTS
Designed grids for different breakpoints, based on layouts for various screen sizes.
FINAL MOCK UPS
LESSONS LEARNED
Designing an interface for an app whose initial research was done by someone else has been challenging. Referring to the persona really helps in making the design decisions.
NEXT STEPS
I would like to do usability and preference tests to further refine the design decisions taken.
Would like to work on collaborating in real-time with the developers and see how apps come alive.
Be involved while the design is in process of coming to life, is a learning experience. I look forward to it!