Housed
Housed is a relocating website that allows users to connect with hosts who are offering a place to stay in exchange for rent or work.
Find a city to relocate
Browse hosts
Work or pay for your stay
Time: 3 weeks
Role: UX/UI designer
Team: 2 members
Tools used
UX/UI process
For this project we used the UX/UI phases to create the framework and mockups for our project. The phases used were learn, define, design, experiment, iterate, and launch.
Audit
The first task was the audit. We audited multiple websites that offer the same type of service to better understand the market and to get an idea of what works and what doesn’t to come up with a better website for users.
Data
“Seven in ten millennial business travelers want to stay in local host rentals ”
We collected data to analyze the percentage of travelers who were willing and comfortable to stay in homes of someone they didn’t know. The number of travelers who were willing to take up the service was high.
Social listening
We took to social media to learn what others were saying about home stays. The top priority for travelers were options and better communication.
Survey
After analyzing our survey results we got a better understanding of our user needs and what is to be expected which helped us move forward with our design process. The top priority for travelers based on the survey we conducted was safety and exchanging work for a place to stay. This information helped us move forward with our personas.
Personas
The personas were created with information gathered by our data collected, surveys, and 1:1 interviews.
User journey
In our user journey workshop we created the actions a user would take from the moment they started searching for a place to stay. By doing so we were able to find their problem areas and come up with a list of features for our site.
Feature prioritization + MVP
Working with the web development team we conducted an MVP and listed our top features. We used the MoSCoW method to list out top features in order of importance the effort it would take to make.
UX strategy
Information architecture
The sitemap was created first to help us decide the content we needed to create for the website. We used this to make sure we cover all important goals.
Design
After our sitemap was created we were able to start designing our wireframes. We started with hand sketches and moved our designs to Sketch.
Wires
Multiple versions of wireframes were created before the final decision.
Flows
Testing
“It’s easy to search for properties. I really like the results page and booking is simple.”
We tested our wireframes and prototypes on users and got valuable feedback that helped us move forward with our designs in an iterative approach.
A/B testing
We used A/B testing for our homepage. The left was the preferred choice for users.
Final wires
Iterate
High-fidelity mockups
A moodboard was first created to decide the direction of design we would be taking for our mockups.
Design system DSM
The design system was created for web development in order to help them with typography, colors, images, and code.
Primary CTA/ Components
Inspect
Inspect was helpful for developers during the handoff. It allowed them to pull the relevant code, typography and icons.
Annotations
Annotations helped explain to the web development team the important functions of the website and what is to be expected when developing.
