Design system updates

When I joined the Nextiva team, I discovered that they had a well-developed design system, but only a small number of the components were designed to be responsive. Additionally, the majority of page layouts did not have auto-layout applied, and breakpoint parameters were poorly defined.

I discovered that every designer had their own page and canvas setup, which made it difficult to reuse designs for other needs.
The majority of pages were not responsive due to the lack of auto-layout or standardized page-level templates, and it was time-consuming to adjust the size and scale of other designers’ pages and canvases.
Additionally, the spacing system was supposed to use increments of 8 (e.g., 8, 16, 24, 32), but in reality, I found a variety of spacing sizes across different designs.

As one of the design system admins, I introduced a set of responsive templates and layouts along with examples of use and documentation.
I also coached other designers on how to use these responsive templates and introduced space components to the design system, which were adopted by the design team.
I was a design system contributor and actively participated in weekly design system meetings.
In this role, I rebuilt multiple components to make them responsive and constrained.

To address the issues with inconsistent spacing between elements, components, etc., it was decided to use only space components with pre-defined parameters and support for spec mode. This helped to ensure consistency and reduce the risk of errors in the design process.
To solve the issue of inconsistent auto-layout usage across pages and layouts, it was decided to create responsive page layouts for all major experiences and provide detailed documentation. This documentation included guidelines for defining breakpoint sizes, panel behavior, spec mode, hi-fi, and wireframe variations for each canvas type. This helped to ensure that all designers were using the same auto-layout standards and reduced the risk of errors in the design process.
The entire design team came to understand and accept the importance of building responsive templates and following atomic design principles while building components. This helped to ensure that our designs were consistent, efficient, and easy to maintain.

The adoption of the spacer component helped to increase the consistency of our designs, as it ensured that all designers were using the same spacing standards.
The adoption of responsive templates helped to increase the consistency of layout appearances and changed the approach to building components and experiences. This made it easier to create designs that looked good on a variety of devices and reduced the risk of errors in the design process.
The adoption of responsive templates and spacer components helped to increase the quality of smaller components and elements. For example, when inserting a non-responsive component (such as a video meeting section) into a responsive page template and scaling it, the imperfections of the component become immediately apparent. This made it easier to identify and fix issues in the design process, resulting in higher quality designs overall.
The introduction of new components that supported spacers with specified parameters significantly improved the QA process and eliminated the need for inspector mode in some cases. This made it easier to identify and fix issues with spacing and layout, resulting in higher. quality designs overall.
The introduction of responsive templates, spacer components, and other improvements significantly improved the performance of the design team. These changes helped to increase the consistency and quality of our designs, streamline the design process, and reduce the risk of errors.

For some team members, the transition from static components and page layouts to responsive ones seemed challenging at first. However, with the proper training and support, they were able to successfully adapt to the new design standards and improve the quality of their work.