Case Study: Wyndham

Wyndham


Synopsis

Wyndham Vacation Ownership is the largest vacation ownership company in the world with 200+ resorts, 900,000 owners around the world. Wyndham wanted to develop a new type of product that would meet the needs of a younger demographic than their traditional product and would provide the advantages of timesharing with less commitment and less potential for lost nights.

Wyndham partnered with Isobar to accomplish the following UX goals:

  • Create a new site for customers to book stays at Wyndham resorts, including site design, development, QA, and content production.
  • Launch the new brand with a sustained and strategic marketing campaign. This eventually included a creating an interactive online personality quiz and a virtual reality experience for sales events.

See Isobar's case study page for more details about our work with Wyndham.


New Website

I worked with a team of 2 other UX designers over several months to design a comprehensive online web portal to search for and book rooms in Wyndham hotels. I oversaw the design of the home page as well as the search and mapping interfaces for the new product.

Home Page

I led the requirements gathering and UX design of the Home Page for the new site. The brand voice is playful and a little zany, so the home page was a lot of fun to figure out with my visual design and development teams. It's got several animations that serve both to liven up the space, and to make some of the unique information reveals a little clearer. My favorite is the meandering line as you scroll down the page (on desktop only).

I knew we were pushing the envelope with browser support for our animations, so we worked hard to ensure that the site still conveyed the message we needed, even if the animations didn't render on a user's device. At some smaller breakpoints, a few of our larger animations didn't make a lot of sense. I worked with a visual designer and a front-end developer to design some entirely different animations for a few breakpoints to make sure everything felt right regardless of device size. Good fallbacks are important.

You can seen the home page in action at vacationality.com, or look at the screenshots below.

I led the requirements gathering and design for the search interface, too. While everyone can search via location and resort, authenticated users get to include dates in their search query as well. This let me design a custom date picker with some fun interactive flourishes to match the brand voice.

The client pushed hard for two different types of search suggestions to show up simultaneously, and I think our solution accomplished that quite well. You can see the search suggestion logic that I annotated in the screenshots below.

On the search results page, we went with a flexible grid that really highlights the imagery of the resorts. We included a toggle between interior and exterior photos, as well as an extra result tile to take the user to the city-level details page if all the resorts in the results set are in the same city.

You can see a live example of an unauthenticated search results page, or see the screenshots below.

After searching, authenticated users can proceed straight to booking their rooms. The client had already established a relationship with a third-party booking provider, but their documentation was scarce and the customizability of their platform was minimal. I worked in javascript and CSS to customize the unchangeable HTML templates to produce a result so tightly integrated with our site that even the client didn't initially believe it was hosted elsewhere until we showed them the source code.

Maps

Designing maps is always fun. There were a few types of maps on this Wyndham project, and each of them posed their own unique challenges in terms of both data-delivery and UI design.

Some of our maps needed to show street-level data, so the user could quickly see that there's a direct path from a resort in Orlando to Disney World. These maps showed local attractions (like Disney World, or Sea World), but we could only pull data about those attractions from a relatively slow CMS. We designed a system that would lazy-load attraction data in a way that was both useful to the user, and allowed for our trickle of information to feed into the attraction detail tiles as it arrived. The solution required creating a few fancy mechanisms to ensure that a growing on-map info box wouldn't ever end up outside of the viewable map area.

You can see an example of this map on any Resort Detail page, but the client has since removed the lazy-loading feature due to external decisions not related to the design.

While the maps above were street-level maps, we had others that needed to show cities on half the Earth, from Fiji in the South Pacific to the US Virgin Islands in the Caribbean. We decided this map should group the cities when the user is zoomed out, and we would provide buttons to zoom into pre-canned areas to see the ungrouped locations.

If that didn't make sense, it's because it's outrageously difficult explain how maps should zoom/pan/move in text. So I made an interactive prototype (best on desktop Chrome) in HTML/CSS/JS using our agreed-upon map provider and real location data about the resorts. I wrote a script to get the cities' lat-long information from their street addresses, and fed that into a map tiled and styled with Mapbox.

That prototype was immensely useful both in communicating with the client and in communicating among the design and development teams. Because we could click around and get a sense of what "felt right", the client could quickly give yes/no feedback about how our map designs were progressing including styling and information architecture. The development team loved the prototype because it meant any questions they had about interactivity could be answered by simply clicking around instead of combing through an annotations PDF.

You can see the final live map on the All Destinations page, or see the screenshots below.


Marketing Experiences

I worked with a large team of designers and developers to create an interactive online quiz that customers could take to see recommendations specific to their vacation personality, or as Wyndham calls it, their "Vacationality".

We also created a fully immersive VR experience highlighting key holiday destinations to be viewed at in-person sales events.

Online Quiz

The stakes for the online quiz were high. Wyndham had put a lot of money towards researching how vacationers prefer to spend their time differently. Some prefer to stay in by the fire and enjoy the scenic views of the mountains out the window. Others would rather party on the beach until the sun comes up. And there's everything in between.

My team was given 7 "Vacationalites" and a series of questions to ask to yeild one of those 7 results. The rest was up to us, but it had to be fast, and accurate. Every member of the program would take the quiz, and the result would affect what was displayed (by default) on every single page on the site.

We concepted and mocked up 4 very different approaches to the problem. Some designs included non-linear flows through the questions like users investigating a treasure map. Other designs relied heavily on a "packing" mechanic, where users would look at a room full of objects and "throw" them into their suitcase like an online skeeball game. With the client's input, we eventually settled on a more traditional linear quiz with several fun animations in each question.

We were acutely aware that most folks would take this quiz on their mobile devices, but we also wanted to use the latest javascript animation libraries and css tricks. The final quiz is very colorful, pushes the boundaries of css animations (especially on mobile), and accurately captures the information we were after and a little bit more.

Virtual Reality

Wyndham expected the majority of their sales to occur at live, in-person events, so they wanted a VR experience to show off what it would feel like to be at some of their hottest locations.

We create a virtual reality experience to take users through 4 different venues showcasing places like a rooftop bar in Chicago, and a calm beach in Hawaii. Each location was room-scale, so users could walk around the space and interact with items on tables, touch butterflies, and a few other secret mini-games.

The final experience lasts 4 minutes, with 1 minute in each location. My roles were to:

  • Create the framework of how to progress users between the locations in a timely fashion without just switching the scenery on them (which would induce nausea in VR)
  • Establish a place for system pause while switching between users
  • Create a space for new users get comfortable with the head-mounted display and controllers before they were thrown in to the immersive resort scenery.

Unauthenticated Home Page
Authenticated Home Page
Search Suggestions Logic
Search Date Picker - Desktop
Search Date Picker - Mobile
Search Results
Reservation Confirmation
Destinations Map - Zoomed Out
Destinations Map - Zoomed In
Quiz Start Screen