Manychat Design System

To enchance Manychat's design system, our team provided experienced engineering support, focusing on delivering new components, optimizing processes, and integrating our work into Manychat's product.

Our team was:

• Varya Stepanova: Design System Architect and Lead Developer
• Irina Samoylova: Senior UI Engineer
• Alexandra Urberg: UI Engineer

Component Development and Integration

• Developed a variety of new components, including foundational form elements
• Ensured consistent look and feel across the design system
• Facilitated smooth adoption of components into Manychat's product
• Gained valuable insights into compatibility challenges through direct involvement in component adoption

Component Definition and Alignment Process

• Conducted in-depth industry research for each new component
• Compiled and presented research findings to team members and stakeholders
• Ensured full alignment between design and technical leads before development
• Implemented a thorough component definition process, fostering collaborative decision-making

Accessibility Enhancement

• Prioritized accessibility in all aspects of component design and implementation
• Defined comprehensive accessibility features and requirements for each component
• Provided implementation examples and testing guidelines
• Integrated accessibility add-ons into Storybook to maintain ongoing a11y compliance

Quality Assurance and Code Review

• In collaboration with Manychat’s internal team, we implemented rigorous testing standards, including snapshots, functional tests, and accessibility checks
• Ensured consistent API design across the entire design system

Documentation and Storybook Upgrades

• Upgraded Storybook from version 6 to 8, improving documentation capabilities
• Implemented structured, code-generated documentation for all new components
• Created well-defined interfaces prior to implementation, providing clear direction for testing and adoption

Collaboration and Process Optimization

• Held weekly syncs with Manychat's tech lead and design system designer Conducted frequent ad-hoc alignments through various channels (video calls, chat, Figma comments)
• Shared expertise on design system management, stakeholder engagement, and adoption strategies

Our work enhanced Manychat's design system, introducing new components, improving accessibility, and establishing robust processes for ongoing system development and maintenance. By focusing on thorough research, collaborative definition, and quality implementation, we not only delivered immediate improvements but also set a foundation for sustainable design system growth at Manychat.

This project showcases Bridge the Gap's ability to seamlessly integrate with existing teams, provide high-quality development support, and implement best practices in design system management.