Taking Travel Booking to New Horizons
SUMMARYA complete redesign of the Vacations by Marriott website, transforming it from a cookie cutter site to an engaging, user-centered platform for discovering dynamic travel packages. Collaborating with product, content, and editorial teams, we brought destinations to life with immersive visuals, user-friendly tools, and scalable, flexible modules and templates.
MY ROLELead UX Designer
• UX Research
• Wireframing
• Annotations
TASK AT HANDVacations by Marriott (VBM) is a joint venture between Expedia and Marriott, offering travelers the convenience of booking air, car, and hotel in one dynamic package. VBM offers the best price-quality ratio in Marriott’s service markets. However, since 2019, limited resources and attention have led to a decline in performance: by 2021, sales had dropped 61% and bookings 59% compared to 2019. This created a clear opportunity to revitalize the site through strategic and design enhancements.
We were tasked with auditing the current UX and onsite experience, providing strategic recommendations, and proposing a redesigned approach. The ultimate goal was to increase conversion through improved discovery and product differentiation and reduce the friction to book.
What We Started With
Snapshot of previous ecosystem
Core Challenges + Solution Overview
We engaged with key stakeholders and users, conducted a competitive landscape analysis, and performed a thorough audit of the VBM website and digital ecosystem. This helped us identify strengths, weaknesses, and growth opportunities. Our analysis showed that the site needed:
a smarter search strategy to avoid getting lost in the vast Marriott ecosystem
a more considered approach to its content hierarchy
more robust search tools
a revamped visual identity conducive to a more user-friendly immersive experience.
Below is a snapshot of key problems and solutions, with detailed insights and visual representations in the following sections.
🚨
Conversion was low due to limited booking widget functionality and placement.
We optimized the system for conversion by adding more on-site tools to aid decision-making and boost user confidence before entering the Expedia flow. Repositioning the booking widget below the hero image immerses users in the brand story first. By enhancing the tool beyond a basic search function, we increased engagement and drove higher conversion rates.
System streamlined for conversion
✅
🚨
Templates required a strategic overhaul of content hierarchy to drive deeper exploration.
New templates enhance the old and make room for new
✅
We redesigned templates with a strategic content curation approach, using flexible modules for versatile use across pages. The new design guides users through tailored content, highlights exclusive offers, and enhances the booking experience while inspiring travel.
Overall visual identity needed a major refresh to inspire users, encouraging them to envision their next travel adventure and engage more deeply with the content.
🚨
Content that shines in a new design system
Knowing visually driven storytelling is key to introducing destinations, we revamped the site’s visual identity for a more inviting experience. Seamlessly integrating with Marriott.com and transitioning users into Expedia, we used full-bleed imagery and airy layouts to replace the dense design. The result is a mobile-friendly, immersive experience that inspires exploration and makes booking effortless.
✅
🚨
Search is being cannibalized in a crowded Marriott search landscape.
Differentiated search performance
✅
Focus on targeting different keywords that tap into gaps in the package travel market. Create more content that directly addresses what our audience is searching for, which will improve SEO. By shifting focus to these relevant keywords, you could boost traffic by over 215,000 visitors a month.
🚨
Referrals are not optimized and lost in a complex ecosystem. Language adds to confusion.
✅
Clear Referral Paths for Easy Booking
Clarify language to match the VBM value props:
• Convenience of package booking
• Best hotel prices and deals
and spread placements throughout the Marriott.com user journey.
Our core strategic initiatives
INCREASE CONVERSIONDecrease user drop-off by tightening handoffs throughout the booking flow.
GENERATE DEMANDGenerate traffic from Marriott.com with higher-impact placements and improvement of SEO performance.
BOOST MARGINSBoost presence of luxury brands and properties
Phases in Focus
Our site overhaul was structured around three pivotal phases: Discovery, Define, and two Design sprints. Each phase was instrumental in reshaping Vacations by Marriott’s digital presence, aligning it with strategic objectives and the renewed brand identity. By working closely with key stakeholders and emphasizing swift execution, we delivered a cohesive, user-focused experience that bolsters VBM’s mission and business goals. Below are the phases in order.
Discovery Phase
We conducted an in-depth evaluation of customer experiences across Marriott-affiliated sites and key competitors, chosen to reflect Vacations by Marriott’s market position. This Discovery process revealed standout features for inspiration. Additionally, we leveraged insights from our successful launch of the Ritz-Carlton website to inform our strategy and better meet customer needs.
LANDSCAPE AUDITSOnline Travel Agencies (OTA)
How do they encourage conversion into the booking flow?
How do they approach SEO?
Package Travel
What vacation-specific content do they offer?
How are vacations integrated (or not integrated) into the core experience?
Expedia Customers
How do they seamlessly integrate the Expedia booking engine into their experience?
Are they making use of any tools that we aren’t?
Discovering a niche in the competitive landscape
The majority of competitors are targeting one portion of package travel bookings, and only one competitor is targeting packages by destination and departure point.
Building a holistic understanding of current and future users
To better understand travel behaviors, we analyzed reports on trends, planning priorities, and frequent travel program expectations. To fill gaps in audience data, we conducted a cross-analysis of survey results, identifying key opportunities for VBM.
-
Vacationers are booking much closer to their departure date, fueling a desire for flexible booking tools that allow discovery for last-minute deals and destinations.
20% of recent travelers booked within 48 hours of departure
23% booked within 3-7 days
-
After two years of avoiding urban destinations, travelers are eager to safely discover a city that is not their own.
2.4x more likely to vacation within the US over outside
City stay searches are positively trending since Jan
-
Consumer sentiment is moving toward experiences that not only serve the loyalty side of travel, but also inspiration and booking.
Mobile bookings surpassed desktop in 2021
68% booked their last trip via mobile device
-
Vacationers are looking to travel more and spend more than pre-pandemic levels. Offering methods of discovery without a specific destination in mind is valuable.
41% are planning cultural experiences for their next vacation
40% want to have an adventure for their next vacation
Landscape Travel Reports 2022, Mintel
Define Phase
We integrated insights from extensive audits, site assessments, and stakeholder interviews to map and refine customer journeys within the expansive Marriott ecosystem, with the goal of boosting conversion rates.
Collaborating with our Strategy team, we crafted a Content Requirement Document (CRD) to guide low-fidelity template and module designs. This meticulous approach facilitated client approval and set the stage for a seamless transition to the Design Phase.
PATHING AUDITSA Modular Design System
Zone diagrams map out the structure and layout of a webpage or site, highlighting key content areas. These diagrams offer a visual framework guiding the development of the Content Requirements Document (CRD). The CRD encompasses a library of templates, modules, and features, serving as the blueprint for the design process, from initial wireframes to final visual design and annotations for development.
We developed a new design system with fresh modules and provided detailed annotations to ensure precise implementation by the client’s internal development team.
Design Phase
We operated within the framework of two design sprints. Collaborating closely with strategy and visual design, we iterated and refined the wireframes to meet CRD requirements, enabling the full build-out of our new design system. At the end of each sprint, I meticulously annotated each module and template in Figma, providing detailed guidance and working with our internal development team to ensure successful site implementation.
Booking Widget
The new dynamic booking widget helps users quickly find the right hotel, serving as a key call-to-action that grabs attention. Strategically placed below the hero image on the homepage, it supports the initial visual experience without overshadowing it, guiding visitors seamlessly toward booking. On landing and detail pages, it’s positioned below the Global Nav for easy access.
Features like a dropdown that remembers recent searches and allows selection of regions, cities, and airports enhance discovery. We also added recirculation to Top Destinations within the booking flow, using engaging thumbnail visuals to boost interaction and user engagement.
VISUAL DESIGNS
Room and Date Selection Made Easy
The redesign is clean and user-friendly, allowing easy selection, guest customization, and room management. Features like flexible date options and the ability to book multiple rooms cater to varied travel needs. With clear, responsive controls and a prominent “Done” button, it simplifies the booking process for users.
WIREFRAMESA Robust Destination Tool
We enhanced the Destination widget by adding recent searches and vibrant Top Destinations. Recent searches let users quickly revisit locations, streamlining booking, while eye-catching Top Destinations inspire exploration. These enhancements make it easier for users to discover, engage, and ultimately book.
Templates
Guided by the initial Zone Diagrams from our strategy team, we outlined the full range of page layouts, modules, and features for the new VBM experience. Key pages, including the Homepage, Category Listing, Hotel Brand Landing, Hotel Detail, and Location Detail Pages, were completely revamped to encourage discovery and conversion.
Homepage
Designed to captivate and engage with a dynamic booking banner, vibrant visuals of featured destinations, and enticing deals. Seamlessly guides visitors through curated content, showcasing exclusive offers and inspiring getaways. Integrated storytelling and cross-promotions highlight affiliated hotels, creating a cohesive and inviting experience that encourages exploration and booking.
Hub Landing Page
Acts as a central gateway, providing easy access to destination guides, hotel options, and travel deals. Highlights promotional offers, personalized recommendations, and quick links for booking accommodations and services. This page streamlines the user experience, simplifying the process of finding and booking the perfect vacation while reinforcing the brand’s identity and values.
Category Landing Page
Immerses users in specific regions, spotlighting destination packages and exclusive deals. It effortlessly guides visitors through a curated selection of locales, enticing them with tailored promotions while seamlessly linking to other destinations for further exploration and booking inspiration.
Content Listing Page
Offers users a comprehensive, visually engaging overview of accommodation options in a specific city or region. Designed with a grid or list of cards, this page highlights featured places to stay and exclusive deals, enabling users to easily compare and choose their preferred lodging. A convenient tab allows users to filter the offerings based on their preferences, encouraging exploration and conversion.
Hotel Brand Landing Page
A captivating introduction to the brand with stunning visuals and seamless navigation. A booking banner under the global navigation ensures easy reservations, while a compelling value statement highlights unique offerings. Users can explore exclusive deals through an interactive carousel, enjoy rich storytelling of premier locations, and browse a tabbed module showcasing offers from various properties, along with recommendations for global destinations.
Hotel Location Detail Page
Showcases a specific hotel location, offering a rich and immersive experience through detailed content and stunning visuals. With intuitive navigation, users can easily explore key aspects of the property, including amenities, accommodations, and local attractions, all within a cohesive and visually engaging presentation.
Hotel Brand Landing Page
A captivating introduction to the brand with stunning visuals and seamless navigation. A booking banner under the global navigation ensures easy reservations, while a compelling value statement highlights unique offerings. Users can explore exclusive deals through an interactive carousel, enjoy rich storytelling of premier locations, and browse a tabbed module showcasing offers from various properties, along with recommendations for global destinations.
Hotel Location Detail Page
Showcases a specific hotel location, offering a rich and immersive experience through detailed content and stunning visuals. With intuitive navigation, users can easily explore key aspects of the property, including amenities, accommodations, and local attractions, all within a cohesive and visually engaging presentation.
Annotations
I take great pride in my meticulous, well-organized, and timely annotations. For this VBM project, these qualities were essential due to the client’s ambitious timeline. I crafted detailed annotations directly in Figma and worked closely with the development team to ensure a seamless and successful site launch. Below is a selection of our deliverables.
Experience the Relaunched Site for
Vacations by Marriott
Key Takeaways
Working on the Vacations by Marriott project was a rewarding experience. Marriott’s commitment to providing exceptional travel experiences and their dedication to customer satisfaction deeply resonated with me.
Leveraging Marriott’s revitalized brand identity, we redesigned the booking platform to boost user engagement and streamline the booking process. Despite a tight timeline, we delivered on time, aligning the new site with Marriott’s business goals and enhancing user satisfaction. Collaborating with key stakeholders, we evolved the design system to be more modern and immersive while staying true to the Marriott Bonvoy brand. Additionally, we worked closely with Marriott’s engineers to ensure seamless translation and implementation of the new templates and components.
Credits
DESIGNAddi Hou
Ken Inoue
TEAMCarl Hutschenreuther
TOOLSFigma
Airtable
Explore similar projects
B2C | LEAD UX DESIGNERDigital Innovation Meets Trusted Coverage for Berkley Insurance
Starting with the foundation, our team revamped the digital experience and visual identity for Berkley, a Fortune 500 insurance company.
MOBILE APP | CX DESIGNERShaping the Future of Online Grocery Shopping
Walmart needed to establish new processes and shape customer behaviors, so they turned to us to transform their business with present and future concepts.
B2C | LEAD UX DESIGNERHigh Marks for a New ETS Online
A complete overhaul of the outdated digital experience for Educational Testing Service (ETS), the world’s largest private nonprofit for educational testing & assessment.