Roam - Hotel Finding Website

This project was my capstone for graduate school, from inception, user research, design, development, and testing. This project embodied what I am passionate about, creating researched, accessible, usable websites that are inventive and aesthetically pleasing.

Why a new hotel website?


The home page of the Roam hotel searching website

For this project, I wanted to find something that I found frustrating to do online, and knew could be done in a better way. Whenever I travel, I spend hours looking for a hotel to stay at, often becoming overwhelmed, giving up, and finding something last minute that when arriving at the hotel realizing that the hotel was not what I wanted. User research was included to ensure that I was not only catering to my needs, as well, user research also became an essential beginning step as proof of concept and a greater understanding of user needs..


What makes Roam different?

By focusing on the amenities that users' want from a hotel, they can hown into what they want first. By creating a smaller pool of results, this cuts back on feelings of being overwhelmed. It is all about options, your options for hotels, and your options on how to book — allowing users to feel more comfortable with their choice ahead of their trip.

Two methods were used for user research, first an online survey to understand if others were frustrated with the online hotel finding processing and their searching habits. Then a user group of 3 user testers was used for user interviews and user testing later on.


User Personas

User Personas were created once the research was completed. Having user personas allowed for a point of reference for various types of users and their diverse hotel booking needs, preferences, and habits. Since this project was to help users find hotels in a better way, and not cater to hotels, no hotel or resort stakeholders were included.


Roam Persona number 1: John, a 42 year old business traveler who has different needs for a business trip verses a family trip
Roam Persona number 2: Susan, a 58 year old retired individual who is now a frequent traveler.
Roam Persona 3: Tim, a 22 year old explorer who books last minute budget conscious trips.
Roam Persona 4: The Johnsons, a family of four who take frequent trips as a family.


User Research

User research came in two forms, a preliminary anonymous online survey to gather opinions, habits, and frustrations with online hotel searching. Second, a user group was identified that would have in-person interviews, and they too would be the user testing group.

The user research interviews conducted included three individuals with different travel habits from casual to a very frequent business traveler. Each interview included the same questions, but conversations leaned towards each person's habits. The interviews were one of the most pivotal points of understanding other people's travel and hotel booking habits. During the interviews, preliminary wireframes were shown to get some early opinions on the site before user testing of a developed product was conducted.

User Flows

User flows for Roam were an exploration of how users' would work through the website in the hotel searching process. The two most substantial flows that were captured were the searching process and the account creation process.

Searching User Flow
User flow for searching within Roam including several steps and decision points.
Account User Flow
User flow for creation a Roam account including serveral steps and decision points

Wireframes

Wireframes were created with Axure, after an initial round of hand drawing wireframes. Using Axure allowed for the creation of a high fidelity prototype while also creating static wireframes. The high fidelity prototype allowed for exploration of how to manipulate the advanced filters that would be included in the search interface. The filters needed to be extensive due to the nature of Roam, but to keep the interface clean and modern, another goal of the site, it needed to be out of sight when not required. Axure allowed the collapsed filter menu to be explored before any code was written. Creating the high fidelity prototype also allowed for some initial feedback from the user testing group in the early phases.

Homepage

Wireframe for the home page of Roam consisting of the search interface and ammenity filter
Wireframe for Roam homepage featuring the expanding ammenity filter menu.

Results

Wireframe for the search result page of Roam
Wireframe for the search results page, illustrating an expanding feature to view more detailed information on a hotel result.


Create Account - Page 1

Wireframe for the first page of the account creation process in Roam
Wireframe for the first page of the account creation process where an individual enters their personal information as well includes password guidelines.

Create Account - Page 2

Wireframe for the second page of the account creation process in Roam
Wireframe for the second page of the account creation process where an individual enters their hotel prefrences to help Roam know more about what the individual wants and what users want in general.


Logo

Roam Logo

The intent of the Roam logo was to be as simple and welcoming as the Roam website itself. This was achieved through the use of lower-case and a rounded sanserif font. No additional decoration was included so it could stay as simple as possible.


Style Guide

Roam Branding

A style guide was created to be referenced during the design and development of the project. In a full-scale launch, this would have been the guide to produce advertisements and social media posts.


The style guide consists of the logo, it's color and font as well as the font for the website and color palette. The font choice for the website was chosen similarly as the logo, simple, easy to read, and welcoming. The color palette was to be calming and reminiscent of a relaxing vacation, be it near the water, nature, in the middle of a city.


User testing was conducted after the first round of development. The group of three users was asked to complete a search and booking and create an account, as well as a few other tasks. While the user was completing the task, observations were done making notes of when the user may have had difficulty or moments of frustration. As well as any other potential changes that came up while observing someone interacting with Roam. After observations, several interview questions about the users' experience was conducted to understand further changes that needed to be done.

The Amenity Filter Structure

With Roam's differences in how people find hotels, focusing on a long list of amenities. The first version of Roam had an extensive list of amenities with headers of categories, each amenity with a checkbox, all viewable at once. While conducting user testing, it became clear that this was overwhelming. Being as that Roam's intention is to make the hotel search process less overwhelming, this defeated that purpose. A new structure needed to be created that was cleaner and more structured. The new filter structure had a collapsed section format, wherein each category has a button and those amenities open, which can be repeated for all categories. This allows for all the amenities to be easily viewed based on categories and users' never have to view categories that do not pertain to them, such as "Family."

Roam's initial filter structure
Initial Roam Filter Structure
Roam's final filter structure including the collapsable categories
Final Roam Filter Structure with Collapsable Categories

Search Validation

While conducting user testing, it was clear that form validation was needed as users wondered what fields were required. The first version had an asterisk next to required fields but this wasn't enough for users to know they were required and led to confusion when the form didn't submit. Including the red and green validation in the second version, this helped clarify this issue. Form validation was also included in the user account creation process.

Roam's initial search interface
Initial Roam Search Interface
Roam's final search interface with search validation
Final Roam Search Interface with Validation

View Roam

These are the primary interfaces for Roam, the homepage, search results, and account creation from the final version of Roam.

Home page for Roam
Home Page for Roam

Landing page for Roam search
Search Results - Landing with summary of search

Roam search result with summary of a hotel
Search Results - Intial Result Summary

Roam search result with additional informmation form hotel
Search Results - Additional Result information

Roam account creation
Roam Account Creation - with Validation

Visit Roam

Roam can be viewed in full here.


Roam was built with Bootstrap to be mobile friendly. The data set used to create the prototype was created with a data set of Hawaiian resorts. These were put in a MySQL database, and the search parameters that are included on the search result page are what were used to pull the results that are shown.