Cozy
A UX Case Study
-
The Product
Cozy is a website established to help users in finding and booking rental homes and experiences. Cozy allows users to book long-term rentals and offers flexibility for searching for rentals with home office spaces. Cozy targets users with remote work who want to travel with family and still have the flexibility to find a quiet workspace.
-
The Problem
Remote employees want an opportunity to rent a home long term to be able to travel with family without needing to take an extended vacation.
-
The Goal
Design a website that allows users to search for long-term rentals that offer a home office and the convenience of booking experiences.
-
ROLE
UX Designer
-
TOOLS
Adobe XD
-
DURATION
May 2023 - June 2023
-
DUTIES
Conduct interviews, paper and digital wireframing, low- and high-fidelity prototyping, conduct usability studies, account for accessibility, and iterate on designs
Understanding the User
Summary
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. One user group identified during my research were people who are full-time remote employees who enjoy traveling with their families.
Research identified specific barriers for the user including long-term rentals, experiences which could be booked simultaneously with the reservation, and features to filter the search specifically for a home office.
Pain Points
-
Working adults are too busy to spend time navigating other sites to book excursions for their family while on vacation.
-
Rental home websites are often busy and provide an abundance of options all at once which results in confusion and frustration.
-
Rental home websites are often not visually appealing and often do not provide an engaging browsing experience.
User Persona: Sierra
Problem Statement:
Sierra is a busy working adult who needs access to long-stay vacation rental homes because they work remote and enjoy experiencing new travel destinations.
User Journey Map
Mapping Sierra’s user journey allowed me to identify that users would like a responsive rental home website which is compatible with a mobile app and allows for longer rental periods.
Starting the Design
Sitemap
Since I identified navigation as a pain point for users, I created a sitemap. My goal was to improve the overall navigation by focusing on making good information architecture decisions. I chose this design to streamline the website and make it user friendly.
Paper Wireframes
Next, I sketched out paper wireframes for each screen in my app while keeping in mind the user pain points I previously identified. Below are images of the home screen where I focused on optimizing the browsing experience for all users.
Since Cozy’s customers access the website on various devices, I worked on designs for additional screen sizes to confirm the site would be fully responsive.
Digital Wireframes
Moving to digital wireframes highlighted how I could address user pain points and optimize the experience. Including a hero image and being intent with button placement was a large part of my strategy to improve the experience.
Features:
Hero image is used to draw the user’s attention to a featured home
Homepage is designed with the search bar front and center
Desktop
Tablet
Mobile
Low-Fidelity Prototype
To create a low-fidelity prototype, I connected each screen involved in the primary user flow of requesting to rent a home. After receiving feedback on my designs, I implemented several changes to help improve the overall flow and focus on addressing user pain points.
Usability Study: Parameters
-
STUDY TYPE
Unmoderated usability study
-
PARTICIPANTS
5 participants
-
LOCATION
United States, remote
-
LENGTH
20-30 minutes
Usability Study: Findings
-
Checkout
Once at the completing a reservation page, users did not have a way to contact their host.
-
Favorites
From the search results page, users did not have appropriate functionality to favorite a home.
-
Calendar
Users wanted to have the ability to see all available dates for reservation over a two month span.
Mockups
Based on the insights from the usability study, I made changes to improve the user flow of the website. One of the changes implemented was to allow for the user to send a message to their host after submitting their reservation. This allowed the user to connect with the host and ask any necessary questions.
Before usability study
After usability study
To allow for more transparency, I updated the availability calendar to allow for 2 months to be viewed at a time along with identifying available and unavailable dates for rental.
Before usability study
After usability study
Mockups: Original Screen Size
Mockups: Screen Size Variations
I included considerations for additional screen sizes in my mockups based on earlier wireframes. Since users search for rentals on a variety of devices, I decided it was important to ensure the browsing experience would remain identical whether on a tablet or mobile device.
High-Fidelity Prototype
My hi-fi prototype followed a similar user flow as my lo-fi prototype. I implemented design changes following the usability study and after suggestions from members of my team.
Accessibility Considerations
-
1
I used headings with varying text size for visual hierarchy.
-
2
I used landmarks to assist users navigating the website, including those users who rely on assistive technologies.
-
3
I used initial focus to call the user’s attention to the main parts of the user flow.
Takeaways
-
Impact
Our target users expressed their engagement with the visual design of the website, ease of navigation, and use of visual hierarchy.
-
What I learned
I learned that small changes in design can have a large impact on the user and their experience. A main takeaway for me is to listen to the information gathered from usability studies because it can allow for an impactful change.
-
Next Steps
Conduct another round of usability tests.
Identify any areas of improvement and ideate on those improvements.