Since December 2020, Hong Kong has designated certain hotels as quarantine facilities for incoming travellers. The mandatorty quarantine duration varies from 7 days to 21 days, depending on their vaccination status and where they're coming from.
A year before I started this project, I went to Hong Kong for family visit. Flying during the pandemic was stressful. On top of doing a COVID-19 test and double-checking all the documents, I needed to book a quarantine hotel.
I saw this PDF list of quarantine hotels on the government website... which made me more stressed.
Driven by my experience, my initial focus was targeted on searching quarantine hotels. After discussion with my mentor, I decided to expand my focus on improving the overall quarantine hotel experience in Hong Kong. Before diving deep into the research, I made some assumptions:
1. Booking a quarantine hotel is stressful.
2. It is hard to find a quarantine hotel that fits users' criteria.
With my experience of booking a quarantine hotel, I thought I knew about the industry pretty well. But I was proven wrong, things change quickly during the pandemic.
The Hong Kong government now has a page showing the hotel booking status. Trip.com and Agoda, travel agencies, also has filters for quarantine hotels.
.svg){kind=icon}
Hotel spots are very tight. It's hard to find availability, and users need to click date by date to check.
None of them have all important information in one place (availability, delivery policy, child policy, wheelchair accessibility etc)
Hotel reviews mixes pre-covid and quarantine experience
I didn't have the tools above when I travelled last year! So, does that mean the users' problems are solved? Are there more pain points that I didn't know? To get more insights, I conducted interviews with 7 participants recruited from my personal network. Here's the key learnings:
Wants: secure their quarantine hotel spot before buying a flight ticket
.png)
Difficulty: not sure about which hotel has availability; they needed to click on individual website links to check
Due to Covid-19, government policies and flight time change often, and participants need to change or cancel the hotel booking. Most of them needed to call to make these changes.
Common decision criteria:
• price
• location
• room feature (size & view)
• food delivery availability
• drop off availability
To get more quantitative data, I sent out a survey in a Facebook group (Hong Kong Quarantine Support Group). This method also allowed me to get feedback from a more diverse background (other than my personal connection). I received 26 responses and learned the following:
of respondents were not sure about the starting and ending date of quarantine duration
of respondents changed the dates or details of their hotel bookings
of respondents clicked on different hotel websites to check their availability
83% of respondents waited check-in for less than 10 minutes. But in an optional comment section, 4 out of 14 comments talked about their frustrations over the long check-in waiting time. (Ideally, this pain point can be further validated with a bigger sample size).
Based on my research, I created a persona, Emily, who is flexible with dates and needs to book a quarantine hotel asap.
How might we streamline the quarantine hotel booking system for travellers to Hong Kong so that they can research, manage, and check-in check-out easier?
I did how-might-we and crazy 8 exercise to brainstorm different solutions. I then created a priority matrix to guide me decide what the product would include. The top features decided are:
- a centralized platform to search and book quarantine hotels
- QR code for a faster and contactless check-in check-out
how might we & crazy 8 exercise
.png)
priority matrix
When building this IA, my challenge was to balance what fits best in a category and its usage priority. As QR code is a primary action for a fast check-in check-out, I iterated it to be more upfront.
I defined the task of booking a quarantine hotel as I learned that this task is the most frustrating and time consuming. I want to make sure the flow is simple.
.png)
.png)
Since I'm designing an Android mobile app, I made sure that I followed the guidelines in Google's Material Design and utilized their UI kit.
I also pushed myself to flesh out detailed annotations in the stage of lo-fi wireframes so that I can uncover problems or unclear elements in my design. It also made communication easier when getting feedback from my mentor and group crits.
I selected light turquoise to keep the ocean vibe, and a dark aqua that fulfills the WCAG accessibility for primary buttons
.png)
moodboard
UI Kit
Some travellers are looking for an exact date for quarantine, and some are more flexible. To fulfill the needs of these 2 groups, I designed a specific/ flexible date toggle.
When I worked on the booking checkout screen, I was rethinking about the need of an account password. I've come up with 3 options:
Choice: option 3
(1) this pattern is common among big flight & hotel companies
(2) this is a COVID-19 special app, and it's not expected to be used for a long time. Minimize their burden to memorize another password.
It’s time to validate my solution. I recruited 5 participants for usability testing in person with a mobile prototype. They were asked to complete 4 tasks:
1. Search with specific dates
2. Search with flexible dates
3. Booking checkout
4. Check-in at hotel
What participants liked:
1. My QR code
As mentioned in the sitemap section, the QR code Floating Action Button (FAB) was designed to give the easiest and fastest access. However, participants found it redundant to have both QR code FAB and check-in button and it confused them.
2. Search flow
After selecting the dates to search and clicking the 'continue' button, participants were surprised that they were brought back to the search screen. They expected to see search result.
3. Quarantine duration
Participants didn't see 'select your quarantine duration' section at first. Their eyes were drawn to the calendar and then the 'continue' button.
Find & book a quarantine hotel easily
A centralized quarantine hotel booking system. No more jumping from websites to websites!
choice pills that calculates the correct quarantine duration
filters dedicated for quarantine
availability calendar of quarantine hotels
Find quarantine hotels with different tools
No more worries on booking for the wrong quarantine duration.
Use filters that find a hotel that fits your quarantine needs.
Want a specific hotel? check its availability easily.
Search with flexible dates
Not having set dates? Tired of running searches again and again? Try flexible date search to find one that fits with your schedule.
Hotel policies
About quarantine
No more unknowns about the quarantine experience
Everything you need to know about your stay in quarantine hotels. Give yourself a peace of mind.
Manage your booking easily
Whether it's testing positive or changes in travel restrictions, there're lots of unknowns in the pandemic. Edit or cancel your booking at any time. No more waiting for calls or email replies.
Fast contactless check-in
Expedite the check-in process with your QR code. Minimize contact and pull up information in seconds.
.png)
bottom navigation
search flow
booking checkout flow
check-in flow
• average session length
• the rate of successful bookings
• the rate of flexible search
• how many times a QR code is scanned
The pandemic has dramatically changed our lives and also accelerated technology and digital transformation. This case study shows opportunities for travel agencies to leverage technology for an easier hotel booking system and faster check-in check-out, to improve resilience and competitiveness, and to strengthen future preparedness for COVID-19 and other infectious diseases.
• Things change quickly during the COVID-19 pandemic. Users want flexibility in a highly changing environment. Utilize technology like QR code.
• It's my first time using Figma's auto layouts. It saved me time moving things around and checking on the pixels.
• I didn't know that there's colour difference between the Figma desktop app and website version. I found that out as I was working on this case study (the image colour looked more dull and desaturated). I learned to pay attention to screen and software colour accuracy (before putting hours on a product).
courtneyywong@gmail.com
2022 © Courtney Wong
