Travel Stories
Integrating traveler video content into a new social experience within Expedia's mobile booking flows.
CASE STUDY
Overview
Expedia would like to explore new ways to reach younger travelers. The Social Commerce for Travel team was established to explore the best way to do this, and has decided to explore options of either integrating an EG booking flow into an existing social media service via collaborative experience, or create its own social media experience in house on the Expedia mobile app. I am brought on early in the process as the team’s sole designer, along with two PMs and an engineer.
MY ROLE
Product Designer II
User research
UX mapping & flows
Information architecture
Interaction design
Component design
Prototyping
TEAM
Social Commerce
for Travel
PM: Jess Primavera
PM: Anuroop
Engineer: Alberto Garabatos
TOOLKIT
Figma, Figjam, Miro, JIRA, Confluence
TIMELINE
8 weeks
Problem Statement
Post-COVID, there is a growing appetite for travel and travel-related content among younger users who may have missed out on class trips, spring break, family vacations, etc. over the last two years. Our competitors are currently doing a better job at capitalizing on this demand and holding the attention of Gen Z users. EG brand's US visitors have a much lower percentage share of Gen Z travelers compared to AirBnB, Booking.com, and Google.
Goals
To remedy this, the Social Commerce team wants to explore adding social video content to the Expedia mobile app, highlighting younger travelers, destinations, and adventures. Expedia will partner with leading travel influencers to recommend custom travel packages and exclusive promotions in their content, which should link directly to corresponding booking pages.
Target Audience
What the data shows is that Gen Z is using competitors like Airbnb and Google to book their travel at a much higher rate than EG brands. This demographic responds to “vibes,” but also to interactions and engaging content.
% Gen Z travelers who visited brand vs. % All travelers who visited brand
Expedia
-10.33%
-2.68%
-1.67%
20.33%
5.66%
17.65%
Hotels.com
Vrbo
Airbnb
Booking.com
25.00%
20.00%
15.00%
10.00%
5.00%
0.00%
-5.00%
-10.00%
-15.00%
Gen Z visitors vs. All visitors, by brand
User Research
After several cross-functional conversations with the rest of the team, we decide to pursue an approach that centers travel influencer content on the mobile app, in a new section that will feature an ingress to a feed of curated content. To best achieve design goals, I will make an effort to understand Gen Z travelers, what they are looking for in travel content, and how it drives their booking decisions.
Competitive Analysis
To start the research process, I look at industry standard products like TikTok, Instagram, and YouTube Shorts, as well as less known video-based products promoting travel like CRED:
Takeaways
Single door ingress to video feed is used by CRED, Spotify. This can be a banner/button or a full-size card with more info.
Multi-door ingress is used by TikTok, Instagram, and Youtube shorts and features a carousel of videos with a horizontal scroll.
The cards containing the videos in multi-door carousel can be circular (Instagram) or tiled (TikTok, Shorts)
The video feeds use UI standards like bottom nav and a stacked side nav, with tooltips and prompts to scroll or tap through videos.
The interaction for moving through videos follows two standard conventions: swipe through (Tiktok) and tap through (Instagram)
Empathy Map
Says
“I need a vacation this winter, I can’t take all this cold weather!”
“I’ve been following this awesome travel account on TikTok...”
“Do you think I’d meet people my own age if I went to Costa Rica?”
“My bff told me that Dublin was really cool, but I want to go somewhere warm”
Thinks
“I’m getting burned out at work and need a relaxing vacation”
“But I don’t want to choose the wrong place...”
“Everywhere @ameilaabroad goes on her feed looks so amazing”
“I wish she could just plan my vacation for me so I don’t have to choose”
Does
Logs into Expedia as well as Google and browses their platforms to look for trip options.
Watches traveler influencer content on TikTok and Instagram to get inspired
Texts her college friends to ask if they’ve been anywhere cool lately
Checks AirBnB and sees some influencer content being promoted
Feels
Gets analysis paralysis browsing Expedia for trip options
Not sure if she’s looking at the right hotels
Wishes she could have someone cool online just choose for her
Frustrated there isn’t more info on age demographics on Expedia brands
User Personas
NAME:
Laura Dekker
AGE:
22
EDUCATION:
UC Berkley
JOB:
Software Engineer
LOCATION:
Palo Alto, CA
HOBBIES:
Hiking and dancing
Bio
Laura is a recent college grad working in the Bay Area. She works hard and rewards herself with one big trip every year, which she likes to plan out to the last detail. Last year she went to Thailand but is unsure where she would like to go this year.
She spends a lot of her free time watching influencers on TikTok.
Pain points
Lots of vacation options on Expedia app but no way to determine which is Gen Z friendly
Can’t cross-reference hotels with the ones she sees on social media
Would like to grow her reach
Personality
Overthinker
Logical
Empathetic
Uncertain
Goals
Wants to make sure she books the right trip
Wants to go somewhere where she can meet other young travelers
Wants input from a travel expert
NAME:
Amelia Earhart
AGE:
27
EDUCATION:
NYU
JOB:
Travel Influencer
LOCATION:
Barcelona, ES
HOBBIES:
Music and pasta
Bio
Amelia is an adventurer from a small town who quit her job in marketing and moved to Europe. She is currently based out of Barcelona but documents her travels across the continent on her social media channels @earhartabroad, and has amassed a large following of Gen Z travelers and appeals to young people with a sense of wanderlust.
Pain points
Creating a lot of content across platforms but no central means of monetization
No social media platform allows her to directly promote travel packages from her videos
Personality
Outgoing
Smart
Open-minded
Thoughtful
Goals
Wants to monetize her content
Wants to be able to promote and share custom travel experiences with her followers
Would like to grow her reach
User Journey Map
Laura Dekker
Goal: To book the vacation of her dreams, with the help of some of her favorite social media influencers
Actions
Tasks
• Ambient scroll
• Hone in on traveler content
• Watch more from these creators
• Use Expedia’s map/explore to browse locations
• Use Expedia’s existing app UI to browse hotels
• Finalize travel itinerary
• Book a vacation package through Expedia’s mobile booking flow
• Click out of Expedia mobile booking flow
• Empty cart and close browser
Feelings
😊
🫤
😡
😔
Thoughts
@ameliaabroad goes to so many cool places...
I wonder what hotels she stays in?
I don’t know which locations will suit my needs best
I can’t find hotels that look like those where @ameliaabroad stays
I’m not sure I made the right choice!
I wonder if there are better options for finding cool hotels
It’s just too much trouble finding hotels that look like my type.
I’ll try another travel site tomorrow
Opportunities
Partner with @ameliaabroad to create custom packages +
host and display her videos directly
• Cater to this Gen Zers needs
• Highlight hotels and packages with a younger / hipper vibe
Assure Laura that the travel package she desires is already on our platform
Keep Laura as an Expedia user by making her feel like she is being catered to and her selection process is represented
Information Architecture & User Flows
Flow diagrams showing user flows and contexts for arriving at Travel Stories from the Mobile home page
An MVP plan for three different user entry points, depending on state of their booking / site history
Happy path flow diagram for user with intent to book using Travel Stories to enter mobile booking flow
Sketches / Wireframes
Ideas for your next trip
Get going to some great places at a great price with the latest flight deals
Save on flights to let yourself go
Inspiration and deals for your next journey
Made to Travel
9:41
Stays
Flights
Cars
Things to do
Cruises
Packages
Planning a new escape? Let’s chat.
Explore trip ideas with ChatGPT
Just pack up and go. Members save an average of 15% on select hotels worldwide.
Last-minute spring stays
10.6K views
Spring Afternoon in Central Park
1.2K views
Riding Camels in Morocco
1.2K
1.5K views
Hiking the Amalfi Coast
Discover exclusive stories of top destinations brought to you by seasoned travel influencers
Get inspired to Travel
Review & Decisions
Ideas for your next trip
Get going to some great places at a great price with the latest flight deals
Save on flights to let yourself go
Inspiration and deals for your next journey
Made to Travel
9:41
Stays
Flights
Cars
Things to do
Cruises
Packages
Planning a new escape? Let’s chat.
Explore trip ideas with ChatGPT
Just pack up and go. Members save an average of 15% on select hotels worldwide.
Last-minute spring stays
10.6K views
Spring Afternoon in Central Park
1.2K views
Riding Camels in Morocco
1.2K
1.5K views
Hiking the Amalfi Coast
Discover exclusive stories of top destinations brought to you by seasoned travel influencers
Influencer-Approved Travel Stories
After iterating on the question of using a single-door ingress vs. a multi-door ingress, and creating multiple low fidelity options for each, our team decides a multi-door option gives us more visibility and adheres better to industry standards. We meet with engineers to discuss feasibility of following a horizontal scroll carousel model.
After exploring several options for a more custom and bespoke component for the video feed CTA, we decide to use an EGDS standard button to avoid friction and reduce lift for our engineer.
As a compromise, I propose using a high-visibility action color for the button and adding a subtle fade animation on appearance to give a more tactile, social media feel.
High Fidelity Prototype
I set standard dimensions for the video cards in the carousel, and add a scrim along with video title, views, and a play icon as the standard video card overlay - all with a subtle drop shadow to enhance accessibility in lighter contrast videos
Style Guide
Color Palette
Primary Color
#072F54
Secondary Color
#FFD500
Iconography
Components
Video card
Button states
Side nav menu
Annotations
Live Demo
Working closely with our engineers and stakeholders, I help guide the final steps of development to ensure the designs are to spec and the animations and interactions are working properly.
As a result, we meet our 8 week deadline and Traveler Stories goes live on the Expedia Mobile app in May 2023.
Key Takeaways
There is ample opportunity to build on the foundation of Travel Stories and attract more Gen Z users by improving the quantity and quality of influencer content and adding exclusive packages and experiences. The Travel Stories ingress could be integrated with other mobile features like Tripboard.
With a deeper library of video content, we could do more targeted curating of what appears in the carousel based on the user’s browsing history.
We were handcuffed by scope of project and 8 week deadline to deliver an MVP. Attempts to add custom elements to video feed - like a custom swipe animation, which does not exist in design system but would improve accessibility - were determined to be out of scope but are preserved in handoff Figma file.
The decision to advocate for a video carousel - which required a heavier lift on the engineering side - over a single-door ingress was vindicated by overwhelming preference in A/B testing.
Gen Z is not the only demographic that uses social media as a tool in decision-making and planning! By expanding the scope of content and diversity of content-creators, there is a strong opportunity to use Travel Stories as a means of connecting with older audiences as well.
Travel Stories x TikTok
Background
The Social Commerce for Travel team was tapped to explore a collaboration with social media giant TikTok, with the idea of integrating an Expedia mobile booking flow into the existing TikTok architecture.
Process + Proposal
I spent some time familiarizing myself with TikTok's design language, so that I could begin work on our team's proposal with accurate style and design components. I created user stories for several TikTok profiles and worked in agile collaboration with the SC4T team to refine a happy path flow that would seamlessly integrate into TT's video feed.
In this concept, a content creator on TikTok could partner with an airline or hotel chain and promote packages and deals in their videos, and TikTok users could directly purchase them through embedding a CTA to Expedia's mobile booking and check-out flows in the video, all without having to leave the TikTok app.
Result
Our team met with the team from TikTok for a brainstorming swarm where I presented a detailed prototype of our proposal. I worked in collaboration with a designer from TikTok to refine the proposal and find the right balance of design elements.
After several weeks of usability testing and fine tuning, the collaboration debuted on the feeds of several TikTok travel influencers in February 2023.
