UI Design Case Study PerfectProperties
Branding | Logo Design | Style Guide | Mockups | Prototype
Overview
What is PerfectProperties?
PerfectProperties is a web application that I created during my UI Design Course at CareerFoundry. The goal of this app is to make it easier to search an apartment or house to live in or to find a suitable investment.
My Role:
- UI Designer
Duration:
- 4 Weeks
Tools:
- Figma
- Photoshop
- Rotato
Case Summary
Background
Finding the right property to invest for additional income or financial security can be hard. It is difficult to compare different properties, get information about rentability and developments of rents and the neighborhood of the property.
Problem Statement
Our users need an easy and quick way to compare different properties to buy as a home or as an investment. The app should offer comprehensive information about the different properties and present them in a data-driven and visually appealing and clearly laid out way.
Potential Solution
A responsive web app with comprehensive filters to find the property according to users needs. To give users a quick overview, the app shows, how the different properties match to the criteria user put in the app. Besides, reliable, comprehensive and uncomplicated information give valuable insights about the property.
UX Design & Research
This project focuses on the UI Design as part of a specialization course (UI for UX Designers) at CareerFoundry. Hence, the Problem Statement and User Personas were provided by CareerFoundry. The user stories and the rest of this project were authored by me based on initial information and my own research. This allowed me to deepen my knowledge for the users and define their needs and goals to design a solution.
User Stories
User Flows
Based on the user persona and her story, I created the user flow to ensure users had an efficient and simple way to reach their goals in the app. According to the brief, user's needs were: to set up relevant information for properties while registering, to see matching properties in the search page and to get reliable and uncomplicated information about properties. Next, I built the first sketches and prototypes to test the solutions with users.
User Flow 1
User Flow 2
User Flow 3
Wireframes
I sketched the most important screens of the app with pen and paper, representing the User Flow Diagram. I discussed these wireframes with my mentor from CareerFoundry. In the next steps, I considered the changes suggested by the mentor and created digital lo-fi wireframes.
Mood Board
When focussing on app style, I created a mood board for the property seeking app aimed at busy and tech-savvy people. It features a trustworthy and serious color scheme to create an overall reliable look and feel and help that users trust the app. The general style of the app is clean and has a data-driven look. The app uses lots of clean icons, charts and infographics.
Color Palette
The main goal was to find a color palette, that let the app appear trustworthy, serious, tech-savvy and modern at the same time. Because app users potentially spend a lot of money when buying a property, seriousness was very important. I decided for a remarkable and calm blue tone as main color, accompanied by various lighter shades of blue and gray. A light orange-red was used as accent color.
Typography
I choose the Montserrat typeface for this app, because it is clean, modern and discreet style matched the general style of the app. Besides, this typeface has a high readability, which is important too.
UI Elements
When focussing on app style, I created a mood board for the property seeking app aimed at busy and tech-savvy people. It features a trustworthy and serious color scheme to create an overall reliable look and feel and help that users trust the app. The general style of the app is clean and has a data-driven look. The app uses lots of clean icons, charts and infographics.
Breakpoints
I used a mobile first approach and designed all the content for mobile screens. To create responsive layouts, I used a 4-point-grid-system and adapted the most important pages of the app. I adjusted button sizes, image sizes and font sizes to bigger screens in order to optimize user experience. In the desktop layouts, I kept the hamburger menu to make the usage of the app seamless to the user.
Interactive Prototype
I created a digital prototype and shared it with my CareerFoundry mentor and with 3 friends to gather feedback and uncover potential issues. After the feedback, I changed spacing, button sizes and font sizes to improve usability.
All Layouts
Here you can see all layouts of the PerfectProperties App.
Key Learnings
- Every UI element, colors, spacing, typeface, and visual hierarchy plays an important role in creating a cohesive user experience
- I learned a lot about the usage of color, what emotions they evoke and how they influence the general look and feel of an app
- I learned, how to use grids and how to adapt a mobile layout to a desktop layout
- Creating a style guide and organizing folders extended my knowledge, allowing me to work more efficiently within a team
Next Steps
- I'll focus more in improving users' experience with the app by creating all little screens (warnings, confirmation screens, enhanced filters)
- I'll test different versions of these layouts with AB testing
- With the final layouts, I'll create a prototype as if it were the real app
- I'll test this prototype with various potential users, do interviews with them and optimize the layouts of the app
😀 Thank you for scolling
More Works
Discover case studies for apps and websites with different styles.
