Housr
UI concept - Cohousing made easy
Introduction
Inspiration for this app came from the Australian co-housing market. I created an app concept from scratch based on my own experience cohousing in Zürich and my trip to Sydney, Australia where co-housing also is quite common due to the high cost of living and rental prices.
🔍 Problem
Due to the very high rental prices, finding a place for 1 person is hard and barely affordable. Even though the place you stay is important, the people you live with are, also. A proper application however is lacking.
✨ Solution
The idea was to combine a social platform with a housing app. The focus is on the UI in this project.
🤔 Hypothesis
People in cohousing care about the people they live with, just as much as the place itself
Tools
Adobe XD
Team
1 UI Designer
My Role
Ideation
Research
Timeline
Overall: 2-4 weeks
Research and users
The target audience of this app would be very close to my own profile and would be based on my own experience. This means I made my own best possible user persona, which made it easy for me to design this concept. Users are anywhere between 20 and 38 and are active young professionals with busy social agendas. They are very familiar with using digital service apps like Uber, Airbnb, or Uber eats.
Structure
For the logical flow of information, I created this structure to prioritize the information hierarchically. This gives a great overview of the most important parts of an application.
Visual attraction
Vital info and quick action
Short description
Highlights with secondary info
Address
Flatmates
Amenities
Seller + Contact
UI Design
On the overview page, you can search for a place using the location search box, or using filtering to narrow down your options. There is also the opportunity to use a map view. You see the number of results your filtered result has brought forward and see some of the main properties of each place at a glance. This way you have vital info like location, price, and surface area on the overview page. You also have the opportunity to “favorite” certain places.
I used a light design style based on googles Material UI. I overall love this page since it gives me such a nice feeling seeing everything come together and being so balanced.
Filtering page
On the filter page, you have the possibility to filter results on location, price, number of inhabitants, place type, or period. The entire design was done using two main colors, the main aqua, and orange as a highlight colors.
Components-wise, for the data inputs of price and flatmates, a slider made the most sense. The chart on this slider also shows the number of properties available at each price. For the "Place" filter, checkboxes were the logical choice and for the "period available" data would naturally become a date picker.
Detail view
The detailed view boasts a large visual that immediately attracts the user. The back button is put in a container to increase visibility. The “favorite” button is repeated on the right-hand side (the primary side for most users).
In the following section, there is a breakdown of the most vital information needed to make a quick decision. The CTA is clear and in a different color from the highlighted text.
Below that is the short description text where users can explain a little more about the house and room.
Detail view on scroll
On scroll, you learn more detailed information like the occupancy of the apartment, the exact location, and amenities. You also see who the person selling the apartment is and there’s the option to get in touch with this person via phone call or message.
Learnings
I really liked to dig into a design and create the perfect balance between colors, weights, fonts, and shapes, and supplement this with nice images.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.