Overview
Mediahuis, as the name suggests, is a collection of a multitude of (media) brands. In the past, for every new product or feature, both design and development have always created bespoke, tailor-made solutions. This practice created an unmanaged growth of different implementations. With no apparent structure behind it. Resulting in a product portfolio with an inconsistent user experience and a development workflow that was difficult to scale.
The Challenge
How might we create a system that will introduce design consistency and development efficiency?
Approach
Before diving into any design tool or code editor, it was important to realize a business buy-in by giving numerous presentations to stakeholders to get them acquainted with design systems and convince them why they should invest in it at all. When we performed a UI and CSS audit, we found many inconsistencies. Multiply this by every piece of UI and many years of development, and we realized how inconsistent, incomplete, and difficult to maintain the current workflow had become. After getting the final approval we started the project and established a multi-disciplinary product team that was solely responsible for creating and maintaining the design system. A product owner, a frontend engineer and myself as a designer/developer.
Meet Chameleon
Chameleon is Mediahuis' multibranded design system providing ready to use tools and components for building high-quality, consistent user experiences.
Chameleon's goal is to enable streamlined communication. If developers learn to think like designers, and designers learn to think like developers, the process of delivering a new product can be agile from start to finish.
When designers don't have to focus on the low-level components anymore, this frees up time. They can use this time to craft carefully thought-out user flows, prototype faster and iterate more quickly with priority on the user experience. On the other hand, this gives developers extra time to focus on accessibility and stability.
Multibranding
Chameleon gets its name from its adaptability. With Mediahuis being a collection of a multitude of brands, the design system needed to support multibranding out of the box. Like a real chameleon, it easily blends in with the context it finds itself in.
Built according to the Foundations Model
The first step towards creating a single source of truth is establishing what we regarded as the foundations of a brand. These foundations are a set of agreed-upon primitive values that can be seen as the DNA for a specific brand.
These values are what enable brands to differentiate themselves, as brands are given the freedom to adapt these core values according to their branding strategy.
We decided to structure our system according to Atomic Design's methodology. A modular design concept that has distinct stages and is ordered in a hierarchical way. By creating this collection of parts, designers can re-use components across projects. This re-use ensures consistency and allows a designer to focus on the more intricate and subtle change that attribute to top-notch user experiences.
Bridging the gap between design and development
To create a bridge between design and development, we translated all foundations into a Design Token architecture in JSON values. These values are then converted to platform-specific tokens that can subsequently be used in different components and platforms.
Faster onboarding of new brands
Fueled by Chameleon's Design Token architecture, the framework made it also possible to onboard a new brand in a matter of gathering the needed branded foundation values, running the assembly and out comes a fully functional brand with ready-to-use components.
Educating designers and developers
To optimize the effectiveness of the communication between designers and developers, they not only need to speak the same language; they also need to employ the same mental model. If both worlds have the same way of thinking and grasp the same abstract concepts, discussions can cut right to the core of the underlying issue. Both design and development guidelines are provided to help with the design system.
The result
Chameleon Design System is successfully integrated with different product/design teams. Providing them with a powerful toolbox that ensures an optimized workflow, consistency across the product portfolio, and reducing overall development time.
