B2B
B2B
Enterprise
Enterprise
Design System
Design System
UI Design
UI Design
Brand Consistency
Brand Consistency
Modular Design
Conversion Optimization
Unifying A Digital Brand: A Scalable Design System
Created a scalable design system to unify Wood Mackenzie’s digital brand, streamline updates, and improve collaboration across design and development.
Created a scalable design system to unify Wood Mackenzie’s digital brand, streamline updates, and improve collaboration across design and development.
Created a scalable design system to unify Wood Mackenzie’s digital brand, streamline updates, and improve collaboration across design and development.
Client: Wood Mackenzie | Role: Creative Director & UX/UI Designer | Project Duration: 6 weeks to ship
Client: Wood Mackenzie | Role: Creative Director & UX/UI Designer | Project Duration: 6 weeks to ship
Client: Wood Mackenzie
Role: Creative Director & UX/UI Designer
Project Duration: 6 weeks to ship
Client: Wood Mackenzie | Role: Creative Director & UX/UI Designer
Project Duration: 6 weeks to ship
The Challenge
The Challenge
The Challenge
After multiple brand refreshes and acquisitions, Wood Mackenzie’s website had inconsistent styles, outdated components, and fragmented branding, slowing updates and misaligning user experiences.
After multiple brand refreshes and acquisitions, Wood Mackenzie’s website had inconsistent styles, outdated components, and fragmented branding, slowing updates and misaligning user experiences.
After multiple brand refreshes and acquisitions, Wood Mackenzie’s website had inconsistent styles, outdated components, and fragmented branding, slowing updates and misaligning user experiences.
The Solution
The Solution
The Solution
Led the creation of a comprehensive design system:
Led the creation of a comprehensive design system:
Led the creation of a comprehensive design system:
Audited current components and identified gaps
Audited current components and identified gaps
Audited current components and identified gaps
Developed a temporary “Design System Light” for immediate consistency
Developed a temporary “Design System Light” for immediate consistency
Developed a temporary “Design System Light” for immediate consistency
Integrated with Storybook for live documentation and testing
Integrated with Storybook for live documentation and testing
Integrated with Storybook for live documentation and testing
Defined clear CSS guidelines to future-proof updates
Defined clear CSS guidelines to future-proof updates
Defined clear CSS guidelines to future-proof updates
Key Outcomes
Key Outcomes
Key Outcomes
Unified and modernized brand identity across digital platforms
Unified and modernized brand identity across digital platforms
Unified and modernized brand identity across digital platforms
Faster development and design handoffs
Faster development and design handoffs
Strong foundation for continuous improvements and consistent branding
Strong foundation for continuous improvements and consistent branding
Faster time-to-market for new content
Clearer UX and brand-aligned visuals
My Role
My Role
My Role
Creative Direction & UI Design – Led the UX strategy and design system development, working with developers to integrate and scale the system.
Creative Direction & UI Design – Led the UX strategy and design system development, working with developers to integrate and scale the system.
Constraints
Constraints
Constraints
Outdated components and no unified system
Outdated components and no unified system
Needed to align with brand guidelines and existing tech limitations
Needed to align with brand guidelines and existing tech limitations
Skills Used 🔧
Skills Used 🔧
Skills Used 🔧
UX Strategy
UX Strategy
Design Systems
Design Systems
UI Design
UI Design
Cross-Functional Collaboration
Cross Collaboration
Design-to-Dev Handoff
Design-to-Dev Handoff
Collaboration 🤝
Collaboration 🤝
Collaboration 🤝
Internal design team
Internal design team
WM developers for integration and CSS alignment
WM developers for integration and CSS alignment
Tools Used
Tools Used
Tools Used
Figma · Storybook · Dovetail
Figma · Storybook · Dovetail
Design System Lite
The first step in building the design system was auditing all existing styles and components on woodmac.com to identify inconsistencies and gaps.
Design System Manager
We brought the design system outside of Figma into a platform accessible to both development and global teams, ensuring brand alignment.
