How we created a global design system
How long? 4-5 minute read
Picture this: A multimillion-dollar global company. Operating in dozens of local markets. With dozens of websites and apps that aren’t visually consistent. A huge roster of agencies operating globally and locally. And teams worldwide working with a small library of brand books, style guides and activation toolkits in an attempt to deliver a unified visual brand expression worldwide. And, to a greater or lesser extent, failing.
It’s a problem we hear from lots of the brands we talk to. And it’s a problem that the biggest brands globally are addressing (in part at least) with integrated Design Systems.
A hub and a home for the brand
As part of our brand experience strategy work for the global pet food giant, Royal Canin, we were kicking off a number of key digital projects. One of those was a global website that would unify the brand experience globally, while enabling local teams to localise content and product offerings to meet the needs of their customers. The other projects involved apps and service design initiatives; all of which would require digital interfaces and visual consistency. It was the perfect opportunity for them to introduce a Design System.
Our approach to creating a ‘Design System’
We worked closely with Royal Canin’s UX team to develop a Design System which we called, Design Language and housed it on a site with public access. Loosely based on atomic design principles, this methodology creates efficient, consistent and auto-updating building blocks for designers and developers to reuse. As we were developing the global brand website for Royal Canin, we used Design Language to reliably speed up the frontend system build time, and to do that we followed an eight step process…
Step 1: Situational review
Review any existing UI to understand what the client currently has and identify inconsistencies with a view to reduce duplication. Refine typography, buttons, cards and layouts with a global scope.
Convert traditional guidelines to digital and understand/translate colours, typography, logos and icon libraries.
Platforms and frameworks
Define the scope of where code will be used and plan how it will be integrated into foreign systems.
Define who we are designing for and how they are going to use our products.
Step 2: Analytics
Test existing analytics solutions and products, gather data on what works and what doesn’t and define what we should keep and what we should evolve.
Step 3: Define gaps
We’ll now have a much stronger understanding of how we can better serve the end-users and what improvements are needed. We’ll audit current accessibility, semantics and performance helping us to better generate wireframes, user journeys and components.
Steps 4: Standardise language
Create and agree a standardised nomenclature for both design and code, and agree this with both the client, and external design and build partners.
Step 5: Site design
Create a home for the design system to live on. Initially this will be simple and will grow and inherit styles from the system as it evolves.
Step 6: Design and build
Create a pattern library for the most common design elements creating mockups and prototypes as we go to validate our decisions.
Add the folder and file structure to accommodate the base identity, atoms, molecules and organisms. Apply the new items to a framework that can display the assets with UX and implementation documentation.
Everything that goes into the pattern library needs to be considered for all its possible uses and UX best practice. It’s key that this is documented and shared with all users.
Step 7: Continuous improvement
A Design System is a living document and needs to be designed in a way that enables it to adapt and evolve in-line with new feature requests.
Step 8: On-boarding
On-boarding and workflow documentation is created to help internal and external partners and third parties.
The benefits of Royal Canin’s Design Language
The main benefits for Royal Canin have been the cost savings and the increased speed to market with new projects. We can safely say that the project will pay for itself by the time they have rolled out a handful of major projects. In summary, here are the core benefits:
✓ All in one place
Design Language gives designers a single source of truth: a toolkit that includes everything from logo size and typography to colour palettes and page composition. For developers, it provides unified, sense-checked code and functionality that’s ready to go.
✓ Rapid development
Due to the code base, brand assets and design components, internal and external partners are able to spin up new prototypes and page designs faster and more efficiently. Design Language also gives marketers a single, easy-to-access source of design, so teams can quickly produce campaigns without having to track down or recreate brand assets.
Design Language enables and actively encourages cooperation between all relevant agencies on the Royal Canin roster. All of the brand’s agencies’ assets were integrated and devs and designers used assets from the system and collaborated on the continual improvement and updating of assets and components. This stopped duplication, saved money and improved the consistency of brand expression.
✓ Easy global updates
Establishing a Design System like this means that global changes, for example UI elements or typography, can be implemented overnight. Markets using Design Language can benefit from regular updates by simply updating the version number they include in their code.
✓ Building for the future
Design Language gives Royal Canin far greater flexibility while achieving global consistency. As the number of projects increase and change, so does Design Language, which we’ve built so it can grow and flex.
Each component we create for Design Language is available for all future projects. This means we have to be much more conscious in the early stages of design to ensure components will work across different applications – from websites to interactive digital displays. The cost of that early design consideration is massively outweighed by the cost and time saved further down the line.
✓ Intelligent support
Digital teams and marketers wanting amends to Royal Canin components, or new components developing, make their requests to us through github.com. We first diagnose what’s actually needed by looking at the problem they’re trying to solve and often, for example, someone in a different market has tackled the same challenge and components are already available.
✓ Better quality in less time
One set of code now serves 52 markets across all digital products and is continuously updated and optimised. This is generating huge time savings, eradicating duplication and providing much-improved customer experiences due to greater consistency and quality of design.
✓ Fluid brand evolution
Design Language is also giving Royal Canin and its partners the flexibility to evolve the brand easily and efficiently as new technologies and opportunities develop. And, over time, Design Language itself will evolve to cover aspects such as video, illustration and brand communication.
Can a design system work for you?
If your digital experience spans multiple sites and apps, then there’s a very good chance a Design System will help you save time, duplication and time-to-market. And if you work across multiple territories, those chances are even greater. If you’re interested, take a look at the Design Language site and get in touch to chat through your options.
Written by:Rob Wardale
Category:What we think
You may also like
/ 15 Sep 2020
Evolving video to deliver the knockout blow
“Everyone has a plan until they get punched in the mouth”, as Mike Tyson famously put it. At the beginning of the year no one expected to be sharing the ring with a global pandemic, so from a marketeer’s perspective, Covid dealt an unexpected bRead more
/ 28 Aug 2020
Reassessing media planning with The 4R’s
Every agency has a ‘media planning process’ of sorts. They vary in complexity and terminology, but the process tends to follow a similar path. Once the client objectives are defined, the process begins with an insight gathering phase. This informRead more