Vail Resorts Responsive Website

“Make sure the process is streamlined. And Fast. The ability to book, perform research, view amenities and options are important to show on the site. And I split my time between desktop and mobile, but I am mostly using my mobile device for research purporses, and desktop to book the actual vacation.”

Vail Hero

Problem Statement

Vail Resorts needs a responsive website strategy for all of their properties, such as Breckenridge, Vail, Heavenly etc. that is flexible, customizable and personal. A modular responsive grid that is customizable depending on time of year, resort property or other major localized events is critical for success.

User Research and Personas

The team interviewed a wide range of individuals that have booked vacations to either a Vail Resorts property or another major destination vacation spot.

Vail Personas

Vail Personas

User Flow - Vail Booking Flow

I created a simplified user flow for the Vail Resorts booking flow using Sketch. I started with diagramming the flow on a whiteboard before fine tuning the flow on the computer.

Vail User Flow

Responsive Mobile Web Wireframes

I created all the wireframes for the Vail Resorts responsive website, focusing on the booking flows and ski school flows. I used the design tool Sketch App and then imported the screens into InvisionApp to create an interactive prototype. The prototype can be seen below at the bottom of the page.

Vail Responsive Wireframes

Responsive Desktop Web Wireframes

Home Page

Vail Responsive Wireframes


Search Results Screen

Vail Responsive Wireframes


Lodging Details Screen

Vail Responsive Wireframes


Ski School Landing Page

Vail Responsive Wireframes


Ski School Detail Screen

Vail Responsive Wireframes


Cart Screen

Vail Responsive Wireframes

InvisionApp Prototype - Mobile Booking Flow

I used Sketch to create my wireframes and synced my source file to the InvisionApp prototpying tool.

InvisionApp Prototype - Ski School Flow