A front-end component library for Nendaz

Nendaz, the ski resort and summer alpine retreat, needed to move fast in implementing a complete remake of their website for the summer season of 2021. With months left before the deadline, Cruncher was contracted to supply the front-end as a library of hundreds of components ready to be integrated into their CMS.

Banner image

UX and Design








At the end of 2020, the marketing department of Nendaz needed to move fast in implementing a complete remake of their ageing website for the summer season of 2021. Our long-time partners :ratio were to work on design and Cruncher was contracted to supply the front-end as a library of hundreds of interactive components ready for integration into their new CMS, which was being implenmented by MyCity.

The project started by identifying user needs from existing analytics and from user research, which was fed directly into the design team. We were conscious of a pressing need to move fast, so :ratio and Cruncher chose to work in a series of sprints, delivering production code that could be implemented in the CMS at the end of each sprint. That meant that for several months at the beginning of 2021 there was design, front-end implementation and back-end integration happening simultaneously, each at various stages through a production pipeline.

The project was broken into 5 sprints. A significant component were the interactive maps. Cruncher has previously worked with Open Street Maps and with the Google Maps APIs to supply maps with overlaid regions and points of interest for various projects. For Nendaz we chose MapBox for its custom style-ability. The design demanded fullscreenable maps overlaid with points of interest, routes, and custom location dialogs. On search pages these synchronise with a list of results displayed in a left-hand column – an 'AirBnB-like' interface. Data is requested from the CMS as JSON, and the front-end composes returned location data with HTML templates to render both the results list and the map.

In order to expose as much information to search engines as possible, schema.org microformats data is written into the HTML.

Each sprint was published to a private website that comprises our front-end component library, page layout library and accompanying documentation that serves as a reference for MyCity to integrate into their CMS. MyCity then integrated the components into their back-end to publish the final website.

The website, nendaz.ch, was delivered on time despite several lockdown restrictions, in two versions for summer and for winter visitors. Since lockdown was lifted Nendaz Tourism has seen a doubling of their website visitor numbers over the pre-2020 website.


Email hello@cruncher.ch Telephone +41 21 546 68 00

Other projects