Perfect Properties
Perfect Properties is a responsive web app connecting potential home-buyers with available dwellings. In addition to its fun and vibrant appeal, Perfect Properties offers users the ability to search by architectural type, connect directly with agents, and even book moving services directly in-app.
Time + Role
9 Weeks
UX | UI Designer
Tools
• Adobe xD • Adobe Photoshop
• Balsamiq • FlowMapp
• Frontify • Invision
Design Brief
Persona - Rashida
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.
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
As she is new to real estate, she wants a tool that is easy to use and that will help her find the property she’s looking for:
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
Branding Guidelines
Key Messaging: “Finding the perfect property shouldn’t be hard”
Style: Clean, quick, smart; greens, blues, purples
Features
Sign in, create user profile, and input property criteria
Search and filter available properties
Access comprehensive information about a given property
Bookmark a property listing
Property recommendations feature
Ability to contact real estate professional when wanting to move forward with a property
Research + Analysis
User Flows
By analyzing the design brief, I was able to start drafting user flows derived from the required features. The success criteria established during the research phase included being able to view a listing, bookmarking it, and being able to contact the agent directly in-app.
Challenges: Establishing the onboarding process took a few iterations. I knew I wanted users to be able to easily choose certain settings at the Sign Up phase, but could not easily settle on a user flow for the beginning of this product.
Solutions: After sketching out various flows for the onboarding process, I decided the most user-friendly approach would be to stretch the sign-up process overall several screens with each screen offering a search filter, rather than cramming a ton of information on one page causing users to lose attention easily and risk them exiting the app.
Mood Board
Challenges: I drafted about two mood boards at first - deriving from popular real estate trends (Farmhouse and Mid-Century Modern). Although the boards matched the overall feel of the app's purpose, they ultimately derived austere and moody color palettes.
Solutions: I determined during my research that I was more drawn to the mid-century aesthetic but needed more color. I ended up finding images of mid-century-style houses in Palm Springs and was instantly drawn to the vibrant nature. Narrowing my research to that specific Californian area, I landed on a board that perfectly captured the colors, shapes, and overall design aesthetic I was looking for.
Key Insights: Despite easily being able to source image inspiration - the whole package needs to fit the branding message. The design package should include a combination of colors, typography, shapes, etc that all form a cohesive style that can be used throughout the product.
Concept + Design
Wireframes
Beginning with mockups in Balsamiq, my low-fidelity wireframes formed the basic layout. I developed mid-fidelity wireframes establishing a navigation pattern that would not only be functional but save space and not overload the user with content. Additionally, a Bootstrap Design Framework was established to accommodate future responsive iterations. Lastly, visual hierarchy and accessibility features were implemented into the product before adding in more stylized elements.
Referring to my mood board, I began exploring web fonts and color schemes that fit the Retro Palm Springs aesthetic. Adding these two elements first assisted in creating the earliest high-fidelity iterations. Having the high-fidelity structure in place, fine-tuning colors, type, illustrations, etc easily fell into place. The current high-fidelity screens ultimately derived from locking down a consistent architecture and sourcing the mood board throughout to utilize iterative design processes.
Key Insights:
Successes - The typography used throughout the app (Pacifico and Poppins) was ultimately the greatest success while wireframing. These fonts fit perfectly and helped define the mood board's vision early on making the remaining elements easy to navigate.
Struggles - Colors were a struggle as I wanted to commit to a more muted palette initially. The beginning color scheme did not capture the branding colors well and didn't make the app visually appealing to users.
Solutions - By adjusting the initial color scheme to match the vibrancy of the mood board, implementing the new colors proved to be more successful and appealing to the user.
Break Points
Mobile-First Design
Beginning with mobile design, I was able to develop a firm architecture for the product and branch out more defined user flows. With Perfect Properties being a responsive app, it was incredibly important to ensure the UX functioned flawlessly in the most utilized device first.
After the initial structure was established, I started to build the UI with a bootstrap grid system and design inspiration from the mood board.
Tablet
After finalizing the UX and overall look of the product, I felt comfortable moving onto the tablet design. I wanted to keep a mobile-like approach for the tablet, having prominent icons and focus on the key features. With the larger screen, I introduced a hamburger menu and certain features in the top navigation instead of holding large real estate towards the bottom of the screen. Translating identical navigation to the tablet didn’t flow correctly and therefore needed to be adjusted.
Desktop
Finally, designing for desktop fell naturally into place after establishing the other breakpoints. I knew I wanted a simple and clean navigation at the top with no distractions. Also, it was a great opportunity to see where I could expand certain features and make notes for future iterations.
Style Guide
Retro Inspiration
Color
The branding guidelines for this product required the use of greens, blues, and purples. Having these colors as a starting point, developing the color palette to match the “Retro Palm Springs” mood board was one of the most difficult and enjoyable aspects of this project. Difficult because deciding on the perfect palette took a few iterations trying to capture the exact mood of the product. Enjoyable due to playing with creativity and having the color influence the overall design.
Gestures
The gestures and animations throughout the product will ultimately mimic the vibrant mood. Exact gestures can be viewed in the Full Style Guide or Mobile Clickable Prototype.
Icons
The icons, developed in Adobe Photoshop, embody the fun and interactive nature of this product. Most icons will stay within a limited palette (black, white, and green when selected) while more advanced icons will mimic the remaining colors seen throughout the product.
Final Design
Next Steps
Moving forward, Perfect Properties will evolve into a fully functioning real estate responsive web app. By locking down a consistent user flow and style guide early on, continuing to expand features such as mortgage tools and moving services will form easily.
Before continuing to expanding this product to tablet and desktop, official user testing will be conducted in the form of usability tests and preference testing to finalize UX and UI design patterns.