My Role
As a supporting designer, I worked closely with the lead designer to develop and refine design elements within the established framework. I contributed to the creation and maintenance of documentation for design components, patterns, and guidelines, ensuring clarity and consistency throughout the project. Additionally, I provided support to team members in adopting and applying the design system effectively.
Deliverables
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.
Iconography
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.
Patterns
Documented pattern recommendations to predefine design solutions for common UI challenges.
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.
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.
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.
Business Challenges
Balancing global consistency with regional variations and preferences.
Encouraging widespread adoption and adherence to the design system.
Ensuring continuous evolution to keep the system updated.
Striking the right balance between flexibility and consistency in design implementation.
Takeaways
Key lessons from the Royal Canin design system project emphasize collaboration for success, user-centric iterative development, empowerment for innovation, and clear documentation for adoption and consistency.
Goal
Establish a unified digital style to harmonize Royal Canin's global brand presence.
Create clear design guidelines to eliminate ambiguity and ensure consistent interpretation.
Enable designers and developers to deliver consistent brand experiences across all digital platforms.
Streamline workflows by providing reusable components and patterns within the design system.
Foster collaboration between design and development teams through a shared framework.
Ensure scalability and adaptability to support future digital growth and technological advancements.
Overview
Developing a Unified Design System for Royal Canin
My Role
product Designer
Duration
Oct 2019 - Jan 2020
B2B
B2C
Website
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.
Problem
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.
Result
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.
My Process
In developing a comprehensive design system for Royal Canin, my process involved several key stages; This structured approach ensured the creation of a cohesive, user-friendly design system that aligns with Royal Canin’s brand identity and enhances the overall user experience across all digital touchpoints
Research and Discovery
Conducted research on Royal Canin's brand and user needs.
Engaged with stakeholders to align on goals and objectives.
Audit and Component Design
Audited existing design assets to identify inconsistencies.
Developed a library of reusable UI components with clear guidelines for typography, colors, and icons.
Documentation and Testing
Created detailed documentation for designers and developers.
Conducted usability testing and iterated based on feedback to ensure usability and accessibility.
Implementation and Maintenance
Collaborated with development teams for seamless integration.
Provided training for smooth adoption and established a governance model for ongoing updates and maintenance.
Overview
Developing a Unified Design System for Royal Canin
My Role
Product Designer
Duration
Oct 2019 - Jan 2020
B2B
B2C
Website
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.
Problem
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.
Result
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.
Goal
Establish a unified digital style to harmonize Royal Canin's global brand presence.
Create clear design guidelines to eliminate ambiguity and ensure consistent interpretation.
Enable designers and developers to deliver consistent brand experiences across all digital platforms.
Streamline workflows by providing reusable components and patterns within the design system.
Foster collaboration between design and development teams through a shared framework.
Ensure scalability and adaptability to support future digital growth and technological advancements.
My Role
As a supporting designer, I worked closely with the lead designer to develop and refine design elements within the established framework. I contributed to the creation and maintenance of documentation for design components, patterns, and guidelines, ensuring clarity and consistency throughout the project. Additionally, I provided support to team members in adopting and applying the design system effectively.
Business Challenges
Balancing global consistency with regional variations and preferences.
Encouraging widespread adoption and adherence to the design system.
Ensuring continuous evolution to keep the system updated.
Striking the right balance between flexibility and consistency in design implementation.
My Process
In developing a comprehensive design system for Royal Canin, my process involved several key stages; This structured approach ensured the creation of a cohesive, user-friendly design system that aligns with Royal Canin’s brand identity and enhances the overall user experience across all digital touchpoints
Research and Discovery
Conducted research on Royal Canin's brand and user needs.
Engaged with stakeholders to align on goals and objectives.
Audit and Component Design
Audited existing design assets to identify inconsistencies.
Developed a library of reusable UI components with clear guidelines for typography, colors, and icons.
Documentation and Testing
Created detailed documentation for designers and developers.
Conducted usability testing and iterated based on feedback to ensure usability and accessibility.
Implementation and Maintenance
Collaborated with development teams for seamless integration.
Provided training for smooth adoption and established a governance model for ongoing updates and maintenance.
Deliverables
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.
Iconography
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.
Patterns
Documented pattern recommendations to predefine design solutions for common UI challenges.
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.
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.
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.
Takeaways
Key lessons from the Royal Canin design system project emphasize collaboration for success, user-centric iterative development, empowerment for innovation, and clear documentation for adoption and consistency.
Content
Overview
Developing a Unified Design System for Royal Canin
My Role
Product Designer
Duration
Oct 2019 - Jan 2020
B2B
B2C
Website
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.
Problem
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.
Result
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.
My Role
As a supporting designer, I worked closely with the lead designer to develop and refine design elements within the established framework. I contributed to the creation and maintenance of documentation for design components, patterns, and guidelines, ensuring clarity and consistency throughout the project. Additionally, I provided support to team members in adopting and applying the design system effectively.
Business Challenges
Balancing global consistency with regional variations and preferences.
Encouraging widespread adoption and adherence to the design system.
Ensuring continuous evolution to keep the system updated.
Striking the right balance between flexibility and consistency in design implementation.
Goals
Establish a unified digital style to harmonize Royal Canin's global brand presence.
Create clear design guidelines to eliminate ambiguity and ensure consistent interpretation.
Enable designers and developers to deliver consistent brand experiences across all digital platforms.
Streamline workflows by providing reusable components and patterns within the design system.
Foster collaboration between design and development teams through a shared framework.
Ensure scalability and adaptability to support future digital growth and technological advancements.
My Process
In developing a comprehensive design system for Royal Canin, my process involved several key stages; This structured approach ensured the creation of a cohesive, user-friendly design system that aligns with Royal Canin’s brand identity and enhances the overall user experience across all digital touchpoints
Research and Discovery
Conducted research on Royal Canin's brand and user needs.
Engaged with stakeholders to align on goals and objectives.
Audit and Component Design
Audited existing design assets to identify inconsistencies.
Developed a library of reusable UI components with clear guidelines for typography, colors, and icons.
Documentation and Testing
Created detailed documentation for designers and developers.-
Conducted usability testing and iterated based on feedback to ensure usability and accessibility.
Implementation and Maintenance
Collaborated with development teams for seamless integration.
Provided training for smooth adoption and established a governance model for ongoing updates and maintenance.
Deliverables
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.
Iconography
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.
Patterns
Documented pattern recommendations to predefine design solutions for common UI challenges.
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.
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.
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.
Takeaways
Key lessons from the Royal Canin design system project emphasize collaboration for success, user-centric iterative development, empowerment for innovation, and clear documentation for adoption and consistency.