Tignes skipass

UX / UI Design

About the project

La Compagnie des Alpes who owns and manages a dozen of ski resorts was looking for a makeover of their current solution to buy skipasses online.

I was in charge of the inital research going from personas, scenarios, to crazy scenarios that could combine multiple skiers and ages, multiple dates and ski areas, with our without discount cards ...Based on the research I came up with concepts, wireframes, and crafted the UI.

Research

User research aimed at better understanding the needs of the people for whom the service is intended and the context in which they will use it. And as a way to synthesize the findings I have developed personas and scenarios.

Userflow

From the user research and scenarios I did diagrams for a simpler and common understanding of the userflows to get to their goals. This serves as a reference for the team and greatly helps later in the design process.

Version #1

The first version was meant to responds to a call for tender and could not take into account all skipass configuration options.
The concept here instead of having a regular purchase tunnel with a series of screens for each steps, is to work with shutters. Each shutter is a step, when the shutter is complete a new slides in, which allows the user to keep track of his previous steps. What is interesting here is the layout who allows to display a shutter between two to show more information such as the weather. It is also flexible as it can easily adapt to tablets and smartphones.

Wireframe

Creating wireframes helps me to ensure that user requirements will be met by the product, and it helps to start thinking visualy how things are going to work. It is also a great way to communicate, review if it meets was has been defined so far, and get feedback.

Mockup

Visual Design is one of the latest layers to provide a great user experience. I love coming to this step because it brings the project to life and we start seeing all the things coming together.

Prototype

Even though I feel confortable with HTML/CSS, regarding the timeframe we where facing, it was easier to develop a prototype with Axure and create transitions to be sure everything would be done for the client meeting.

Version #2

After the tender has been accepted, a new version was needed to answer needs newly defined and needs put aside previously. In the end the first layout was flexible for the very first needs but not enough for new features. I went back onto diagrams and wireframes to think of new ways around the different constraints and components.

Wireframe

Mockup