Crafting a unified design system that scales and aligns with new branding
By: Manuel Cespedes
Crafting a unified design system that scales and aligns with new branding
By: Manuel Cespedes
Crafting a unified design system that scales and aligns with new branding
By: Manuel Cespedes
Design Systems
Interaction Design
UX / UI Design
Prototyping
Research
Company
Microsoft
Company
Microsoft
Role
Product Designer
Role
Product Designer
Team
Design Systems
Team
Design Systems
Dates
Jul 2023 - Ongoing
Dates
Jul 2023 - Ongoing
Overview
I was part of a cross-functional team that redesigned Microsoft’s Marketing Design System, which powers websites like Microsoft.com, Xbox.com, Teams.com, Azure.com, among others.
The team created a unified design system that reduced component redundancy, simplified system architecture, and streamlined brand standards into tokens.The project prioritized scalability, cross-functional collaboration, and inclusive user experiences.
Overview
I was part of a cross-functional team that redesigned Microsoft’s Marketing Design System, which powers websites like Microsoft.com, Xbox.com, Teams.com, Azure.com, among others.
The team created a unified design system that reduced component redundancy, simplified system architecture, and streamlined brand standards into tokens.The project prioritized scalability, cross-functional collaboration, and inclusive user experiences.
Overview
I was part of a cross-functional team that redesigned Microsoft’s Marketing Design System, which powers websites like Microsoft.com, Xbox.com, Teams.com, Azure.com, among others.
The team created a unified design system that reduced component redundancy, simplified system architecture, and streamlined brand standards into tokens.The project prioritized scalability, cross-functional collaboration, and inclusive user experiences.
The previous Microsoft palette had a chrome feel that leaned blue and cool
The previous Microsoft palette had a chrome feel that leaned blue and cool
The previous Microsoft palette had a chrome feel that leaned blue and cool
My Role
As a Senior Product Designer of Microsoft’s Marketing Design System, I led the team in creating tools and guidelines to facilitate the development of design system foundations, components, and patterns.
I collaborated closely with brand, motion, accessibility, copywriting, and engineering teams to ensure consistency, scalability, and adherence to Microsoft's new brand standards.
My Role
As a Senior Product Designer of Microsoft’s Marketing Design System, I led the team in creating tools and guidelines to facilitate the development of design system foundations, components, and patterns.
I collaborated closely with brand, motion, accessibility, copywriting, and engineering teams to ensure consistency, scalability, and adherence to Microsoft's new brand standards.
My Role
As a Senior Product Designer of Microsoft’s Marketing Design System, I led the team in creating tools and guidelines to facilitate the development of design system foundations, components, and patterns.
I collaborated closely with brand, motion, accessibility, copywriting, and engineering teams to ensure consistency, scalability, and adherence to Microsoft's new brand standards.
The new palette offers users definition, flexibility, fluidity, and freedom
The new palette offers users definition, flexibility, fluidity, and freedom
The new palette offers users definition, flexibility, fluidity, and freedom
Background
Since 2011, Microsoft.com was oprerating with 10+ disparate design systems in a single platform, causing:
Inconsistent user experience and weak brand identity
Outdated designs, failing modern user experiences
Inefficient cross-organizational collaboration
This led to a 72.5% bounce rate (40% higher than competitors) and 30% lower user engagement, impacting both user satisfaction and business performance.
I partnered with a design lead, program manager, brand designer, motion designer, template designer, and four products designers. We worked closely with an engineering team, a UX writer, and accessibility experts.
Our broader collaboration involved partnering with organizations across marketing, ecommerce, and cloud teams to drive adoption and alignment.
Background
Since 2011, Microsoft.com was oprerating with 10+ disparate design systems in a single platform, causing:
Inconsistent user experience and weak brand identity
Outdated designs, failing modern user experiences
Inefficient cross-organizational collaboration
This led to a 72.5% bounce rate (40% higher than competitors) and 30% lower user engagement, impacting both user satisfaction and business performance.
I partnered with a design lead, program manager, brand designer, motion designer, template designer, and four products designers. We worked closely with an engineering team, a UX writer, and accessibility experts.
Our broader collaboration involved partnering with organizations across marketing, ecommerce, and cloud teams to drive adoption and alignment.
Background
Since 2011, Microsoft.com was oprerating with 10+ disparate design systems in a single platform, causing:
Inconsistent user experience and weak brand identity
Outdated designs, failing modern user experiences
Inefficient cross-organizational collaboration
This led to a 72.5% bounce rate (40% higher than competitors) and 30% lower user engagement, impacting both user satisfaction and business performance.
I partnered with a design lead, program manager, brand designer, motion designer, template designer, and four products designers. We worked closely with an engineering team, a UX writer, and accessibility experts.
Our broader collaboration involved partnering with organizations across marketing, ecommerce, and cloud teams to drive adoption and alignment.
The new brand language colors captured the essence of Human, Vibrant, and Dimensional
The new brand language colors captured the essence of Human, Vibrant, and Dimensional
The new brand language colors captured the essence of Human, Vibrant, and Dimensional
Results
We delivered a unified design system that improved page consistency, brand cohesion, and overall quality across Microsoft’s marketing websites. We accomplished this by delivering:
Scalable standards
Tokenized brand architecture
Reusable patterns adopted by designers and engineers across multiple orgs.
We reduced redundant components by 40%, improving system maintainability and user adoption.
We strengthened partnerships between design, engineering, and brand teams through clear documentation and co-creation processes.
Results
We delivered a unified design system that improved page consistency, brand cohesion, and overall quality across Microsoft’s marketing websites. We accomplished this by delivering:
Scalable standards
Tokenized brand architecture
Reusable patterns adopted by designers and engineers across multiple orgs.
We reduced redundant components by 40%, improving system maintainability and user adoption.
We strengthened partnerships between design, engineering, and brand teams through clear documentation and co-creation processes.
Results
We delivered a unified design system that improved page consistency, brand cohesion, and overall quality across Microsoft’s marketing websites. We accomplished this by delivering:
Scalable standards
Tokenized brand architecture
Reusable patterns adopted by designers and engineers across multiple orgs.
We reduced redundant components by 40%, improving system maintainability and user adoption.
We strengthened partnerships between design, engineering, and brand teams through clear documentation and co-creation processes.
Challenge
Moray was no longer aligned with Microsoft’s new brand personality and principles. Components had been added without proper vetting, leading to redundancies and a fragmented architecture.
Partnering teams were using different systems or creating their own extensions of the system, causing inconsistencies and inefficiencies across Microsoft’s web experiences.
Challenge
Moray was no longer aligned with Microsoft’s new brand personality and principles. Components had been added without proper vetting, leading to redundancies and a fragmented architecture.
Partnering teams were using different systems or creating their own extensions of the system, causing inconsistencies and inefficiencies across Microsoft’s web experiences.
Challenge
Moray was no longer aligned with Microsoft’s new brand personality and principles. Components had been added without proper vetting, leading to redundancies and a fragmented architecture.
Partnering teams were using different systems or creating their own extensions of the system, causing inconsistencies and inefficiencies across Microsoft’s web experiences.
DISCOVERY
DISCOVERY
DISCOVERY
PHASE 1 / DISCOVERY / 01
Listening Tours
•
I participated in discovery sessions with designers, developers, and PMs across partnering teams.
•
I helped surface user goals and pain-points, and uncovered business opportunities.
•
I gathered insights from the "listening tour" sessions and shared them with the team.
PHASE 1 / DISCOVERY / 01
Listening Tours
•
I participated in discovery sessions with designers, developers, and PMs across partnering teams.
•
I helped surface user goals and pain-points, and uncovered business opportunities.
•
I gathered insights from the "listening tour" sessions and shared them with the team.
PHASE 1 / DISCOVERY / 01
Listening Tours
•
I participated in discovery sessions with designers, developers, and PMs across partnering teams.
•
I helped surface user pain points and business opportunities.
•
I gathered insights from the sessions and shared them with the team.
PHASE 1 / DISCOVERY / 02
System Audits
•
As I learned about the various systems and tools in the ecosystem, I documented my learnings and shared them via spreadsheets.
•
I lead a team to audit Moray’s components and patterns, along with that of two other partnering systems to identify redundancies, inconsistencies, and outdated patterns
PHASE 1 / DISCOVERY / 02
System Audits
•
As I learned about the various systems and tools in the ecosystem, I documented my learnings and shared them via spreadsheets.
•
I lead a team to audit Moray’s components and patterns, along with that of two other partnering systems to identify redundancies, inconsistencies, and outdated patterns
PHASE 1 / DISCOVERY / 02
System Audits
•
As I learned about the various systems and tools in the ecosystem, I documented my learnings and shared them via spreadsheets.
•
I lead a team to audit Moray’s components and patterns, along with that of two other partnering systems to identify redundancies, inconsistencies, and outdated patterns
PHASE 1 / DISCOVERY / 03
Component Audits
•
We created a component inventory board to categorize components by function and use
•
We mapped component similarities, areas of opportunity, and variations to guide consolidation efforts
PHASE 1 / DISCOVERY / 03
Component Audits
•
We created a component inventory board to categorize components by function and use
•
We mapped component similarities, areas of opportunity, and variations to guide consolidation efforts
PHASE 1 / DISCOVERY / 03
Component Audits
•
We created a component inventory board to categorize components by function and use
•
We mapped component similarities, areas of opportunity, and variations to guide consolidation efforts
DEFINE
DEFINE
DEFINE
PHASE 2 / DIFINITION / 01
Component Analysis
•
We prioritized core components for modernization based on business impact, usage data, and brand criticality.
•
We partnered with engineering leads to scope technical feasibility and estimate effort for refactoring vs. rebuilding.
PHASE 2 / DIFINITION / 01
Component Analysis
•
We prioritized core components for modernization based on business impact, usage data, and brand criticality.
•
We partnered with engineering leads to scope technical feasibility and estimate effort for refactoring vs. rebuilding.
PHASE 2 / DIFINITION / 01
Component Audits
•
We prioritized core components for modernization based on business impact, usage data, and brand criticality.
•
We partnered with engineering leads to scope technical feasibility and estimate effort for refactoring vs. rebuilding.
PHASE 2 / DIFINITION / 02
Project Scope
•
Our key work-streams were brand realignment, tool creation, component development, tokenization, and documentation strategy.
•
We created a phased roadmap balancing short-term wins (base components) with long-term foundation investments.
PHASE 2 / DIFINITION / 02
Project Scope
•
Our key work-streams were brand realignment, tool creation, component development, tokenization, and documentation strategy.
•
We created a phased roadmap balancing short-term wins (base components) with long-term foundation investments.
PHASE 2 / DIFINITION / 02
Component Audits
•
Our key work-streams were brand realignment, tool creation, component development, tokenization, and documentation strategy.
•
We created a phased roadmap balancing short-term wins (base components) with long-term foundation investments.
DESIGN
DESIGN
DESIGN
PHASE 3 / DESIGN / 01
Template Creation
•
I developed a standardized creation template for new and updated components, ensuring every component included specs for structure, behavior, accessibility, anatomy, theming, states, and design tokens.
•
I integrated AI-assisted documentation and token generation tools to improve authoring speed and efficiency.
PHASE 3 / DESIGN / 01
Template Creation
•
I developed a standardized creation template for new and updated components, ensuring every component included specs for structure, behavior, accessibility, anatomy, theming, states, and design tokens.
•
I integrated AI-assisted documentation and token generation tools to improve authoring speed and efficiency.
PHASE 3 / DESIGN / 01
Component Audits
•
I developed a standardized creation template for new and updated components, ensuring every component included specs for structure, behavior, accessibility, anatomy, theming, states, and design tokens.
•
I integrated AI-assisted documentation and token generation tools to improve authoring speed and efficiency.
PHASE 3 / DESIGN / 02
Iteration & Feedback
•
I led iterative design cycles with weekly crits involving partner teams, engineering, brand, and accessibility stakeholders.
•
I validated new components through usability testing, internal dogfooding, and feedback from early adopter teams.
•
I incorporated accessibility, localization, and motion design considerations from the outset.
PHASE 3 / DESIGN / 02
Iteration & Feedback
•
I led iterative design cycles with weekly crits involving partner teams, engineering, brand, and accessibility stakeholders.
•
I validated new components through usability testing, internal dogfooding, and feedback from early adopter teams.
•
I incorporated accessibility, localization, and motion design considerations from the outset.
PHASE 3 / DESIGN / 02
Component Audits
•
I led iterative design cycles with weekly crits involving partner teams, engineering, brand, and accessibility stakeholders.
•
I validated new components through usability testing, internal dogfooding, and feedback from early adopter teams.
•
I incorporated accessibility, localization, and motion design considerations from the outset.
DELIVER
DELIVER
DELIVER
PHASE 4 / DELIVER / 01
Documentation
•
We authored comprehensive documentation for each component, pattern, and foundation, providing usage guidelines, token integration, and accessibility checklists.
•
We created visual system maps and Figma libraries that aligned with the component library, making onboarding and scaling easier.
PHASE 4 / DELIVER / 01
Documentation
•
We authored comprehensive documentation for each component, pattern, and foundation, providing usage guidelines, token integration, and accessibility checklists.
•
We created visual system maps and Figma libraries that aligned with the component library, making onboarding and scaling easier.
PHASE 4 / DELIVER / 01
Documentation
•
We authored comprehensive documentation for each component, pattern, and foundation, providing usage guidelines, token integration, and accessibility checklists.
•
We created visual system maps and Figma libraries that aligned with the component library, making onboarding and scaling easier.
PHASE 4 / DELIVER / 02
Development
•
We partnered closely with engineering to ensure pixel-perfect component builds aligned with specifications.
•
We built and launched a versioned system site with automated changelogs and adoption guides to support users migrating from legacy Moray.
PHASE 4 / DELIVER / 02
Development
•
We partnered closely with engineering to ensure pixel-perfect component builds aligned with specifications.
•
We built and launched a versioned system site with automated changelogs and adoption guides to support users migrating from legacy Moray.
PHASE 4 / DELIVER / 02
Development
•
We partnered closely with engineering to ensure pixel-perfect component builds aligned with specifications.
•
We built and launched a versioned system site with automated changelogs and adoption guides to support users migrating from legacy Moray.
mgcesp@gmail.com
+1 786.351.1255
Thank you for visiting ✌️
Built with 💪
mgcesp@gmail.com
+1 786.351.1255
Thank you for visiting ✌️
Built with 💪
mgcesp@gmail.com
+1 786.351.1255
Thank you for visiting ✌️
Built with 💪