Carlsberg group

Customer-facing tools
design system

Designing for scale

Firstly, why “customer facing DS”?, because we, as a group already had a system in place, but we looked at this as a perfect opportunity to be bolder and innovative and Connect with our customers in a unique way across our tools.

ds-intro.png

Carlsberg Group has more than 4000 employees, but they didn’t have a "digital team", so all the digital products were made by agencies scattered all over the world. And as a result, products were disconnected, both in terms of technology and experience... but now, we want them to look and feel the same. These, should not be treated as standalone products, they make part of a bigger picture, they are part of Carlsberg Group Customer experience

Process & experience

This was my second time involved in the creation of a design system from scratch, and if there's one thing i know is that, building a design system without a vision and strategy is time thrown to trash.

miroboard.png

This design system really started from scratch, research and ideations sessions supported some of our decisions, and Workshops help us to understand use cases.

The design system was like that side project that pulled all the designers into the same room/call (weird times hein), and that was fun, during the process we have grown as a team and foundations started to emerge

Our foundations

We have two main areas in our design system, Foundations, were we have our basilar elements, like colors, typography, icons, and text styles and components, were we have, well guess what, our components

The elementar color system we are using

We have been using Montserrat as our official typography for all our digital products, we want a typeface with a great readability, a good contrast and easy to recognize, Montserrat filled all the thick boxes...and the Balck version of Montserrat is so rad.

+ 200 icons built on a 24x24 artboard, over a 2px grid

I love doing icons!! So this is such a fun moment while building a brand. We have this icon library as a global one, so all of our products are using it, and as you can imagine there are a couple of dozens missing here.

Components and flexibility

we've built our components with the atomic approach in mind, this way we make sure of components consistancy and scalability.

a solid and scalable structure is the base for every project, so we want to make sure that all of our compontents are flexible and adaptable to any type of grid system, we defined three major breakpoints and everything in between should adpat organically.

Responsive grid, focused on 3 major breakpoints
Quick example of one of our product cards
Toast notification skeleton and overall look

Every component is crafted in detail, under an 8px spacing system, to preserve consistency and overall look. 

Role 

Lead design