Skip to content

Commit

Permalink
Manychat case
Browse files Browse the repository at this point in the history
  • Loading branch information
varya committed Dec 22, 2024
1 parent fb788c2 commit 3d471e2
Showing 1 changed file with 58 additions and 0 deletions.
58 changes: 58 additions & 0 deletions content/projects/manychat/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: Manychat Design System
date: 2024-12-31
description: >
Revamped Manychat's design system through extensive component architecture and documentation upgrades. The project delivered 16 new React components, accessibility-driven refactoring, Storybook 8 migration, and established a strong design system community. The collaboration between Bridge the Gap and Manychat's team resulted in a scalable foundation for form elements and an improved developer experience through ultra-defined components.
---

To enchance [Manychat](https://manychat.com/)'s design system, [Bridge-the-Gap](https://bridge-the-gap.dev/) team and I 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](https://bridge-the-gap.dev/)'s ability to seamlessly integrate with existing teams, provide high-quality development support, and implement best practices in design system management.

0 comments on commit 3d471e2

Please sign in to comment.