We worked with Resero to develop a new series of websites that run on an interconnected design system to service their four brands. This allows us to increase efficiency of build when creating new websites, and add more value to the users of existing websites by rolling back any new additions to the system.
Crucial to allowing us to realise this vision was a robust token design system built in Figma. The token design system allowed us to create one base design system which covered all style attributes, base components, page sections and templates. We approached this from the ground up, setting up foundation tokens, building base elements and building with increasing complexity.
Rather than tokenising every aspect of the system we instead considered what parts will need to change per brand, and what can stay consistent across all websites. By thinking like this we were able to focus our energy on the highest impact components and design features, while allowing design best practice to guide some of the less important aspects.
A major benefit of this token based approach was that we were able to work with the development team to create a process where design tokens could be exported from Figma as JSON, and then imported directly into the dev environment. This meant that we could work simultaneously and any changes in the designs could be effortlessly applied to the code with a simple JSON export.
With the base design system complete we moved on to creating our first brand reskin using the system, Sebel.
This brands visual identity is heavily inspired by the minimal Swiss style, with large Helvetica titles, generous white space and a strict underlying grid. To add some character to this style Sebel uses pops of bold colour as full background sections.
Following the successful launch of Sebel, next was Qual. This is a website that is focused on designers and architects, so style was of course very important. The branding for this was still in it’s infancy so we had the opportunity to develop it while working on the website design.
We decided to aim for a clean style, with strong black and white contrasts and a visible grid reminiscent of technical drawings or blueprints. Photography was truly the hero of this website so we adjusted the specifications of many of the images so they could have more impact. Additionally this website brought with it a few new technical challenges; favouriting functionality, and a new product configurator. We were able to take these on easily because majority of the website was already built and could be reskinned from the token import. So the developers were able to focus energy on the new features.
