Design System for Video Streaming Platform
We have successfully implemented a design system aimed at enhancing development efficiency and consistency in the digital transformation and sales engagement industry. The primary product under consideration is an advanced meeting application that offers seamless audio and video streaming, screen sharing, and robust integration with Amazon Chime services.
Industry:
Digital Transformation
Services:
Front End Development
Location:
California, US
Challenge
The challenge was to establish a design system that maximizes development efficiency, ensures consistency in a dynamic digital transformation and sales engagement landscape, and improves the speed of the Quality Assurance (QA) process.
Solution
In crafting our design system, we've assembled a diverse range of components, built on React and Angular. The transition from available documentation at Docz to a more dynamic Storybook has significantly enhanced clarity and collaboration among team members.
To fortify the reliability of our design system, we integrated automated UI testing through Chromatic, ensuring robustness and a seamless user experience.
In order to align our design system with unique conventions, we introduced the 'OA Automation Middleware' library. This innovation includes special data-test-ids/selectors tailored for QA purposes, creating a system that caters specifically to our team's needs. Moreover, we integrated react.i18next for seamless internationalization, enriching the system with reusable elements and patterns that go beyond the official version, accommodating both Angular and React environments.
Our streamlined product development approach is bolstered by the FE-BE Boilerplate, the foundational framework behind products like Live Meetings and Meeting Dashboards. This robust toolset includes TypeScript, ESLint, unit tests, Storybook for custom components, and seamless Redux integration. Collectively, these initiatives have significantly elevated our development process, resulting in the delivery of feature-rich and consistently high-quality products.
Technologies Used
We have successfully implemented a design system aimed at enhancing development efficiency and consistency in the digital transformation and sales engagement industry.
The workflow
We efficiently showcased our dedication to seamless collaboration and enriched the system with reusable elements. Also, streamlined development with FE-BE Boilerplate emphasized the efficiency and reliability achieved through collaboration.
Comprehensive design system
The development team successfully built a design system comprising a diverse range of components using React and Angular. This design system provides consistency in UI elements and interactions.
From Docz to Storybook
Recognizing the need for a more dynamic and collaborative approach, the decision was made to transition to Storybook. This upgrade aimed to enhance clarity, streamline workflows, and foster better collaboration among team members, ensuring a more effective and efficient development journey.
Automated testing
Integrated Chromatic for automated UI testing to ensure the robustness of the applications and alignment with teams.
Middleware development
Introduced the 'OA Automation Middleware' library to align the design system with unique conventions.
Adoption of FE-BE Boilerplate
Streamlined product development using a comprehensive toolset that includes TypeScript, ESLint, unit tests, Storybook for custom components, and seamless Redux integration.
About the team
The success of this solution can be attributed to the expertise of our frontend developer who took ownership of seamless collaboration between teams. Individual efforts of our expert were instrumental in the successful implementation of the design system and meeting application, showcasing the power of effective collaboration between developers and QA teams.
Team composition
Front-end Developer
1
Impact
Strategic initiatives influenced our development process in this product. Transitioning to Storybook improved clarity and collaboration, making our workflow more streamlined and efficient.
Integrating Chromatic for automated UI testing made our applications more robust and improved collaboration between developers and QA teams. Developing the 'OA Automation Middleware' library aligned our design system with QA conventions and enhanced the precision of our testing processes.
Now this design system ensures efficiency, consistency, and seamless integration, ultimately impacting the continued development and testing processes and user experience.
