Creating an ecommerce design system for the future

A focus on the now, with an eye on the future

Our brief was to re-design and re-platform the existing Crystal Ski website. We needed to have an eye on the future but not propose too many fundamental changes to functionality or business logic. This meant being mindful to prioritise effectively, which in turn meant quickly understanding the business, the offering and the opportunities for improvement.

We began with a two with two-week discovery sprint which encompassed stakeholder interviews across the company, reviewing all the in-house customer research, a review of the current technology, and most revealingly a shadowing calls in the contact centre. By involving people from all parts of the business allowed us to start breaking down silos, and include people who have vital day-to-day contact with user needs.

We performed an expert review of the site in collaboration with the product owner (PO). By stepping through the whole customer journey together, we could collectively plan what could be improved in a condensed timeframe now, and what should be added to the product pipeline to improve in the future.

How do you shift to a digital-first brand?

Crystal Ski had a big opportunity to flex their brand from a digital perspective, so whilst shaping the overall design direction we also encouraged the team to think more ‘digitally smart’. The brand had a strong foundation from which to build and we worked to help flex and expand this into a medium previously underserved by the organisation.

In order to assess the current state of the site design, we ran a collaborative component audit workshop - this was designed to highlight any component duplication, variation and inconsistency across the site.

By manually collating a visual record of elements in use on the site, it helped everyone involved to see the scale of the challenge and particular areas on which to focus.

Using Storybook

Taking stock of the current Crystal Ski tech stack, capabilities and intended direction allowed us to begin structuring the most appropriate codebase for long-term efficiency. This was particularly important given the changing backend and re-engineering of the front-end.

Collectively we decided the most efficient approach was for us to use Storybook as a way of providing front-end React components which Crystal Ski then integrated into their system.

Removing friction for users in a complicated booking flow

Crystal specialises in ski holiday packages which include flights, transfers and accommodation. It was clear from our research that there were opportunities for increased flexibility and discoverability of these packages, but ancillary sales were where big optimisations could be made. Ski hire, lift passes, tuition and other parts of a customer’s holiday were a significant part of Crystal Ski’s business that were not served well on the website, especially on mobile screens. Many customers resorted to the telephone (to be helped by Crystal’s fantastic customer support). With Crystal’s internal team starting to re-engineer some of the back-end, the timing was perfect to align the channels and make some big improvements.

We ran collaborative workshops to define the ancillaries flow. As an important part of Crystal’s business it was important to get this right, especially with modifications being made to the underlying technology stack.

The commercial teams were juggling their own packages and special offers, while working with local partners who provided other sets of packages, some of which were conflicting or incompatible. This put a lot of onus on the customer to work out the best combination of deals for their holiday and would sometimes mean the customer went elsewhere for their ‘extras’ or missed out on on the best price.

We worked with Crystal Ski to take the friction away from their users so that they could provide customers with the best offer, quickly and clearly. As we went through the process to make the experience more transparent and useful, Crystal Ski found they needed to reevaluate how they structured their offers and ancillary packages.

To test our theories we sketched and prototyped on mobile as we knew this was the most challenging experience. We performed guerrilla usability testing which confirmed that the model we designed would work. This brought validation both in-house and with users. Getting a high-fidelity prototype into people’s hands also allowed the team to test quite a radical re-design of some the visual identity of the brand in a safe space.

• We created a consistent, logical way for people to add what they needed for their holiday based on their needs.
• We iterated and tested ways of highlighting special offers to encourage upselling
• We automatically applied special offers where possible
• We proposed a new search system that allowed more flexibility without affecting the back end capability

A design system for now and the future

After a lot of design and many iterations, Crystal Ski were left with a comprehensive component set: a design language to underpin the entire site and an understanding of how those things fit together. This was documented and delivered as code, either integrated with the new backend or waiting in the wings.

There is now a really considered considered experience across all devices. We started small to make things work harder, and joined everything up to create a cohesive brand experience. In terms of user experience improvements, we were able to implement a number of quick wins across site (which were not original in scope) and provide more more detailed thinking on key areas including ancillaries and search.

Raising the profile and impact of design

Crystal Ski had historically used a waterfall approach to their projects and we embedded a more agile way of working. This allowed the team to begin to iterate together, making the most of cross-discipline skills, as well as encouraging buy-in. This fast-tracked an internal mindset change from thinking about design as aesthetics to thinking about holistically designing a service.

To plan for the longevity of work in the pipeline we needed to create a design system that would document not only all the design decisions, visual assets and the rationale for how they should be used both now and next but also a user flows and logic guide. This gave the fledgling digital product team a really strong foundation to grow from while they appointed more product designers. In this way we were able to help design have a seat at the table - everyone knew this was the start of a larger digital transformation and was the catalyst to start the journey on the very best foot.