Perfect Properties
A UX/UI Case Study
Project Duration
12 Weeks
Role
UX/UI Designer leading the app and responsive website design from defining the brand to final UI designs
Responsibilities
- Paper and digital wireframe
- Low and high fidelity prototyping
- Visual designs
- Accounting for accessibility
- Motion design
- Mood board
- Adhering to branding and guidelines
Tools
Figma
Project Overview
Designing a responsive web app that helps buyers find investment real estate
Over the 2020 pandemic, first-time homebuyers made up 34% of all homebuyers in 2021 which was a 3% increase from the previous year. 95% of buyers used online tools in the search process. The Perfect Properties app can help first time homebuyers access to reliable and uncomplicated information about potential properties.
Design Process
Understand
- Understand the problem
- Know the objectives
Empathize
- User Persona
Ideate
- User flow diagram
Design
- Sketch
- Mood board
- Wireframe
- Visual design
- Branding UI
- Layout & responsiveness
- Style guide
Prototype
- Prototype
- Motion design
PERSONA
Empathize
Based on the design brief I created a proto persona.
Ideate
Based on user stories, I mapped out user flows for 4 user scenarios to understand and visualize what steps the user would need in different scenarios in the app. This visual is necessary to tie together all of the user stories in one place.
User Stories
User Flow Diagram
Design
Paper Sketches
Based on the user stories and user flow I created paper sketches to outline the main user needs, wants and functionalities of the app. I defined the visual hierarchy to highlight creating a profile, searching and filtering properties, saving properties, and written and visual information based from the design criteria.
Mid-Fidelity
After having enough groundwork laid out, I created mid-fidelity wireframes to help focus on the visual hierarchy before applying styles. I incorporated elements that directly address users' goals, needs, tasks, and motivations.
This app was designed for an iOS system, The Human Interface Guidelines of Apple was used as a reference during the design process.
Layout & Responsivness
The project is fully responsive and built for viewing on mobile devices, tablets, and desktops prioritizing visuals, information, and simplicity through a visual hierarchy.
Mobile Tablet Desktop
Mid-fidelity mobile, tablet, and desktop layout for the landing page
Mobile Tablet Desktop
Mid-fidelity mobile, tablet, and desktop layout for the sign-up / sign-in page
Mobile Tablet Desktop
Mid-fidelity mobile, tablet, and desktop layout for the search property detail page
High-Fidelity Mockups
Prototype
Branding & UI
During the design process I created a mood board to help visualize ideas and the feel for the app. The 3 key words I choose to help inspire the design came from the design brief:
● Clean
● Uncomplicated
● Reliable
Style Guide
A style guide and components were created in Figma to easily apply changes throughout the design process and to keep things highly consistent throughout the app.
Motion Design
I created a loading indicator to let users know that the app is working. The loading indicator makes waiting more tolerable and gives users something to look at while waiting for the app to load.
Prototype available if you view on a desktop.
Lessons Learned
Trends - Understand the current trends, but don’t rely on trends to make your designs attractive or accessible. Each project has its own unique problem, users, budget etc. and should be specifically designed for each situation.
When it comes to accessibility, current trends may be attractive, but those trends may not be accessible for users.
© All 2022 All rights reserved. Design by Katrina