CheckYeti
Design system
About CheckYeti
CheckYeti is the largest online platform to book activities in 1,000+ mountain and beach destinations across Europe – including skiing & snowboarding, rafting & canyoning, mountain biking, paragliding & ballooning, diving & surfing, jet skiing, boat trips and many more.
Overview
CheckYeti as a startup went through multiple designers and developers in its first years of existence. This led to inconsistent design, code and issues with accessibility. The goal of the project was to bring consistency, reusable components and better accessibility to the website. These goals were all successfully addressed and changes of colours to more accessible ones led to 11% increase in conversion.
My role
Developing a design system was my initiative which intended to bring better experience to our users as well as our front-end developers. I’ve done this through standardising of the website and close cooperation with the front-end team.
Problems
1. User interface inconsistency
Visual design facing customers, providers who offer their activities on the platform and our internal team all had inconsistencies within and amongst all of them. This included unnecessary number of variations in components and general styles.
2. Website colours not accessible
Original colour palette had insufficient contract values which led to readability issues and not very serious appearance of the website.
3. Inconsistency in front-end code
Inconsistency in the design facing users naturally reflected in the front-end which was chaotic and contained lot of unnecessary code.
Process
I conducted a visual audit of the existing website, going through all individual components and styles reducing the number of necessary variations of each to minimum number possible while retaining enough variability.
Through audit of colours existing on the website and accessing WCAG contrast ratios I was reducing number of colours necessary while still perfectly usable. Then I worked together with front-end team to implement the new colour palette though the whole website.
To address issue of inconsistent code I was pushing front-end developers to create Storybook containing all styles and components and keeping it updated.
Mapping of the old colours to the new colour palette
Solution
Based on the visual audit I defined styles and components necessary for current state of the website and kept the system up to date by staying aligned with front end developers.
Snippet of the style guide - typography, buttons and information displaying components
I developed a colour palette with minimum feasible number of variations per colour and defined which colours are suitable for text regarding accessibility standards.
Resulting colour palette including WCAG contrast ratio values
Since design systems are always evolving and subject to change, I was making sure that all styles and components in Storybook are up-to date, matching the style guide I created and that developers use style variables and components from Storybook to ensure consistency and clean code.