Michael Hanna
UX Designer and Researcher

Design Phase:
Upscape Hotels

How will our users flow through and interact with our site?

Phase 3: Design

This page covers the Design Phase of the Upscape Hotels case study. Use the numbered navigation below to skip to the methodologies I used, or scroll down to first read about the full project and the challenge presented.

Project Overview

Project Summary

Upscape Hotels, my (fictional) client, is an international hotel chain based in the U.S., newly formed through the acquisition of existing brands and independent hotels—each with its own website. They wanted to unify the chain identity and create a consistent user experience across all their properties by building a comprehensive website from scratch. They sought "to create an online booking experience that is simple, accessible, and based on a deep understanding of [their] target users."

Our (fictional) firm created two project teams, one for mobile and one for desktop. I researched and designed the booking pathway for the desktop team. My end products were a clickable medium-fi prototype and a set of annotated wireframes, ready for a developer and a UI/visual designer to bring to life.

Context and timeframe

UX Design Institute (Professional Diploma in UX Design)
July 2021 - February 2022

What did I do?

The full UX process:

  • Research - competitive benchmarking, online survey, in-depth interview, usability testing

  • Analysis - affinity diagramming, customer journey map

  • Design - user flow, interaction design hand sketches

  • Build - clickable mid-fi prototype, annotated wireframes

My role was limited to the desktop version of the site and focused specifically on the hotel booking process: how users search for and book hotel rooms online.

The Challenge

To create an online desktop booking experience that is simple, accessible, and based on a deep understanding of our target users (leisure travelers).

Design Phase: Upscape Hotels

To maximize revenue through Direct bookings, a hotel chain must have its own booking website

Hotels receive 15-30% more revenue from direct bookings (e.g. bookings made through the hotel's own website) compared to bookings made through OTAs (Online Travel Agencies like Booking.com).

Direct bookings gained market share over OTAs even as the COVID-19 pandemic decimated the travel industry.

Bernstein Research predicts continued "market share shifts to direct bookings" in its new report, Online Travel Agencies: "A Rough Guide to Online Travel."

"...direct booking is a key piece to the revenue puzzle." Hotel Tech Report January 2022.

Design Phase: Upscape Hotels

The target user is the Leisure Traveler

Online hotel bookings are almost exclusively leisure or "bleisure" (combining business trips with additional days for leisure). Commercial travel arrangements are made through different channels.

Leisure travel now makes up the majority of room revenue (pre-pandemic, business travel generated more revenue). American Hotel & Lodging Association (AHLA) & Accenture State of the Hotel Industry Report 2022.

Design Phase: Upscape Hotels

An excellent (desktop) user experience is crucial

Hotels have an online cart abandonment rate of almost 83%. Statista, March 2021.

More than half of Millennials say they wouldn’t book a property if its website was difficult to use (Viga survey of 1,000 young adults aged 18-34 who had booked hotels in the past 2 years).

"Compared to business travelers, leisure travelers want more guidance for the booking process and more information about the destination." American Hotel & Lodging Association (AHLA) & Accenture State of the Hotel Industry Report 2022.

Although more users now research hotels on mobile, the vast majority (over 70% of U.S. users) still use a computer to do the actual booking. EyeforTravel, SaleCycle.

Design Phase

User Flow Diagram [Adobe XD]

I diagrammed the user's journey through the booking pathway to ensure that my design included all the screens a user might encounter on the way. As part of the process, I had to give careful consideration to navigation (how a user can arrive at and where they can go from any given screen) and interaction (how interacting with controls and elements can change the appearance and behavior of a screen).

Working (draft) sketches

Working (draft) sketches

Interaction Design Lo-Fi Wireframes Sketches

I created low-fidelity wireframe sketches for each of the screens in my user flow diagram. I already knew which interactive elements I wanted on each screen, but now I had to lay out the elements in a design sketch. I also had to design any changes in appearance or behavior based on user interaction with the elements.

As I am naturally inclined towards using the computer for most tasks, sketching lo-fi wireframes by hand was a new and somewhat challenging experience for me. I appreciate the importance of the skill, however. Even with the ubiquity of computers and smartphones, there will be times when more primitive technology (legal pads and whiteboards) presents the best and/or only way to rapidly iterate ideas or share your thinking with someone else.

My hand-drawn wireframes are not especially pretty—but they are effective. They translated well into the medium-fidelity prototype I would create next.


(Reflecting on the entire case study, not just this phase.)

I conducted this case study as part of my Professional Diploma in UX Design from the UX Design Institute. Along the way, I gained firsthand experience with the full UX process. I increased my proficiency with several tools, including Sketch, Adobe XD, and Miro. And I saw how my perceptions, personality, and creativity make me a great fit for the field of UX.

This project underscored a few key principles for me:

  • UX is fundamentally a research discipline

  • Qualitative and observational data are the most insightful

  • Collaborative, multisensory analysis activities can help you absorb and internalize data

  • Being able to sketch lo-fi wireframes by hand is a useful skill

  • Take notes on the things you want to do better in the next project. Not everything will translate from one project to the next, but each is an opportunity to hone your craft.

    Never stop learning, never stop getting better at what you do.

Different Apps
UX Diploma
Want to see more from this project?
Drop me a line and I can share anything not linked above.