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.
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.
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
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
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.
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.
Every component is crafted in detail, under an 8px spacing system, to preserve consistency and overall look.