royal canin
royal canin
royal canin
royal canin
royal canin
royal canin
royal canin
royal canin
royal canin
royal canin
royal canin
royal canin
A design system that deserves a round of a-paws.
Having created and worked with design systems of various sizes at previous companies, I got commissioned as the Lead UI Designer to work on one of Mars Inc’s biggest brands; Royal Canin.
Founded in 1968, Royal Canin is a global leader in pet science, health and nutrition. In an industry that adapts to popular trends, their mission is to deliver the most precise nutritional solution for cats and dogs, tailored to each individual breed, lifestyle, life-stage or medical condition.
The brief
One look and feel to unite all Royal Canin’s digital experiences.
Royal Canin needed a design system that would unify the global digital style for their brand. It would be used to eliminate ambiguity and the need to reinterpret the brand, allowing designers and developers to deliver distinctive, consistent brand experiences, across all of the digital properties, irrespective of device or technology.
What is a design system?
A design system is like a carefully crafted pet-training manual for the digital world. Just as you’d have instructions for teaching tricks to your furry friends, a design system provides the rules, components, and guidelines to ensure your website or app behaves and looks as obedient as a well-trained pooch. It’s the leash that keeps your design elements in check, making sure your user experience is consistently purr-fect.
The key deliverables of the Royal Canin Design System
Foundations
Created foundational guidelines to ensure consistent use of colours, typography, and visual elements, maintaining Royal Canin’s brand identity across all digital platforms.
UI Core Components
Created a reusable UI component kit in Figma containing buttons, forms, cards, and other interface elements, streamlining the development process and ensuring design consistency.
Patterns
Documented pattern recommendations to predefine design solutions for common UI challenges.
Accessibility
Implemented accessibility guidelines for each component to ensure that the design system complies with WCAG standards, making digital products more inclusive for all users.
Iconography
Produced a repository of system icons to ensure consistency and brand identity is flowing through the interface.
Interactive Prototypes
Created interactive prototypes to demonstrate how the design system’s components and patterns should be used in practice, fostering a clear understanding among team members.
Documentation
Clear documentation that assists designers and developers in understanding how to implement the design system effectively, and also to articulate the overarching design philosophy and user experience goals.
Usability Testing
Conducted usability testing to validate the design system’s components and patterns, ensuring they meet user needs and expectations.
Version Control System
Implemented a version control system, enabling easy updates, tracking changes, and ensuring the entire team are working with the latest design assets.
Sustainable global impact
The Royal Canin design system served over 52 market websites across all digital products world-wide, and reduced development costs by more than £85,000 per project.
