“41% of people surveyed indicated that their choice of hotel would likely be affected if the convenience of an advanced check-in system was offered.”
-“How Check-in Wait Times Impact Hotel Guest Satisfaction,” stayntouch
Introduction:
Overview:
TravelView is a conceptual hotel app that provides the user with the convenience of a mobile check-in feature, allowing them to check in up to two days early, solving the problem of having to wait in long lines after a long day of travel. The biggest design challenge was to do this by providing a balance of features that work prior to your arrival at the hotel and during your stay at the hotel.
To accomplish this goal, the full design process was adapted. This would allow for an approach that involved users of the intended audience to provide insight and feedback throughout the entire process, effectively reducing the chance of any risks and uncertainties.
“Frustration would probably be about why it has not been designed… considered ways to make it shorter”
Roles
I took the responsibility of designing with design constraints and the responsibility of researching current industry standards
UX Designer
UI Designer
UX Reseracher
Tools
Figma
Miro
POP by Marvel
Project Duration
90 Days
Scope and Restraints:
This solution was created solely as a concept, thus it served as a medium for learning and exploring the design process. To further understand what designers and their teams go through during the design process, both UI and UX design elements were used. This allowed for the product design process to be used in a smaller more personal scale, in which the designer was given the opportunity to ideate on a $0 budget.
Process:
Design Process:
The Process: Discovery Phase
Research:
To gain further insight into the proposed problem space, research of the hospitality industry was required. This would allow me to further understand the latest check-in process and mobile app developments of the leading hospitality brands across the United States. To gain a better understanding, I sought to answer the following questions through research:
Who is specifically experiencing the negative and frustrating emotions? Is it the consumer or the seller?
What factors cause the creation of these long check-in lines?
The influx in customers due to the holiday season?
The process itself is slow and tedious
Prior information on what is required to check in is missing
What check-in features are universal amongst the biggest hotel brands in the world?
What current solutions are available to alleviate these emotions?
Some important findings include the following:
According to Cornell’s Center for Hospitality1, there is a limit to the customer's tolerance of waiting in line
Where guests in the US have a breaking point tolerance of 5 minutes
According to Opinion Research Corporation2, 76% of people surveyed expressed that shorter check-in times would minimize potential frustrations
Universal Check-in Features:
name (F, L), arrival and departure, number of residents, # of rooms, room type, rate, address, phone #, credit card info, vehicle info (where applicable), company, and email.
Many hotels still used outdated software.
With this information in mind, it was important to analyze the current solutions to the problem I was looking to tackle
With the information gathered through secondary research and heuristic analysis, it was now time to gather information through primary research. The goal was to see how people felt about waiting in long lines and the usage of their smartphones. Along with that, I sought to understand how they felt about their overall customer satisfaction after waiting in long lines. In order to do so it was important to answer the following questions:
What are the main factors that lead to customer dissatisfaction?
Do long lines affect the overall stay at the hotel or just the initial moment?
Does a mobile app sound appealing to the customer?
To answer these questions, I conducted both a survey and user interviews. The intention of the survey was to be a screener, in which based on the answers received, the participant may be asked to be interviewed.
Screener Survey:
The survey results trended in a direction that was in line with the secondary research. From the survey of 22 people, it was seen that 90.8% of the participants felt that waiting in long lines was a negative experience.
(1 being negative, 5 being neutral, and 10 being positive)
77.3% of participants said that their customer service was also negatively affected by having to wait in long lines. This aligns well with the research done by Cornell’s Center for Hospitality4, which suggests that after a 5-minute waiting time customer satisfaction is decreased.
Based on these two results, it was then questioned whether or not participants would revisit that location. 27.2% of the participants stated they would likely not revisit, 45.5% remained indifferent, and final 27.2% saying they likely would. This was quite interesting to see as overall data suggests their satisfaction had gone down. It is also interesting to note that this resembles a standard bell curve.
(1 being likely, 5 being maybe, and 10 being likely)
It is also important to note 50% of the participants stated that they use their smartphones up to 6 hours a day, with the rest using their phones up to 10 hours a day.
User Interviews:
Based on the screener survey, 5 participants were asked to participate in an interview to provide further insight into this topic.
The overall insight received from the interviews was as follows:
Most interviewees viewed traveling as a way to disconnect from the world, learn about new cultures, and see new perspectives.
The most important aspects of customer service to the participants were communication and transparency.
Felt that long lines can be intrusive to limited vacation time
Depending on the rest of the customer services received, they were less likely to return
Emotions felt were: Anger, frustration, confusion, anxiety, and annoyance
Phones are an essential and positive supplement to daily life
Used for personal and professional life
Data Synthesis:
To better organize the insights and observations received from the user interviews an empathy map was created. The empathy map serves as a good base in understanding what the intended user(s) may feel in the scenario of having to wait in a long line. This allowed me to feel connected with the possible users, as I myself have also shared the frustrations of having to wait in long lines.
From the empathy map, I created a persona, allowing me to personify the insights and observations from my user interviews into a singular identity.
The persona allowed me to add goals, motivations, and even personality types to the empathy map. The persona then served as a reference throughout the rest of the design process, allowing me to quickly see if my thought process was in-line with the persona.
With all this data collected it was important to articulate what the problem was when attempting to solve it, thus by culminating all the data and supplemental material I came up with 5 “How Might We…” questions. The questions are as follow:
How might we reduce the check-in time at a hotel?
How might we improve the customer-client relationship at a hotel?
How might we help extinguish negative emotions for the user?
How might we improve communication between the customer and staff?
How might we use smartphones to streamline the check-in process?
“It affected it greatly because I don’t think I am going back… It was really bad, and unless there is no other cheap option I don’t think I’d go back to that.”
“Frustration would probably be about why it has not been designed… considered ways to make it shorter”
With data from both primary and secondary research, it was now time to step into the shoes of the intended user.
However, simply using a persona was not enough. Using the Jobs-to-be-Done Framework, I was able to create a framework focusing on what the intended user wanted to accomplish. This would allow combining the persona and JtBD to view the problem space and see what the goal(s) of the user(s) may be.
Design Phase:
Overview:
With the idea of creating a solution that provides convenience, a mobile app was the natural solution. The flexibility and mobility of a mobile app would provide easy access to the solution idea I proposed:
A. Create an app that allows for online check-in and key card access
24 customer service chat. Bot helpline → Live helpline
Provide recommendations to local accommodations and hotel amenities
Keycard access through credit card encryption protection (optional for user)
All it to be brandable
Not all companies have a mobile app, allow them to use this product as a base
Show potential timeline of room preparation OR show if room is ready
Allows for less frustration
B. Streamline the check-in process
name (F, L), arrival and departure, number of residents, # of rooms, room type, rate, address, phone #, credit card info, vehicle info (where applicable), company, and email.
Potentially condense and take some requirements out
Both reservation and walk-in check-in process
User Stories, Sitemap, and User Flows:
However, it was important to realize that in order to have a successful launch, implementing all the features was not viable. Thus, through the use of creating user stories, an MVP or minimum viable product was conceptualized. With this process, it is important to prioritize the features that would build a base product from which you can build. For this product, the ability to find hotels, reserve rooms online, and check in early (with access to a mobile keycard) was deemed as the minimal viable product as it allows for 3 of the most important features of a hotel app.
With a sitemap and user flows in mind, it was time to put the writing into sketches. Sketching serves as a medium to bring life to the solution ideas and information architecture created, allowing for an initial design concept to come to life.
With a MVP and solution in mind it was now time to create a visual representation of the screens within the app and how they all connect to each other. The sitemap would allow for easy tracking, allowing me to see exactly how many screens were required for the MVP.
Sketching and Guerilla Testing:
A sitemap alone is not enough information to see how the app itself would flow. However, using the proposed screens from the sitemap, I once again stepped into the shoes of the user and created a user flow diagram. It is an important visualization that gives the designer insight of specific routes the potential user may take to achieve their goals. In this case, three red routes were specified based on the user stories and MVP.
As the creator of the initial design, I acknowledged the presence of bias, believing the design to be smart and user-friendly. To overcome this bias, I conducted a guerilla usability test with 5 random individuals using a paper prototype. Although these individuals might not perfectly match the persona description, their feedback on the design and flow proved valuable.
The following is the findings and insights received from the guerilla usability tests:
Clarity was needed in the navigation components.
There was no clear indication of how to move forward to the next screen.
Some screens felt redundant and repeated without reason
From a designer aspect, this was not the case. In reality, this revealed to me that there was an issue in the typography and phrasing.
These findings were consistent amongst all 5 tests, revealing that there was a flaw in the quality of life aspect and UX aspect of the overall design.
Overall, running a guerilla usability test was very helpful as it enabled me to receive live feedback through verbal narration. By allowing the participant to use the app freely, problems in the user experience were uncovered.
Wireframing and Wireflows:
With the feedback received, it was time to create a digital low fidelity version of my sketches. This would allow me to create a digital UI design in which I am able to constantly iterate on throughout the creation process. It was important to remember that this was not the step to focus on perfection, but rather focus on how and where I wanted to place certain elements on the screens. For example, this was the best time for me to play with the hierarchy of certain elements in the design. Elements such as search bars, text fields, and even imagery. The results of that process was the following:
With any good product design, it is important to design around edge cases or interactions that can break and disrupt the user experience. For example, when creating an account, if there are no specifications provided there is a chance that a user makes their password very short or even very long. This can create cases where there are weak security requirements. Thus, it is important to consider such scenarios, allowing for user experience-breaking situations to be redesigned. In the case of this product, it was important to consider account information specification, credit card entry text style, and even dropdown menus.
With the edge cases defined, the final step in the low-fidelity phase was to combine both the wireframes and user flows. The reason for this is to represent the routes that the user may take through the use of the screens and the elements on the screens rather than just simple boxes and arrows. It allows for multiple routes outside of the red routes to be viewed as well, such as returning to the home screen or going back to a screen.
Branding :
With the wireframes in place, creating a vibrant design became challenging due to the absence of a brand platform and style guide. The success of any product heavily relies on the image and message of the company behind it. Keeping this in mind, my focus shifted towards developing a brand platform that would align with the product's objectives.
The product name "TravelView" was chosen as it conveys the app's purpose of promoting fast and efficient travel, offering convenient check-ins and nearby entertainment options. The combination of "Travel" and "View" reflects its core functionalities.
The Mission Statement:
“Travel with no worries and plan your trip according to your time. We provide a platform that allows for easy travel to make the most of your limited time.”
The Brand also needed both a personality that would define the associated product and attributes that would describe the feel and style of the product. Both the personality and the attributes associated with the brand would help inspire the foundation of the future UI through the use of imagery in which the personality and attributes are felt:
Style Guide:
With inspiration from the brand platform and mood board, I created a style guide that would translate well based on the elements within the wireframes. By creating a style guide, the creation of multiple screens becomes more efficient. The style guide includes basic UI elements, the color palette, the typography, the icons, and even imagery.
High-fidelity Mock-ups:
Using the brand platform and style guide it was finally possible to create a high-fidelity mock-up, a finalized version of my design. The first iteration of my high-fidelity mock-up can be considered as version 0.3, where no thought was put into the accessibility aspect.
Version 0.3
From there, version 0.6 was designed. This redesign was done through the feedback of my mentor and peers. I also conducted a self-audit on the accessibility of the initial high-fidelity mockup.
Version 0.6
Although the style guide intended for the use of a primary and secondary color, it was ultimately decided that having one color would be the best. It brought a more modern and less distracting feel. In certain pages, we say that the image is reduced to the upper third or in this case in line with the golden ratio. This was done deliberately as the main attractions of those screens were meant to be something, such as the search card. This would serve as a nice balance in the hierarchy of the page. It should be noted that despite only using one color, grays, and highlight colors were still used.
With this version being set in terms of its overall design, it was now time to create a functioning prototype that could be used to test the overall flow of the high fidelity design.
Validate:
Prototyping:
Prototypes are crucial in the design process. Like paper testing, we want to evaluate the user experience of our "final" design. This is the time to assess individual screen functions and how they connect to form the overall product. Using Figma, I created a prototype with smart animations, making certain aspects feel alive as in a fully functioning application.
With the fully functioning prototype ready, it was time for the usability test. Similar to the guerilla usability test, we selected 5 participants. However, this time, we conducted the tests both in person and virtually. Instead of using random individuals, we recruited participants who fit the app's user audience.
Reiterate:
This is one example of a change made in the design. There was confusion about the number “321” across all 5 of the usability tests. Most participants thought that the number was their confirmation code when in reality it was the room number. To make the UI easier to follow, in the redesign, a virtual key button was added instead of just showing a keycard image.
VS.
Figma
To ensure the usability test was properly moderated, a script was created. This would ensure that each of the 5 tests was done in a similar fashion. It is important to have the 5 tests be the same, as it allows for similar usability issues to be found, giving me a better idea of what the main concerns were.
To guide the participants, a set of 3 tasks were created within a scenario that would fit the app's purpose. The participants were asked to play the role of a solo traveler looking to plan a trip in their near future. The tasks assigned to them were:
Looking to plan a solo trip you decide to use the new app TravelView. Looking to keep all your travels organized and secured you decide to create an account on the app.
Looking to the future you decide you want to book your solo trip on March 1st, 2023. Specifically to Puerto Vallarta Mexico.
It is now 2 days prior to your reservation date, gain access to your reservation page
These 3 tasks were designed to allow the use and viewing of all the screens created for the MVP. Through the testing, it was very apparent the usability issues found were common amongst all 5 of the users. This told me that certain issues should be considered critical usability issues, that could deter the product from successfully working as intended. After sorting the usability issues, they were then ranked as the following:
VS.
Another noticeable change made was the tab bar, which condescended into 4 icons only with labels.
With these design changes made, the final prototype was made. This would bring the design to version 0.9, in which it was ready for the final usability test.
A second round of usability tests were conducted with a set of 5 new participants. This was done to ensure there would be no biases when viewing the new design. The script and tasks remained the same to ensure any issue uncovered from the previous tests were answered in this iteration. The results were surprisingly great, with only two critiques being common amongst the testers. These issues were to do more with the UI rather than the user experience this time around, with the issues being on the font sizing and outdated feel of certain screens.
Another change was the search page, where the whole search UX flow was changed. Rather than have a search bar that leads into a map directly, a list view that was interchangeable with the map was created.
Conclusion:
With the final usability test done, it was time to reflect on the entire design process, and ask myself, did I achieve the goals I was hoping to achieve and to reflect on the lessons I learned.
Overall, I would like to say that the goals I had set for myself and for the product were achieved. I was aiming to design a product that helps streamline the check-in process to the point where no lines have to be waited in. This was done by narrowing my solution idea and creating an MVP that I was satisfied with. Based on the critiques and feedback from my mentor and even the test participants, the general consensus was that the product worked for the problem space it was trying to fix.
One of the main lessons I learned throughout this whole process was to take my time. In order to gain effective and meaningful feedback, it is important to present a mock-up or prototype that is detailed and made with care. If I had rushed through the whole process the amount of feedback and usability issues would have been very diluted and all over the place. I also learned it is important to be a strong communicator, and for me, this was stepping outside my comfort zone. However, I noticed the benefits greatly when I ran my guerilla usability tests.
When looking to the future of this product, I would definitely refine the font and redesign the pages the users felt were outdated. Making interactions is a part of the ongoing process in product design, so I do plan to fine-tune the rest of the design as well.