VacationChamp

VacationChamp is an AI-powered travel search app that intelligently sifts through inventory across global flights, lodging and car rentals. It displays the best results based on a number of configurable factors, learning your preferences as you use the product over time, and continues to search for better options even after you’ve made bookings. It is also a powerful tool for travel companies, who can leverage the power of the underlying tech to find, negotiate and book travel through a dedicated supplier portal.

When the company approached us to design and build their web app and native app, AI was in its infancy. We were hired to embed with the startup and act much like an in-house design and development team, working closely with founders to refine the concept and build an MVP. We sought to create a seamless, intuitive experience that surfaced the power and features of the AI without getting in the way of booking and building trips. Along with a second creative director, I led a team of UX designers, visual designers and a project manager, as well as in-house, contract and client-side developers through the project lifecycle.

DISCOVERY & UX WORKSHOPPING

When we first engaged with the company, the VacationChamp team was full of ideas as to how we could leverage the AI in the feature set of the application. We were able to rein these ideas in and provide focus and direction through a series of discovery and UX activities, beginning with surveys and competitive analysis. We led a persona exercise and created a core set of user personas to ensure decision-making mapped to user needs, and embedded with their team to lead card sorting and whiteboarding sessions to flesh out the core features of the app. Our research and synthesis led us to this core set of experiences:

1. Search: Search, browse results and make bookings for flights, lodging and car rentals

2. Request: Post a booking request that vendors in the ecosystem can reply to

3. My Trips: Organize and associate bookings to create detailed trip itineraries

4. Collections: Collect and manage potential bookings for a future trip

These were supported by two secondary sections:

1. Inbox: Communications between the user and vendors/hosts

2. Profile: Core account management and AI search settings

Finally, in the web app we needed to account for the vendor portion of the platform:

1. Supplier Dashboard: Feed view of negotiations and bookings for travel agents

Following this product strategy work, we fleshed out a complete site map, created wireframes for core components and pages, and tested user flows via Invision prototypes.

AGILE & Iterative Design Process

In response to an ambitious timeline, we structured our UI workflow to ensure we could iterate rapidly and continue to refine the experience as we shipped final screens to development on a rolling basis. Throughout the design process, we worked in weekly sprints within both the design and development teams, with time reserved weekly to ensure designers could work directly with developers to make sure implementation was happening at the highest level. We also reserved structured time for continued whiteboarding and close collaboration with the client to ensure we could respond to and guide any necessary evolutions as their backend team continued to work on the underlying technology.

Design Language

The results of our competitive analysis pointed to the need for visual differentiation from key competitors such as Kayak, Expedia and Travelocity. We also knew that our design language would need to allow for us to surface aspects of the AI to the user at various points in their journey. Finally, we sought to keep the user experience as consistent as possible across the responsive web app and native app to drive ease of use and brand consistency across platforms.

AI can often be perceived or represented as ominous – we took the stance that it is a cheery helper behind the scenes, and created a UI system that feels fresh and friendly to reflect that to the user. A palette of grays complemented by blues, purples and pops of teal allow for necessary contrast and hierarchy, while also accounting for the need to display a great deal of information in a clear fashion in scenarios such as search results. A rounded but fairly narrow typeface extends the affable theme, while functioning well in content-dense scenarios, and a set of quickly recognizable icons assist in wayfinding, while also representing aspects of the AI and its power. We created key opportunities to display the effect of the AI through UI elements that were unique in the system, and created specific design hierarchies that served to drive conversion by giving clear prominence to CTAs in the schema.  

RESULTS

We shipped a beta of the web app and mobile app ahead of the Phocuswright Conference, one of the premier global travel industry conferences, where the company was featured as one of the Top Innovators in Technology. Following the conference, we facilitated a handoff to the internal design and development teams the company had assembled during our engagement, and stayed on in an advisory role continuing to consult on product strategy.