Case study:
A mobile web home rental concept

Overview

Roost – A Curated Travelers’ Stay.

This project was provided by the Design Lab UI Design Course. I spent three weeks creating a task flow, wireframes, and exploring various UI designs to take my mobile website, Roost, from concept to prototype. 

Roost is a global home rental concept whose audience loves new experiences and are looking for unique places to stay when traveling. Roost looks friendly and welcoming. Most importantly, it puts users in control of their journey, by giving them a more personalized search.

The Goal

The website’s goal is to be the go-to platform for personalizing travel, to create a way for people to easily find a home rental tailored to their individual tastes and needs.

My Role

Design an apartment finder website allowing users to search for an apartment, refine the results by a set of criteria, view the details about an apartment, and initiate contact with the owner.

Project Timeline

3 Weeks

Highlighted Skills

User Research

Task Flow

UI Design

Wireframing

Prototyping

01. THE PROBLEM

Finding Your Home,
Away From Home

The Target & Challenge: The user base for this project consists of people in the 23-40 age range, looking for alternative places to stay when traveling, both short and long-term rentals. They want travel experiences tailored to their likes and sensibilities.

The Opportunity: I wanted a way to create the perfect travelers’ stay, beginning with users taking a quick quiz begin a conversation with travelers about their ideal trip. By answering a few questions up front, users continue on to find a rental in a specific area, view details, filter and define criteria, and initiate contact with the owner/agent.

The Task:

1. To allow the user to incorporate their personal sensabilities and likes.

2. To create an easy way for users to book a travel stay.

3. To create an engaging, intuitive UI

02. MY ROLE AND PROCESS

• I began by researching online statistics about the vacation rental market as well as competitive analysis of ways people are already accessing online bookings.

• From there I formulated who the targeted user would be, their behaviors and what their needs are.

• I then created sketches, wireframes, mood boards, style guide, and high-fidelity mockups to address the pain points of the user.

• With mobile prototype in hand, I asked a few seasoned travelers I knew to test the prototype, received feedback and continued upon design iterations.

03. UNDERSTANDING USER NEEDS

Who’s traveling and why?

To begin, I created a provisional persona based on looking at online travel industry data statistics to get a sense of market trends and user needs in the travel rental arena. This persona was created with assumptions and not fully research-based but it was something that I came back to throughout my project to guide my design decisions and priorities. 

I also did some competitive analysis of related rental home finder apps – Naked Apartments, Airbnb, Rentberry, Zillow, Hotpads, Out East – to see how people were finding home rentals online.

Competitive Analysis Key Takeaway: Other than Airbnb, the main finding was that none of these apps offered personalized search. On most of the sites, users keyed in basics such as price, bedrooms, and location, without defining other categories of interest or needs.

Key insights I discovered from user research.

Insights discovered by looking at online travel industry data.

1.

Millennials

Millennials are disrupting the travel industry with short term vacation rentals and are predicted to spend $1.4 trillion on travel each year by 2020.

2.

Going Mobile

42 percent of travelers use their smartphones to research and book their vacations.

3.

Bizcation

Many travelers see business trips as an opportunity to create their personal vacation.

4.

Reviews

92 percent of travelers say they trust reviews of their friends over commercial advertising.

5.

Personality is the New Luxury

HomeAway reported a 55% growth in barn bookings, a 40% increase in houseboat reservations and a 30% boost in tree house bookings compared with the previous year.

04.  DEFINING THE PROBLEM

Why Personalize?

Based on research findings, millennial travelers are looking for under-the-radar locations and experiences. They often combine work with travel and are keen on amenities suited to their likes and needs.

By delivering content and functionality that better matches specific user needs or interests, with little effort from the user, a greater connection with the user is created. Users will be more drawn to an app that matches their needs.

Ben’s goal on his business trip is to find authentic and memorable experiences for his stay while completing his photo assignment.

05.  IDEATING THE SOLUTION

TAsk Flow

Beginning with pencil sketches first, I created what I thought the specific steps of the user were to go from the website landing page, personalizing search, searching for housing, finding a home, and then contacting the agent. This will help with wireframing by defining the specific task flow of the user at the start of the project.

Wireframes

Almost half of travelers today use smartphones to research and book their travel plans. With that in mind, I began developing mobile wireframes in Sketch.

Listed below are key features of the mobile website as they pertain to the task flow.

1. Personalization. A quiz to convey user like and dislikes

2. Rental list (sort by popular, nearby, user personal tastes)

3. Search (filter by category, type, price range, location, rating etc.)

4. Instant message (for inquiry)

06.  VISUAL DESIGN

Mood Board

After wireframing, I turned my focus to visual design. I began by creating two distinctive mood boards based on user research.

The first one is vibrant, positive, upbeat energy. The name “Roost” suggesting a rooster, or early riser. Giving images a warm tint with navy blue for grounding, stripes and plenty of white, I wanted to convey a welcoming interface suggesting inspirational wanderlust or off the beaten path experiences.

The second one is calm, blue tones suggesting skies, trust and peacefulness which suits the objective of finding a restful place to sleep with a few pops of warm tone color.

Style Tile

I put together a style tile to refer back to when building out design elements for the high-fidelity wireframes. They are also extremely useful in getting design feedback during early phases with clients and stakeholders.

07.  PROTOTYPING

Prototyping A Solution

What if you were able to begin your trip knowing when you arrive, you’ll have the things in place to create a wonderful stay away from home?  The website’s goal is to be the go-to platform for personalizing travel, creating memorable experiences based on your tastes and interests. 

Take Ben’s journey as an example:

Introduction Screens

Introduction screens engage Ben by asking a few simple questions about his travel plans and rental needs.

1. Home Page Top – A brief introduction to the site and how to begin. 

2. Home Page Bottom – A few questions are shown to introduce Ben with the personalization quiz.

3. Get Started Quiz Page – Asking a few questions up front engages Ben with the quiz.

Login and Home Screen

Ben signed into Roost with his Facebook account. Roost then customized Ben’s search feed using his areas of interest, travel likes and needs, and destination location.

4. Login Page – Ben can then sign up or sign in with Facebook or email account.

5. Search Page Top – Ben can then begin his search by adding personal details …

6. Search Page Top – … or searching popular locations.

Search, Filter and Apply

Ben is able to view a range of available listings,  property details and contact the owner about booking.  

7. Search Results Page – Ben’s personalized search results from details he added and quiz questions.

8. Search Filter – Ben can change his search particulars at anytime.

9. Search Results Detail – Specs on a property of interest and the ability to reach the agent/owner.

08.  OUTCOMES + LESSONS

REflection

This was a good exercise to help build my skills with visual design and to think of the product more holistically. Originally, a simple exercise to create a task flow, wireframes and prototype, after data and user research, I began to see a pattern for who would be the end user and designing something to fit their needs.

What else could have been done?

Within the timeline of this project, I relied heavily on assumptions and secondary research. If given more time, I would like to explore the following:

1. I would really be interested in going more in-depth with crafting the personalization aspect of it, which is easier said than done, and if not done correctly can lead to negative outcomes.

2. I would do a proper usability test, user interviews, possible A/B test on designs, and continue iterating on the design.  

3. I would also build out the landlord side of the user experience.

Next Project

Print Design

I am actively seeking opportunities in UI/UX Visual Design. If you are interested in my work and would like to chat, I would love to connect with you.

cassencreative@gmail.com

 

LinkedIn   /   Resume

Made with love and pots of tea in Wordpress. 
© 2019 Melody V. Cassen. All Rights Reserved.