Canvas “House of Brands” Architecture
Canvas Agnostic Design System
Project Overview: I led a project to consolidate multiple brands onto a unified platform, creating a versatile design system, Canvas, that scaled across seven global brands. This initiative unified the user experience while maintaining each brand's distinct identity. By implementing this design system, VF Corp avoided over $1.3 million in quarterly accessibility fines, boosted cart and checkout conversion rates, improved site performance ratings, and raised the average order value (AOV) across all brands.
Challenges:
Brand Consistency: Ensuring each brand retained its distinct visual and functional identity while integrating into a unified platform.
Scalability: Developing a design system that could adapt to the needs of seven diverse brands.
Collaboration: Coordinating with multiple stakeholders, including brand managers, designers, and developers across different regions.
Approach:
Research & Discovery: Conducted extensive research to understand each brand’s core values, user base, and design language.
Design System Development: Created a flexible design system with reusable components, guidelines, and templates. This system was built to be scalable and adaptable, ensuring consistency and efficiency.
Prototyping & Testing: Developed prototypes and conducted user testing to gather feedback and refine the design system.
Collaboration: Worked closely with development teams to ensure seamless implementation. Regular workshops and meetings were held to align on goals and progress.
Outcome:
Unified Platform: Successfully launched a unified platform that enhanced user experience and streamlined operations.
Scalable Design System: The design system scaled effectively across all seven brands, providing a consistent yet customizable user experience.
Improved Efficiency: The reusable components and guidelines significantly reduced design and development time, leading to faster project turnaround.
The Power of Figma Variables
Below is an example of how Figma variables can be used to switch between different brands' UI templates, including typography, brand colors, button styling, and more.
Canvas PDP
Timberland on Canvas
Vans on Canvas
The North Face on Canvas
Design System Documentation Examples
The Design System documentation is a key resource that outlines the components and guidelines for Canvas. It serves as a single source of truth for designers, developers, and product owners, ensuring alignment on design language and user experience.
