Vail Resorts

  

The Story

Vail Resorts is known internationally as a premier brand for luxury destination travel to its scenic locations. It owns 4 resorts in Colorado (Vail, Beaver Creek, Breckenridge, and Keystone), 3 in Tahoe (Heavenly, Kirkwood, and Northstar), and one in Utah (Park City), Minnesota (Afton Alps), Wisconsin (Wilmot Mountain), Michigan (Mount Brighton), and New South Wales, Australia (Perisher). 

Its product is the epic mountain experience. Guests visit Vail resorts from all over the world. About a third have a household income of over $200k.

Vail needed help updating and unifying the visual language across their top eight resort sites as well a creating a standard set of templates and components for their content to help ensure fluid integration with their content management system and across different resort marketing and writing teams. Additionally, most of the current experience wasn't designed for mobile, and since 38% of  their traffic from high value markets comes through their mobile experience (with an increasing trend over the last several years), it was important to bring the mobile approach up to date.

The Ask

  • Conceive a design system for eight Vail resorts with easy to maintain and repurpose-able components that can tell each resort's unique story
  • Build an experience that expresses itself as well on mobile as it does on desktop
  • Encourage the user to purchase early and build a holistic vacation experience rather than siloed purchases of lodging, lift tickets, lessons, etc.
  • Remove hiccups and barriers to purchase paths, don't make the user re-enter information, make recommendations and shortcuts wherever possible
  • Bring the experience into accessibility compliance

The Work

  • UX track lead for team of 3-5 (depending on phase of the project)
  • User journeys and and functionality model
  • Wireframes and annotations for mobile and desktop
  • Accessibility training of the creative team 
  • Successful introduction of new tools our team was eager to add to our vocabulary: Sketch for wireframing, and Frontify for Web publication and maintenance of annotations
  • User testing of key interactions using inVision prototypes
  • Highly collaborative process with client including informal calls and online chats with client product owners several times each week, in addition to 3 on-site workshops and 3 rounds of reviews for each of the 3 batches of work
  • Facilitated relationship with visual design to ensure buy-in, development of UX thinking, and consistent implementation of UI elements

User Journeys

We created a set of user profiles and journeys to help us establish a long-term experience vision before scaling down to something that would fit within our phase 1 scope.

 

Wireframes and Annotations

We introduced Sketch to our wireframe creation workflow for this project, replacing our usual Adobe InDesign and Illustrator. We liked the streamlined interface built specifically for the task of sketching and prototyping.

This was additionally our first experience using Frontify for annotations. It proved to have several advantages -- easy updates, no need to break up long images into several pages due to print-size restraints typically imposed by an InDesign print format, small interactions like rollover pop-up descriptions and jump-links in the table of contents, a document that could be edited by several people at the same time, no outdated copies floating around amongst developers or clients, amongst other benefits. As our business analyst exclaimed, "This is life-changing, guys. I can never go back to using annotated PDFs after seeing this."

 

Visual Design

We collaborated with our visual design team to push the UI thinking further than the original wireframes while still maintaining the thinking and consistency of UI elements.

 

Creative Team Accessibility Training Materials

I used this briefing deck to familiarize our team with thinking about accessibility guidelines from an empathic design point of view.

I feel that if designers can understand how people with different disabilities use adaptive tools to access what we design, then we can better understand the impact our decisions have on the experience of people with disabilities. By understanding this experience, we can come up with better solutions for compliance than if we simply followed guidelines without context. 

As a companion to this deck, I created an audit matrix to help us track our compliance with guidelines. Each creative teams is responsible for auditing their work for compliance to different guidelines, which are indicated in the matrix.