Comparis Pattern Library
Design Systems | UX & Interaction Design | Visual Design
While working at Comparis ↗ in Zürich, I’ve been leading the creation of a new, centralised pattern library for the company’s current and future product offerings.
Project Goals
• Increased speed of design and implementation for new or updated products
• Global consistency across 10+ Product Areas and 20+ Products
• Improved usability, page speed, and click-through rates across the site
My Contributions
• Definition of new design language covering color usage, grids, and many other details
• Creation and management of component system in Figma using variants
• Constant communication and collaboration with a core development team
• Advocacy for accessibility, including color contrast, tone of voice, and language support
~
Previous explorations for design language
~
Early iterations to demonstrate component updates
Speed & Consistency
These are the key impacts of this ongoing project, in regards to both the design and development processes. What used to be a website with slow, separate decisions for each product area is quickly becoming aligned and familiar to our customers.
So far we have been able to completely redesign and launch 3 products within 6 months (check them out ↗), with 3 more coming very soon. The most recent project was completed on the design side within 3 weeks, which was only possible thanks to the Figma library and newly released Variants feature. I quickly adapted our existing structure to speed up our design production even more.
~
Current usage of elements in Figma
Breakpoints & Layout
Part of the process for creating a new design system was adapting the standard breakpoints used across the site. We updated to align with industry standards and worked with the head of Advertising to come up with a new strategy to accommodate the new sizes.
A key piece of the responsive breakpoints is a flexible sheet-column layout. Key content that cannot fit on smaller screens (like results filters) is held in a bottom or side sheet for mobile and tablet sizes, which then fits into the right side of the largest breakpoint layouts.
Side-by-Side Sheets & Column