RoseWater Hotel

OVERVIEW

My process started off with research to understand user mental models and detect usability issues within current hotel booking processes. Qualitative and some quantitative data was gathered through competitive analysis and a usuability study consisting of two participants. The data was analyzed through a card sorting and usability issues were identified. This data was then implemented into a user flow to visualize the areas of the process that had the most usability issues. A solution was then developed through analysis of this data, and a prototype was created and tested with another usability study.

‍

COMPETITIVE ANALYSIS

I chose 4 very different hotels to get an understanding of industry trends and recurring themes in the booking process without limiting that experince to price range or status. I analyzed four hotel chains including Doubletree, The Ritz-Carlton, The Great Wolf Lodge, and Kimpton Blythswood Square Hotel.

I recorded these observations using a color key:

• Green  – positive

• Pink  – negative

• Blue  – unclear/neutral

‍

‍

‍

COMPETITIVE ANALYSIS

Through this research, I concluded that the most common best practices were:

• Sticky navigation gives confidence/clarity of task to user

• Calendar should be easy to find and criteria when selecting room type, date, etc. should be clear

• Disclose cancellation policy early in the booking process so users are aware before check out

• Minimal visuals on pages as to not overwhelm users

• Showing users what is included in hotel stay helps them make informed decisions

• Full summary of cost breakdown before checkout gives confidence/clarity to users

• Common CTAs: Book now, Select, or Complete reservation

‍

INTERVIEWS

Next in the process i recruited two users to participate in a competitive analysis user study. For these studies, I had asked participants go through three of these websites and to describe their thoughts and feelings throughout the process. Each study lasted approximately 60 minutes. Afterwards, I added each participant's feedback into sticky notes and sorted them into groups based on common themes.

Some of the findings were:

• Frustration with hidden cancellation policies
  
  • Both participants expressed that they would like to know the cancellation policy before they go through the trouble of booking a room as to not waste time.

• Users were more receptive to add-ons before the check out page
  
  • Both users took more time viewing add-ons when they were placed before the checkout page. When add-ons were placed directly on the checkout page, users seemed to not be as interested/more concerned with the checkout process.

• Users prefer more details at checkout and ability to easily change reservations
  
  • Both participants wanted a clear breakdown of their booking and fees when on the checkout page. One user also expressed frustration when being redirected to another page after trying to delete an add on from the checkout page.

• Users frustrated with wonky calendar UI
  
  • Users want to be able to quickly select or change their dates for their reservations and expressed frustration at an unfamiliar calendar dropdown.

‍

‍

CUSTOMER JOURNEY MAP

After initial research, I created a customer journey map that presented the pain points throughout the hotel booking process. Through visual representation and using my notes from the user studies, I confirmed that much of the frustrations within this flow comes from the check out process.

‍

‍

WIREFRAME SKETCHES

I began the design process with low-fidelity wireframe sketches to accelerate decision-making through visualization. My sketches were based on the initial user interviews and initial findings through competitive analysis, making sure to solve major pain points and make any notes regarding design solutions. I laid out each screen on a figjam board and used these as a guide to create the initial figma prototype.

Some specific ideas I kept in mind throughout this process:

• sticky calendar picker at the top on all pages of the site to help users quickly change booking preferences

• cancellation policy on all room pages

• having a guided add-on page after users have selected their room for minimal distraction and natural flow in thought process of booking

• allowing users to delete or change reservation details during the review page

• separation of information and card information page so users are not overwhelmed with filling out so much information

• adding an overlay when selecting calendar pickers or changing quantities on nav bar to minimize distractions

‍

‍

UI Design

Once the usability issues were resolved, I moved on to design the final screens in Figma. The final design consisted of a high-fidelity prototype with added developer annotations for guidance on transitions and button states. In a separate section, I also created separate screen states with an overlay for when users select the calendar navigation.

The visuals for this project were minimal. I wanted a clean design with a simple booking process that shows elevated design without distractions. I wanted this site to feel luxurious but reachable. Due to time, I only designed screens for web, but I plan to further develop this design to be responsive on mobile and tablet as well.

PROTOTYPE AND NEXT STEPS

After finalzing the design, I created a prototype for testing this new hotel booking checkout flow. Although this project did not go any further, the next steps to continue and finalize this design are to:

• Test the checkout flow with a small sample size of users.
• Compile user study data and make any changes necessary.
• Design the remainder of the site.
  • Homepage, about, deals, account page, FAQ page, etc.
• Repeat user study as website design progresses.
• Repeat refinement of flows once user study data is collected and include development team.
• Hand-off to developers to begin site creation.

‍