Select experience from my time building and leading design system teams
In my prior roles, I’ve spearheaded the development and implementation of comprehensive design systems at multiple companies. These experiences have not only honed my skills in UX design and user research but also, leadership and strategic planning. This case study describes two notable projects: the improvement of the Flywheel design system at WP Engine and the creation of the CompanyCam Slab design system.
WP Engine: Flywheel Design System
Context & Challenges
At WP Engine, including its subsidiary Flywheel, I was tasked with improving the accessibility of an existing design system. While the design system provided a unified framework, it lacked comprehensive accessibility features, leading to potential usability issues for diverse user groups.
Objectives
Enhance the accessibility of the existing design system; ensure compliance with WCAG (Web Content Accessibility Guidelines).
Improve design consistency across all products.
Streamline the design and development workflow.
Enhance the usability and inclusivity of the products.
Approach
Accessibility Audit
Conducted a thorough audit of the current design system to identify accessibility gaps.
Collaborated with accessibility experts to understand the specific needs and requirements.
Enhancing Design Components
Updated UI components to meet accessibility standards, including color contrast, keyboard navigation, and screen reader compatibility.
Integrated accessibility tools such as Stark to check and improve the accessibility of design elements.
Documentation & Guidelines
Created detailed accessibility guidelines and best practices to be included in the design system documentation.
Developed resources and training materials to educate teams on the importance of accessibility and how to implement it effectively.
Testing & Validation
Conducted user testing with individuals with disabilities to validate the effectiveness of the accessibility improvements.
Used automated tools and manual testing to ensure compliance with accessibility standards.
Implementation & Rollout
Created detailed documentation and guidelines to facilitate the adoption of the design system.
Conducted training sessions to onboard teams and ensure proper usage.
Established a governance model to maintain and evolve the design system.
Impact
Significantly improved the accessibility of the design system, ensuring a more inclusive user experience.
Enhanced compliance with WCAG, reducing the risk of accessibility-related issues.
Reduced support tickets related to accessibility.
Fostered a culture of accessibility within the organization, leading to more user-centric design practices.
Further Reading
Want to read more about how we collaborated and how I led designers to make this meaningful change? Check out these stories:
Accessibility Improvements Presentation
CompanyCam: Slab Design System and Storybook Site
Context & Challenges
At CompanyCam, the goal was to build a robust design system, named Slab, and a documentation site to showcase the design components to teach new and existing CoCammers to use Slab appropriately. The existing design and development process lacked standardization, leading to inconsistencies and increased workload.
Objectives
Create a scalable and maintainable design system.
Ensure consistency and efficiency in the design and development process.
Document the design system comprehensively for ease of use.
Approach
Research & Planning
Conducted a thorough audit of existing design assets and processes.
Identified key areas of improvement and opportunities for standardization.
Design System Creation
Developed a modular design system with reusable components.
Used Figma to design and prototype the components, ensuring they adhered to the design principles.
Focused on designing for inclusivity and accessibility.
Storybook Site Development
Created a Storybook site to document and showcase components for devs, and a website to explain design patterns and appropriate component usage for designers.
Ensured the documentation was clear, comprehensive, and easily accessible to all team members.
Training & Adoption
Conducted workshops and training sessions to onboard teams to the new design system.
Provided continuous support and updates to ensure successful adoption.
Impact
Significantly reduced design and development inconsistencies, including documented design debt.
Increased efficiency and productivity within the design and development teams.
Enhanced user experience through a consistent and cohesive design language.
Further Reading
See the beginnings of the new Slab docs site.
Love in the Slack channel for Slab
Slab quarterly goals
Love during a company All Hands for Slab
Conclusion
My experiences at WP Engine and CompanyCam have been instrumental in refining my skills in building and leading design system teams. By establishing unified design languages, improving efficiency, and enhancing user experiences, I have demonstrated the value of a well-implemented design system. These projects highlight my ability to lead cross-functional teams, drive strategic initiatives, and create impactful design solutions.