Esprit Ski
17 weeks
What we did
Design research
User experience design
Interface design
Front-end development
Responsive design
Esprit Ski header

In the competitive ski holiday market, Esprit Ski has an advantage over their competition. With over 35 years of experience taking care of ski-lovers and their families, they’ve set the standard for high-quality childcare and ski tuition. With their niche well-established, they needed to understand how their value could be best understood and communicated to their customers.

Esprit Ski needed a website to reflect their commitment to high-quality family ski holidays. They also needed a website design that met the needs and concerns of their visitors in planning and booking a holiday. Up to this point their website had not been looked after, it was a place where different teams 'owned' different sections of the website, and uploaded their own content, pricing and availability data without a view on what the whole experience was like for the visitor. Because of this, what they had in the end was a website that was difficult to navigate if you were trying to find and book a ski holiday. Users were met with long pages of dense copy, and information was hard work to find.

The ultimate goal was to increase on-line bookings - but to do that, Esprit Ski had to first understand what the unique needs were of their customers, and then to demonstrate their high-quality service with the design of their website. We had a match-making task to do - marrying up unique customer needs with a complex business model involving multiple third parties and data sources.

The Results

Increased customer confidence to book online

Through testing our new design, customers said they felt that the website felt much easier to browse and be inspired by. By adding the right kind of content on key pages, they felt more confident about their choices when looking to purchase online.

Systematic design

We designed with the future in mind, and created re-usable elements that helps ensure consistency across the site and increases the speed of production in future projects.

Collaborative ways of working introduced

Through workshops and feedback sessions, different teams were able to meet in the same room, and actually work together, combining their expertise to design the site.

The Full Story

Esprit kickoff
Getting stakeholders aligned during the project kick-off

We had 10 weeks of research and design to improve the experience of their website for customers. We started with a discovery phase to get a clear understanding of what strengths, weaknesses and areas of opportunity exist for their current offering.

Esprit diamond
The first part the project was roughly broken-down into two phases. Phase 1 was focused on research and usability testing. Phase 2, was the start of the design process. The second part of the project was front-end development.

We spoke to senior stakeholders and the wider business, listening to what the internal challenges were with the website. We also looked at the context of the business, noticing that many of their competitors - although none were perfect - had more modern or engaging digital experiences. Taking our own deep-dive into the website by looking at it from the perspective of a customer, we saw that information was hard to find, difficult to understand and it was easy to book the wrong services. These experiences were also confirmed when speaking to customer service team members and in later usability testing.

We don’t present the child care pages well, we don’t show what we deliver, I have been on the holidays, the child care is really good but we don’t sell it. It doesn’t give the true impression of what the holiday can give.
Stakeholder interview participant

How do we understand our unique customer needs?

In the discovery phase, we used two methods of understanding the customers in a deep way. First, we facilitated in-depth interviews with people who fit the profile of their core audience group. Second, we conducted usability testing on the current website.

Esprit usabilitytesting
Ben, noting down an observation during usability testing
There was a beautiful ‘lightbulb’ moment in the discovery phase were the team recognised the immediate value of customer research. By creating the opportunity to observe the customer experience firsthand it enabled them to confront assumptions head-on and support objective collaboration throughout the project.
Benjamin Parry
Benjamin Parry Design Researcher

We learned that customers approached the website with either one of two mindsets. Some parents prioritised first their love for skiing; evaluating the snow surety of resorts and making sure that there were enough runs for their ski level. Other customers first wanted to ensure there were adequate activities or lessons for their children before looking further into the skiing. They were interested in carer to child ratios, they read independent reviews and wanted a picture of what their children might be doing during the day. We needed to update the website to serve the needs of these two mind-sets.

Esprit mindsets
In the research phase, we discovered that Esprit Ski customers took either one of two mindsets.

How do you effectively take research insights into design?

In some cases, heavy documentation of the research isn't needed if you can immediately take action to integrate insights into the design. The research and the design phases of the project overlapped heavily so that researchers and designers had time to discuss the insights and share their understanding. To kick-start the design phase we facilitated two workshops in the first week. With senior designers facilitating the workshops, key members from different teams across the business were able to work together to understand and process the research results. They then worked together to create proposed solutions to both the information architecture of the website and ten website page templates -- all in one day.

Esprit workshop1
In three hours, team members from business, product, design and research came together with their knowledge to pull together a strong first-draft of the website that considered the business perspective and empathised with user needs.

In a workshop, different team members were able to combine their knowledge and skill into the first designs of the website. The core research findings were synthesised and played back. People from product teams, marketing, business, research, technology and design were able to use these insights, combined with their perspectives, to directly input into the site’s design.

We went from sketches to wireframes to high-resolution prototypes in a very short amount of time. In order to maintain our rigorous pace, designers from Clearleft worked as part of the team at Esprit Ski, co-locating at either offices at least twice per week. We also communicated often with the wider business in a mix of formal and informal presentations in order to take in feedback and have continuous discussions and presentations.

It was a good design process between myself and Ben. Especially in the early phase of design where there is a lot of work to do but it’s hard to separate out tasks clearly.
Jerlyn Jareunpoon-Phillips
Jerlyn Jareunpoon-Phillips Project lead & product designer
Esprit extra
Jerlyn and Ben from Esprit Ski co-designing

Positive results

We tested the new information architecture as well as a fairly refined version of the website and received good results. The insights from users this time around were different from our initial testing. Once users saw improvements, they were able to give us deeper feedback into their thinking on certain pages. We had time to iterate and make minor changes to our designs.

I think it's easier than the old one. There is less on the page, you got what you need. There's less fluff which is unnecessary. Personally, I used to think I would miss something while this is nice and clean.
Participant 5 during usability testing
Esprit ui components
Some of the design elements and components created. The design of individual components were based on customer feedback.

Some of the improvements to the site included specific places on the site to highlight Esprit's unique selling points in the places that were most relevant to their customers, carefully placed links to independent reviews on accommodation and childcare pages, product cards that summarised the most important information, and more relevant links so that customers could browse the website more easily.

Esprit ui templates
Some of the final page templates.

How do you fast-track shipping the product?

Rather than handing over templates we drastically reduced the amount of handover required by splitting the templates into a component backlog and building in-house. We were also able to make efficiencies by undertaking the front-end development as a parallel stream to the finalising design. It allowed us to test and QA the output constantly. It also reduced the design documentation on the behaviour of components as we worked through them collaboratively.

We took an agile approach to the front-end development, splitting out the design into components and estimated the effort for each. This allowed us to prioritise a backlog with their internal team. A large section of the project was integrating the new website with the clients' existing pricing and availability API. Using Vue and a micro front-end approach we were able to deliver accurate real-time pricing and availability data for the first time.

This supported by new page designs that supports their unique structure and user needs.

Esprit trys
Trys working his front-end magic. After the research and design phase, the development phase followed. We made sure to constantly consult with the development team the whole way through the first phase of the project.
More work