Perfect Properties
“Finding the perfect property shouldn’t be hard”
The Challenge
Overview:
Real estate has become an increasingly popular way of achieving financial security, however, buyers new to the market often struggle to get started without professional guidance or end up wasting time looking at properties out of their means or budget.
Problem Statement:
Unseasoned home investors need access to reliable, uncomplicated information about their potential property investments.
The Solution
Perfect Properties solves this challenge by featuring a database of properties, as well as comprehensive information on each listing.
The web app is primarily for new, small-scale property buyers who are looking to invest for additional income and financial security. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site.
My Role
UI designer tasked with designing a responsive web application that would guide inexperienced investors through the complicated processes of real-estate investing.
For this project, I was responsible for analyzing research data, developing branding and style guidelines, and designing high fidelity mockups and prototypes for mobile, tablet and desktop breakpoints. I worked closely with Michelle Cantinho, a UI design expert, who advised and signed off on each step in the design process.
Understanding my users
User Persona - User Stories - User Flow
The first step was to understand who my users are and how I could best design for their needs. User experience data was collected and compiled into a Primary Persona, Rashida. Rashida was used to inform design decisions throughout the design process.
From the user data, I identified five user stories that formed the basis of my user flow diagram and site map.
Creating an Interface
Rapid Prototyping - Low/Mid-Fidelity Wireframes - Style Guide
In this stage, I began by conducting a competitor analysis of real-estate, financial and banking web/mobile apps to identify common design patterns for problems in the real estate industry.
I used rapid prototyping to quickly sketch ideas and identify a design solution to move forward with. I created Low and then Mid-Fidelity wireframes to test with users before moving forward.
High Fidelity mockups at mobile, tablet and desktop breakpoints
Final Thoughts and Retrospective
What went well?
“User flow document strongly supported future design decisions”
Skills: Research analysis, User flow, Task analysis
Processes: User research
Solution: Keep doing this
“Mid-fidelity wireframes using UI kits saved time and created a strong foundation for Ui elements”
Skills: Wire framing, UI kits
Processes: Iterative Design
Solution: Keep using UI kits to make effective mid fidelity designs that can be prototyped and tested.
What Didn’t go well?
“ Responsive layouts were difficult due to inconsistent grids”
Skills: Using grids, Wireframing, Responsive layouts
Processes: Responsive design.
Skill gap: Using Grids
Solution: Consult developers and designers regarding grid systems. Practice responsive layout design in future work.
“Experienced color palette criticism in later stages of project which was time-consuming to change and caused project setbacks”
Skills: Selecting a harmonious color palette
Processes: Style guide Creation, Color in UI
Skill gap: Color theory, Color schemes
Solution: Practice color theory, get feedback from trained designers
What can be improved?
“Time management when creating in Sketch, especially in lower fidelity stages”
Skills: Sketch
Processes: Wireframing and Design
Skill gap: Time management
Solution: Schedule time blocks when working in sketch to ensure that each part of workload receives attention.
“Seek user feedback earlier in project”
Skills: User testing
Processes: Iterative Design
Skill gap: Getting feedback
Solution: Create testable prototype earlier on and get feedback frequently in the design process.