Design System Case Study
Overview
Under my direction, my team embarked on a transformative redesign of the Design System for the Omni platform, a comprehensive SaaS solution supporting diverse capabilities and user needs. The initiative aimed to resolve inconsistencies, enable scalability, and strengthen adoption of development teams across the organization. This case study explores the strategic methodologies, challenges, and outcomes of the redesign effort.
My Role
As Director, I oversaw the redesign efforts and execution of the transition from one pattern library to another. With a small semi-dedicated design system team, we organized a timeline for the year to deliver a new and updated library – guides and implementation included. I led explorations of color palette, pattern testing, and accessibility testing, and then communicated those findings and subsequent strategy to stakeholders and leadership. We succeeded, and substantially raised adoption.
Problem Statement
The legacy Design System had evolved piecemeal over time, resulting in several critical shortcomings:
Inconsistencies: Divergent implementation of visual and interaction patterns, such as mismatched button styles; varying navigation behaviors; and inconsistent typography choices compromised the platform’s cohesiveness.
Scalability Constraints: The system struggled to support the growing complexity of Omni’s expanding features and functionalities.
Designer-Developer Disparity: Gaps in documentation and communication led to inefficiencies and inconsistencies in implementation.
User Experience Fragmentation: Lack of uniformity prevented a seamless and intuitive user journey across the platform, which caused inconsistent adoption of the Omni UX/UI for external teams.
Our Goals
Achieve Consistency: Develop and implement a unified design language and comprehensive component library. A unified design language provides standardized principles and guidelines for typography, color schemes, spacing, and interaction patterns, ensuring coherence across all Omni interfaces.
Enhance Scalability: Build a design system capable of accommodating the rapid growth and evolving needs of the Omni platform and the varying new capabilities that arise with client needs.
Foster Interdisciplinary Collaboration: Establish shared frameworks and tools to improve alignment between design and development teams.
Streamline Efficiency: Optimize workflows to reduce design-to-development cycle times.
Ensure Accessibility: Elevate all components to meet or exceed WCAG 2.1 AA accessibility standards.
Process & execution
Discovery and Research
Conducted interviews with stakeholders/Product owners to identify pain points and align on priorities.
Performed a comprehensive audit of Omni’s existing UI components and patterns.
Analyzed user feedback to pinpoint inconsistencies and areas for improvement.
Strategic Framework Development
Defined core principles to guide the redesign: clarity, modularity, accessibility, and cohesion.
Established governance mechanisms to ensure the Omni Design System remains adaptable and sustainable.
Contribution and Governance Workflow
Design Execution
Crafted a cohesive visual identity reflecting Omni’s brand while shifting the UI to a more accessible palette and user experience.
Produced extensive documentation detailing component specifications, usage scenarios, accessibility guidelines, and integrated links to code snippets.
Development Implementation
Engineered framework-agnostic components to enable seamless integration across Omni’s various products.
Utilized Storybook for interactive previews and Figma for collaborative design iteration.
Conducted rigorous performance, usability, and accessibility testing to validate all components.
Deployment and Adoption
Piloted the redesigned system with a single Omni product team, gathering critical feedback to address gaps in documentation clarity and component adaptability. These insights informed refinements to ensure smoother adoption across other teams.
Began a staggered rollout of the Omni Design System across all product lines to minimize disruption.
Provided targeted training sessions and onboarding materials to facilitate team proficiency and adoption.
Challenges
Cross-Team Alignment: Securing alignment across Omnicom’s diverse product and development teams required proactive communication and sustained advocacy.
Transitioning Legacy Components: Retiring outdated elements while maintaining continuity in development posed significant challenges.
Resource Optimization: Balancing the redesign initiative with ongoing Omni platform development required meticulous planning and prioritization.
Outcomes
Enhanced Consistency: The unified design language established a cohesive and intuitive user experience throughout the Omni platform.
Operational Efficiency: The design-to-development cycle times decreased by 25%, accelerating the platform’s product lifecycle.
Scalable Architecture: The modular Omni Design System allowed for rapid integration of new features, supporting agile development practices.
Collaborative Synergy: Shared tools and comprehensive documentation reduced miscommunication and improved collaboration between designers and developers.
Elevated Accessibility: WCAG 2.1 AA compliance improved usability for all Omni platform users, including those with disabilities.
What these efforts create
Design system Adoption
25%
Increase in Adoption
Within the first 6 months.
Continued efforts
As the organization centralizes all capabilities under one agency, we have continued adoption assessments with external teams, assisting them in adjusting roadmaps to account for development efforts to align with Omni standards. Internally, the team continues to explore enhancements and new patterns as we expand new capabilities and collect feedback on existing experiences. I lead a monthly review to ensure our design roadmap is up to date. We have weekly meetings with our Omni UI development team to align and discuss new patterns.