PERFECT PROPERTIES
UI Case Study - 2022
Perfect Properties is a responsive web application designed to help real estate small-scale investors find the right asset easily and confidently.
Project duration: 6 weeks
My role: UI designer
Tools used: Figma
DESIGN THINKING APPROACH
01 - DEFINE
The initial assumptions, objectives, facts, and feature requirements were provided to me in as a UX Project Brief. Here I summarize the main points.
A responsive web app that provides property buyers with information on properties of interest.
Objective
Real estate investment is an increasingly popular way to achieve financial security. Buyers new to the market may struggle to get started without proper guidance. This web app will provide them with the expertise needed to get started efficiently.
Context
Sign in, create a user profile and input property criteria
Search and filter available properties
Access comprehensive information about properties
Bookmark a property listing
Property recommendations feature
Ability to contact a real-estate agent
Feature requirements
02 - IDEATE
The first step was to create user flows based on the user research information and feature requirements provided in the Project Brief, as well as LF and MF wireframes and prototypes.
User flow 1
User flow 2
Once I was satisfied with the general structure of the screens, I used Figma to create mid-fidelity wireframes, incorporating responsive layouts and grids, visual hierarchy, UI elements, and patterns.
Mid-fidelity wireframes
Try the prototype HERE
03 - DEVELOP
VISUAL DESIGN
Moodboard
To establish a visual design direction, I created a moodboard. Since the app’s goal is to facilitate the process of investing in real estate, I created a moodboard that reflects simplicity and ease, with a minimalistic and clean look.
Colors were chosen to evoke a sense of trustworthiness and professionalism while - at the same time - keeping the design fresh and vivid.
In similar lines, Kollektif and Lato typefaces were selected for their simplicity and legibility.
Style guide
To ensure that the overall design of the app maintains consistency and to facilitate hand-off, I built a Style Guide, including typography, colors, grid systems, etc. I summarize it below, and here you can access the full Perfect Properties Style Guide.
04 - IMPLEMENT
High-fidelity wireframes
Prototype
Break points & responsive design
After implementing the visual design to the mobile wireframes, I created low- and high-fidelity wireframes for tablet and desktop.
I enjoyed working on Perfect Properties since it gave me the chance to focus on the visual aspects of the design.
I’ve learned the importance of establishing a mood board before the design process, since it not only gives me a clear direction for the design, but also helps to communicate and pass on the idea to others.
I enjoyed a lot creating the animations. Although simple, they already help to draw users’ attention and help to better communicate with them. I would like to learn more about this.
FINAL THOUGHTS & NEXT STEPS
User testing - As an UX designer, I feel that the most important next step is to test the design with potential users and iterate on the design based on the results.
Iconography - I would like to expand on and polish the iconography.
