AppOmni Design System
As the design system architect and technical project manager, I had the privilege of leading the Bridge-the-Gap team in an 11-month-long collaboration with AppOmni's designers and UI development team. Together, we created an innovative design system that not only ensured a seamless user experience but also brought brand coherence across the entire product range.
Basic Guidelines
One of the cornerstones of our project was the development of comprehensive design system documentation. By formulating clear and concise guidelines, we provided a roadmap for consistent user interfaces and brand representation. These guidelines served as a reference for the designers, ensuring that all future design work adhered to the established principles.
Tokens System
To streamline the design-to-development process, we introduced a design tokens system. Our team assisted the designers in adopting design tokens and aligned them with the component architecture. Despite multiple token modifications during component design and development, the seamless integration between tokens and components facilitated easy updates, minimizing any potential disruptions.
Basic Components Implemented as Web Components
As a testament to our commitment to versatility, we implemented the basic components of the design system as Web Components. These components served as both functional elements within the product and exemplars for future component creation and expansion of the design system. Our choice of Lit as the framework for Web Components ensured compatibility across various JavaScript frameworks.
Library of Components
To provide easy access and version control for the components, we established a versionized library. Leveraging the infrastructure provided by GitHub and utilizing GitHub Actions for continuous integration, we developed and deployed the library with efficiency and precision. The library, distributed as an npm package, is securely hosted on GitHub, ensuring seamless integration into the product(s).
Design System Documentation
To empower AppOmni's designers and developers, we crafted comprehensive documentation within Storybook and Confluence. This documentation covers global design system aspects, token usage, guidelines, and examples of implemented components. Additionally, we incorporated workflows for design system maintenance and future extensions, enabling the team to evolve the system effortlessly.
Streamlined Development Process
With a focus on enhancing efficiency, we set up a robust development process. Our team equipped the project with essential tools, automated processes, and integration capabilities such as continuous testing and continuous delivery. This seamless development pipeline maximized productivity and minimized potential bottlenecks.
Testing with Jest
To ensure the reliability and stability of our components, we implemented rigorous testing using Jest. This comprehensive testing framework allowed us to identify and rectify any issues promptly, guaranteeing a seamless user experience.
Visual Regression Testing
As part of our commitment to perfection, we incorporated visual regression testing into our development workflow. By comparing visual snapshots of components, we could detect any unintended visual changes, ensuring that the design system's integrity was maintained throughout updates and modifications.
Team Trainings and Knowledge Sharing
To foster a culture of continuous learning, our project embraced transparency and knowledge sharing. We conducted team trainings and organized special knowledge-sharing events, ensuring that the expertise gained during the project was effectively communicated to AppOmni's in-house designers and developers.
Design System Integration
As a testament to the success of our project, the design system components seamlessly integrated into AppOmni's extensive product codebase. This integration solidified the impact of our work, as the design system became an integral part of the entire product range, enhancing user experiences and brand consistency.