Case Study

Clear View Escapes
Travel Website

Redesigned Travel website homepage on iMac mockup.

Redesigned Travel Website home screen prototype.

End 05/19
05/22
Role

Research

Design

Development

Technology

Figma

HTML/CSS/JS

jQuery

What is Clear View Escapes?

Clear View Escapes is a fictional company that was created as part of a web development course. As a travel agency, they partner with travel companies to provide vacation packages, flights, cruises, hotels, and activities directly to consumers.

Travel agencies make money by charging commission fees from service providers like hotels, airlines, cruise ships, and tour guides whenever a customer books an item from their company. Depending on the agency or the type of service provided, they can charge the customer a service fee, either in the package price or in a separate charge. The website primarily sells vacation packages and allows customers to search and book hotels, flights, cruises, and activities.

The Problem

Traveling should be a fun and rewarding experience but can often get overshadowed by the stress of planning a vacation. Travel agencies can make it easier by helping users find and plan their vacation by guiding them through the process or by conveniently bundling flights, hotels, and activities into a vacation package.

The current website design suggests it’s a traditional travel agency where users must work directly with a travel agent to plan their vacation together. Instead, Clear View Escapes should allow customers to book their vacation online without a travel agent, saving the company both time and money.

Objective

Clear View Escapes is transitioning from a traditional travel agency to an online travel agency. Redesign the homepage to help users find and book vacation packages.

Full screenshot of original travel website design.
Original travel website homepage design before the redesign.

User Research

User research is based on real data from Expedia Group Media Solutions.

Who are our users?

As a fictional company, Clear View Escapes doesn’t have any users. Instead, we’ll be looking at the US travel market demographics. Gen Z & Millennials are the fastest growing travel demographic, with Millennials on average spending 35 days traveling, followed by Gen Z with 29 days, boomers 27 days, and Gen X with 26 days.

Of people who traveled in 2016, 24% were solo travelers, 47% were adults, and 29% were adults with children. Research also found that solo, group, and multigenerational travel is increasing while family leisure travel with children is decreasing.

Why are they traveling?

There are three categories of travel, business, leisure, and bleisure (extending business trips for leisure). Leisure trips vary by generation, with Millennials taking the most leisure trips (42%), followed by Gen Z (38%) and Gen X (30%).

Of these leisure trips, 77% of the US market travel for rejuvenative purposes — change of scenery, weather, to visit friends and family, experience events, go sightseeing, or generally focus on health & relaxation. Younger generations are more likely to take a trip for health & wellness and personal fulfillment, while older generations mostly visit family and friends.

Where are they going?

Most US travel is domestic, with 18% having traveled internationally. Florida, the Virgin Islands, and Hawaii are the most popular domestic destinations. Riviera Maya, Rome, Bali, London, and Paris are the most popular international destinations.

For cruises, the top cruises are Caribbean Cruise (34.7%), Cancun (28.3%), Cruise – Europe (River) (23.1%), Cruise – Europe (Mediterranean) (17.4%), Punta Cana, Dominican Republic (17.2%), Rome (16%), London (15.5%), Amsterdam and Montego Bay, Jamaica (12.6%), Playa del Carmen/Riviera Maya, Mexico (11.4%), and Paris (11.1%). 21% of families have taken their children to an all-inclusive resort for vacation, 68% on a family road trip, and 68% on a beach vacation.

21% of families have taken their children to an all-inclusive resort for vacation, 68% on a family road trip, and 68% on a beach vacation.

How do they decide?

Before booking a vacation, users are already extensively researching and consuming travel-related content weeks ahead, with online travel agencies (OTA) being the most engaging content. 65% have only 1 destination in mind, while 35% have more than 1 in mind.

All generations are increasingly turning to travel sources for trip planning and recommendations, preferring sources with professional and informative tones.

Gen Alpha, which refers to those born after 2010, is showing more signs of influencing family travel decisions and planning.

According to users, the top influences in determining where to travel are value, deals, social media, imagery, blogs & articles, activities, experiences, family, culture, and the sense of adventure & discovery “off the beaten path”, in that order.

What’s important?

For family travelers, 95% said their priority was keeping their families entertained and happy, deals and value (89%), outdoor activities (85%), and planning travel around school holidays (85%) or near major attractions or theme parts (85%).

Travel confidence influences the likelihood of traveling. Research shows that travel confidence is negatively correlated with age. That is, younger generations feel more confident traveling while older generations are less sure. Other factors influencing confidence are travel flexibility, which can be increased by allowing users to cancel or make changes to their plans, and health and safety regulations.

Research shows that many people (52%) want to see a range of prices and options for a specific type of experience and the ability to book accommodations and transportation all in one transaction (38%).

For online bookings, users value a site that provides the right price for the type of travel experience they want (57%). Other important considerations include a site that is easy to navigate (49%), a quick booking process (45%), customer support (38%), a high number of listings (32%), and a variety of travel methods (27%).

User Persona

User Persona for Kate
User Persona for Kevin
User Persona for Karen
User Persona for Ken

User Journey

User Journey

Additional Actionable Insights

Avoid overwhelming the user with choices. Reduce density by deferring details to other web pages, present the user with broad categories, and use whitespace to create space in high-density areas.

Avoid using too many high-saturation images with lots of details. Using images with high saturation can be visually overstimulating, especially in image-dense content areas. Use HD images if displayed large and one at a time with whitespace for room to breathe. Desaturate images if necessary to direct the attention to appropriate areas. Images should have a clear focal point.

Make searching fast by reducing the required fields and setting default values for some input fields. Most users already have a location in mind to research. Let users add specifics afterward⁠—sometimes, they are looking to explore their options and are not necessarily booking their package.

Target users through inspirational messaging such as personal fulfillment, development, and enrichment to motivate users to travel.

Make space for featured content to inspire users and encourage them to explore. Invite them to learn by routing users to the travel blog, resort information, or vacation package. Featured content should dynamically populate with travel trends.

UX Design

User Flow

I begin with user flow to determine the users’ steps to move towards their goal. These steps inform the information architecture by establishing relationships between web pages and help determine what content needs to be displayed for each web page.

In this case, there are two main user flows that diverge from the homepage: those who use the search module and those who don’t. For those who use the search, I route them directly to the results page.

For those who don’t, the path is a little more complex. For example, users might choose a category, in this case, a continent such as Europe, then select a country, a region, and finally, a vacation package. Each of these steps might be a web page, which we could potentially route from the homepage or via navigation.

Example flow
Website flow might look something like this.

Information Architecture

Categorizing Packages

There are two main ways to categorize packages: by environment and by continent.

Grouping packages by the environment can be advantageous in helping users to explore multiple regions that fit the same climate, setting, and general experience that they might be looking for. However, this can be more difficult to group and has a higher category number which can clutter navigation.

Example flow

Grouping by continents is more straightforward but also introduces another step because we need to group further into countries and possibly sub-regions. It also makes providing additional content specific to that continent, country, or region easier.

Example flow

Ideally, the best way to group them should be according to the users’ mental model, which could be a combination of the two. Without the research supporting one way or another, I decided to keep it simple and categorize packages by continents. In the future, we can create additional web pages that explore vacation packages by environments such as beaches, safari, and tropical.

Example flow

Homepage

For the homepage, the primary goal is to help users find and plan their vacation by redirecting the user to the appropriate destination web page. The general pattern as the user scrolls down the homepage is to present them with sections that help the user specify what they’re looking for. Any input from the user helps narrow the selection to determine their desired destination.

Since most users already have a destination in mind, I expect most to use search to go directly to the product page, which in that case, we have achieved the goal of redirecting the user, so we are done. This is the most common use case, so the search module should be among the first to appear.

If the user has more than one destination in mind, doesn’t have a destination yet, needs inspiration, or is indecisive⁠, they can scroll below where they will be presented with options to help specify what they’re looking for. To determine what content to populate below, I reference the research to see what the users value.

As the user moves further away from the homepage to other web pages, the results and contents should become less general and more specific, following the design pattern of deferring details and specifics to deeper web pages.

Navigation

The top-level navigation should include our main products: cruises, packages, hotels, & activities. It should also have an about us section to provide information about the company, a support page, and an option to sign in to your account where the booking deals, order history, itinerary, and other personalized information will be accessible.

A utility bar can also be considered to provide quick and easy access to critical functions such as support, language options, account access, or contact information such as a phone number.

Wireframe

Original Website Design
Redesigned Travel Website

You can view the interactive prototype on Figma here and the original demo website here.

Takeaways

While a little outdated, this course introduced me to important web development fundamentals such as semantic HTML, the CSS Box model, BEM, various CSS tricks, and Javascript. I also learned about mobile-first development, responsive design, CSS flexbox and grid, and methods to optimize website performance.

From the redesign, I learned that while the overall design process remains the same, some methods can be more important in different projects and use cases. For this project, the most involved process was creating user flows because there was a clear goal and action to funnel users towards, whereas in corporate websites, the user goal and actions may be a little more ambiguous.

Additionally, with existing designs, it’s important to be aware of any implications, effects, and interactions changes might have on the system. While redesigning the homepage may seem straightforward, it can be non-trivial, especially if introducing new features or changing the information architecture.

In real projects, suggesting what seems like a simple change and then realizing its complexity can be a real problem and can quickly lose your credibility within your team. So, as obvious as it sounds, be aware of the implications of any redesigns, changes, or new features, and remember to make slow, thoughtful changes until you’re familiar with the product.

Next - About MeGo to About Me