Michael Hanna
UX Designer and Researcher

Build Phase:
Upscape Hotels

Creating deliverables for developers and UI designers

Phase 4: Build

This page covers the Build Phase of the Upscape Hotels case study. Use the numbered navigation below to skip to the deliverables I created, 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).

Build 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.

Build 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.

Build 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.

Build Phase

Medium-Fidelity Prototype [Sketch]

UX Deliverable #1

Taking my low-fidelity sketches to the next level, I built a clickable medium-fidelity prototype using the Sketch App. This allowed me to simulate the interactions I had designed in the lo-fi wireframes and flesh out the design in more detail. As a mid-fi prototype, functionality was limited to actions required to navigate the basic pathways outlined in the User Flow Diagram. Field entries (search term, dates of stay, etc.) were predetermined.

Hotel Page from the mid-fi prototype (mouseover to scroll up and down)

Hotel Page from the mid-fi prototype (mouseover to scroll up and down)

In order to display all types of search suggestions (city, airport, and landmark), I decided to populate the destination field with the string "Hollywood Los Angeles Theat": something a user might enter if they couldn't remember the name of the famous Grauman's Chinese Theatre (now called the TCL Chinese Theatre), located on the Hollywood Walk of Fame. The nearest Upscape property is the (fictional) Upscape Hollywood at 6511 Sunset Blvd (no such address exists).

As a mid-fi prototype that I would deliver to a graphic designer, I kept the Visual/UI design simple:

  • Colors - grayscale plus an occasional accent color

  • Font - Helvetica Neue (relatively neutral sans serif)

  • Iconography - mostly Google Material Design

  • Text - example text where needed, placeholder labels or lorem ipsum everywhere else

  • Images - placeholders

  • Maps - simplified Google map screenshots of Hollywood area in Los Angeles (no interactivity)

My lo-fi wireframes translated well to mid-fi, but as I built them I revisited my benchmarking notes to see if there were significant elements I hadn't included in the lo-fi sketches. There were a few, including:

  • language and currency selection

  • breakdown of the average nightly rate

  • taxes and fees

  • cancellation policy details

Somehow these details had slipped into the background during the Analysis or Design Phases. Since they relate to the financial elements of the site, the developer would probably notice their omission. The graphic designer might even ask about them. But as the UX designer, it's my job to incorporate them in a way that creates the best user experience.

Lesson learned: even late in a project, don't disregard your raw data.

Annotations for the Search Results: List View screen

Annotations for the Search Results: List View screen

Annotated Wireframes [Sketch]

UX Deliverable #2

The last deliverable was the most involved: the Annotated Wireframes. Here I had to put on my coding hat (don't worry: it's a white hat) to imagine all the details I would want to have if I were tasked with developing this website. I don't have the skills to develop a site like this, but I know enough about coding to know what kind of information might be necessary. If I were more proficient, I might have a better idea of what details could be left out (i.e., I might have explained more than I needed to). But wherever I thought I might be requesting functionality that would be impossible or impractical to include, I acknowledged that in the annotations and encouraged the developer to contact me so we could figure out another way to include similar functionality. In a real working team environment, I would try to meet with the developer during the Design Phase to avoid wasting time designing features that would have to be scrapped. Even so, communication during the Build Phase would still be important.

I have much more experience and expertise with the visual/UI process, so I had a better sense of what would not need to be explained to a graphic designer in the annotations. Moreover, I was careful with the naming and organization of symbols and styles. I leveraged Sketch's flexibility through overrides, nested symbols, and Smart Layout so that a graphic designer could easily begin transforming the wireframes by modifying symbol sources. As a graphic designer, I would love to receive a file like this one.

Rules for the calendar date picker

Rules for the calendar date picker

Logic

I spent a good deal of time on the logic for the annotations, writing rules for the following:

  • the order of the suggested currencies based on language

  • the date format based on language

  • inline validation

  • each of the three types of search suggestions (cities, airports, and landmarks)

  • the date picker (particularly re: keyboard entry and navigation)

  • guests

  • search execution

  • filters ("price affecting filters" and "below the line" filters)

  • pricepoint display

  • refund terms and conditions (Daylight Saving Time)

  • map display

  • pet option

The developer will probably be able to adapt existing design patterns for some of these, but I detailed their specific behavior in order to provide the best user experience.

Reflections

(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.

210+
Hours
10
Assignments
13
Different Apps
1
UX Diploma
Want to see more from this project?
Drop me a line and I can share anything not linked above.