Carlsberg Group Design System - From Zero to Hero
Everyone sees the value of a design system, but before anything, you need to have everyone on board, and the buy-in from key stakeholders
Problem we are trying to solve
Prior to around 2017, digital products at Carlsberg Group were primarily developed by various agencies located worldwide. Often, these products were "off the shelf" solutions lacking cohesiveness. Consequently, there were disconnections in terms of technology and an inconsistent user experience, leading to a somewhat disjointed approach.
The need for a design system quickly transitioned from being a mere plan to becoming a critical requirement. We faced challenges with inconsistency, redundant work, and duplications, which raised a red flag for us. The design system aimed to provide comprehensive support for all internal and customer-facing digital applications.
The objective was to establish a cohesive experience across our products and define a distinct visual language closely aligned with the Carlsberg Group.
Processes and Key Actions
Getting the buy-in
Implementing the design system would require additional investments to synchronize and make our component library accessible to everyone. To demonstrate the value of having a design system, we embarked on a comprehensive roadshow with a compelling business case. Fortunately, proving the worth of the design system was relatively straightforward. We showcased the positive impact it had already made, even at the design level, emphasizing how consistent and reusable components could save significant amounts of time. This time-saving would allow us to focus more on our customers and enhance our global experience.
Product mapping
Our journey began by gathering and meticulously mapping out our digital footprint, and the findings were astonishing. We discovered hundreds of applications, some with minimal usage or completely unused. Outdated content, broken images, and broken links were rampant, creating a chaotic situation. It was evident that our digital landscape was in disarray, and to our surprise, there were even products that people within the company were unaware of.
Establishing Governance
To initiate the process, we recognized the need for a centralized Design System team to oversee and take responsibility for the DS implementation. It was crucial to have individuals who were willing to collaborate across teams and act as bridges between different teams and products. We formed a team consisting of a design lead, a UX/UI designer, a front-end developer, and a product owner.
By mapping out all the use cases, developing a governance model became a relatively straightforward exercise.
Component library audit
In the next phase, we conducted an audit of two of our products, focusing on creating a comprehensive component inventory. As expected, the inventory grew extensively, but this exercise proved immensely valuable. It allowed us to identify which products utilized specific components, enabling us to prioritize them for design and development efforts. (prioritisation rule based on Product importance and component usage)
Additionally, this inventory table served as a reliable "source of truth" for component options and properties. This data collection was crucial as it provided us with insights into the most frequently used components and helped identify potential candidates for our Minimum Viable Product (MVP). With this information in hand, it was time to roll up our sleeves and dive into implementation.
Component Naming structure
Naming conventions in design systems are crucial for scalability, efficiency, and collaboration. Clear and structured component names facilitate easy discovery and maintain consistency. Having an established naming framework avoids ad hoc naming choices, ensuring a cohesive and efficient design system
Atomic components
In building components for the design system, we adopted an Atomic design approach. Following this methodology, we broke down the system into smaller, reusable building blocks known as atoms, molecules, organisms, mostly. Atoms represented the foundational elements such as icons, and typography, while molecules combined atoms to form more complex components like forms. Organisms brought together molecules to create larger functional units, for example a login organism.
Documenting
We've use ZeroHeight for documentation, it gave us the flexibly to put our vision in practice with 3 core sections, A) How to use and how to contribute; B) Foundations, holding branding elements of the design system, and C) Components, with all components that we have in our products .
In a design system that follows an Atomic design approach, documenting atomic components is crucial for effective utilization and consistency. Documentation provides clear guidelines on how to use and implement each atomic component, ensuring that designers and developers have a comprehensive understanding of their purpose, functionality, and available variations.
This documentation typically includes visual examples, code snippets, usage instructions, and any specific considerations or best practices. By documenting atomic components, the design system becomes a comprehensive resource that empowers teams to create cohesive user interfaces, promotes efficient collaboration, and maintains consistency across projects.
Success metrics
Success metrics for atomic components in a design system include adoption and usage, consistency and design compliance, efficiency and productivity gains, feedback and satisfaction, and error reduction.
These metrics provide insights into the widespread implementation, adherence to design standards, improved efficiency, and decreased errors achieved through the use of atomic components.