Tiny Dweller Vacation Rentals

Product Design | Responsive Design

An overview

Constraints
  • Needed to be a responsive design
Team
  • 1 UX/UI Design Student
  • 1 Design Mentor
  • Group Critique Sessions
Timeline
  • 2023
  • 4 Weeks
tools
  • Figma
  • Zoom
  • Gencraft

Conceptual project for Designlab's UX Academy

The Problem

Travelers looking for unique vacation rentals are often faced with two less-than-ideal choices.

Well-Known Platform (Airbnb or VRBO)
‍‍
Many people use platforms like Airbnb or VRBO to find and book unique vacation rentals like tiny houses. However, by using these platforms, users can end up paying 5%-15% more than if they'd book directly from the owner's website.


Owner Direct-Booking

‍‍
Unfortunately, using an owner's direct booking website can be frustrating. Many direct booking websites are outdated, hard to navigate, and contain unclear information. Some users also express concerns about the security of using a direct booking website instead of a well-known platform like Airbnb or VRBO.

Users want a vacation rental website that is simple to navigate and that contains all the information they need to confidently make a reservation.

The Solution

An intuitive direct-booking website where users can confidently book a tiny house vacation rental

The Tiny Dweller vacation rental company owns multiple tiny houses. Users can search for and book one of the houses directly from the company through the Tiny Dweller website.

The home screen of Tiny Dweller.

What I did...

Secondary Research

People want to experience tiny house living, but what would be the best way to connect them to this experience?

I wanted to create a product that allowed users to experience the fun of tiny house living. At first, I envisioned a site where users could rent land from individuals all over the US. Then users could park their mobile tiny houses on the land they had rented.

I dove into researching the legal requirements surrounding tiny houses on wheels.

Key Findings:

I pivoted in my research to see if it would make sense to have a website for stationary tiny houses.

My discoveries led me to focus on designing a direct-booking website for the Tiny Dweller company. The Tiny Dweller company rents out stationery tiny houses located on one lot of land.

Three statistics in particular helped to confirm this decision:

Potential for revenue from online bookings is growing.

"In the vacation rentals segment, 83% of total revenue will be generated through online sales by 2027."
www.statista.com

Third-party websites are more expensive.

"The majority of travelers (67%) feel that it's more cost-effective to book a property by means of a brand's own website as opposed to third-party websites like Airbnb, Booking.com, and VRBO."
www.igms.com

Users can save money through direct booking.

"You will generally save between 5-15% on the price of a booking if you book direct."
blog.hichee.com
Competitive Analysis

How are other direct booking websites doing it?

I researched four direct booking websites that specialized in tiny house vacation rentals. I wanted to see what strengths and opportunities for improvement they had. 

The competitive analysis I did of four direct booking sites

While I discovered some great details these websites included, like a diagram of the house floor plan or a virtual tour video, I also discovered opportunities for improvement.

Here are some opportunities for improvement that I focused on while designing:

  1. Visible pricing

  2. Visible date availability

  3. Easy options for viewing the pictures

  4. Visible rules and policies

  5. Familiar and simple navigation patterns

  6. Concise details

  7. Visible reviews

I needed to round out my research by looking at third-party booking sites to get a complete picture of the competition.

Sites like Airbnb and VRBO are highly successful, so I knew I could learn from them. I specifically studied:

Airbnb
VRBO

Key Finding:

Neither of them offered virtual tours or video walk-throughs of the houses. This seemed like it could be a big improvement that I could include on the Tiny Dweller website.

User Interviews

I wanted to hear from the users themselves to better understand what they needed and valued.

Key Findings:

"I look over everything super carefully because I want to be sure it's where I want to stay."

User Persona

Keeping my user persona in mind helped me make decisions based on the user.

I created a user persona that summarized the themes I had uncovered during my research.

Amber, The User Persona.
POV & HMW

POV: The user needs to clearly understand what the rental is like before booking because they want to have the perfect vacation that they'll remember fondly.

After focusing on this POV statement, I went on to ask, "How might we eliminate any unpleasant surprises for users who book tiny house vacation rentals?"

Both statements helped to guide my work and keep me focused as I designed.

Sitemap

Getting a high level view helped me to start organizing my ideas.

I created a sitemap for the entire Tiny Dweller website. However, due to time constraints, I only designed the searching and booking part of the site.

The sitemap.
User Flow & Task Flows

How would the user go about finding and booking a rental?

Creating user flows and task flows helped me to visualize the steps the user would take to search for and book a vacation rental.

The task flows for finding and booking a vacation rental.
The user flow for finding and booking a vacation rental.
Low-Fidelity Wireframing

I took a mobile-first approach.

After figuring out the mobile version, I translated my design into a desktop version. All the mobile and desktop screens for the task flow of searching for and booking a vacation rental are below:

I needed to show a lot of important information in a simple way.

To make it easy for users, I focused on giving highlights of the important information about the house on the house listing page.

If users need to know more, they can expand the information and see it on a separate page. This keeps the long listing page from becoming too unwieldy.

Mobile: Seeing seeing the information for a tiny house

Desktop: Seeing seeing the information for a tiny house

Usability Testing

I wanted to get feedback from users before deciding anything else.

I conducted usability testing on the mobile mid-fidelity screens. It was important to me to be able to see and talk with my testers in real time so I could ask any clarifying questions and hear their input.

Iterations

Even though the testers found it easy to search for and book a vacation rental, they still had some suggestions for improvement.

I prioritized the suggestions based on their level of urgency.

Users liked the familiar navigation patterns and the progress tracker on the check-out pages that helped show where they were.

They also suggested various improvements, which I prioritized them according to their level of urgency and according to the amount of time I had.

The pictures below show some of the iterations based on their suggestions.

BEFORE: The types of credit cards accepted are not shown, causing doubt for the user. There are also no Google Pay or Apple Pay options.

AFTER: Accepted credit cards are shown. Google Pay and Apple Pay added to give users more payment options.

BEFORE: No email confirmation is given after booking, causing users to feel uncertain about what to do next.

AFTER: Email confirmation is added, giving users a level of assurance.

BEFORE: 

1.
The user has to scroll to find the check-in and check-out times, making them easy to miss.

2. The nightly rate is shown but not the estimated total price, which could give users an unpleasant surprise when they begin the payment process.

AFTER:

1. Check-in and check-out times are included at the top under the listing picture so users don't miss them.

2. The estimated total price is added at bottom for full transparency.

BEFORE: Users don't have the option to filter the reviews, making them need to scroll to see varied ratings.

AFTER: Options to filter the reviews are added, helping users see what's important to them.

UI Kit/Visual Design

A component library to keep the design easy and consistent.

I created a component library before tackling the high fidelity version of the screens.

UI Component Library
Hi-Fidelity Wireframing

And the product starts to come to life!

I enjoyed designing the high fidelity wireframes. Below are some of the mobile and desktop screens for the task flow of seeing the information for a tiny house.

Mobile: Seeing seeing the information for a tiny house

Desktop: Seeing seeing the information for a tiny house

The Prototype

Final Product

The mobile prototype

The desktop prototype

My Reflections

Next Steps

The next step would be to finish the other parts of the site that I was unable to fully design due to time constraints. This would include the following sections: About, Attractions, and FAQs.

After that, the product would need to be sent off to developers.

In the future, it would also be good to explore options for users to create an account to keep track of their booking information, save their payment information for future trips, and easily leave reviews.

Currently, in order to contact the owner, the user has to call or email them using the contact information given. In the future it would also be good to explore an integrated messaging system so the user doesn't need to leave the site to contact the owner.

Takeaways

Takeaway 1

When designing Tiny Dweller, I found that analyzing existing navigational patterns was very helpful. I was able to take what was already proven to work well and add features that my research indicated would be beneficial. This saved me a lot of time and error.


Takeaway 2

Discovering that it wasn't legally feasible to follow my first idea for Tiny Dweller's business model reminded me once again of the importance of accurate, thorough research before going too far with a project.


Takeaway 3

I enjoyed hearing what users had to say about their experience when searching for hotels and vacation rentals. Sometimes without the right research, it can be easy to think of users as a vague group of people that you're trying to build an experience with. However, conducting interviews and listening to their stories, their hopes, and their concerns helped me to empathize with them as real people and really root for this design to be something that helps them to plan a lovely vacation.