The Problem

The primary challenge was to establish design consistency across the Respond.io platform, which lacked a unified design system. The goal was to create a system of reusable elements that would not only improve the visual coherence of the platform but also enhance the efficiency of designers and product managers in creating new designs.

Research and Discovery

Collaboration with developers was pivotal during the research and discovery phase. Together, we identified pain points in the existing design and planned the implementation of a design system. To comprehend the technical aspects, I invested time in learning the basics of JavaScript to understand the Vue.js framework, which developers were using.

Documentation

In this phase, I prioritized the creation of comprehensive technical documentation for the foundations of the design system. This documentation covered key elements such as Logo, Colors, Typography, Spacing, Shadows, Icons, and Border Radius. Establishing clear guidelines for these foundational elements ensured that designers and developers had a unified reference for maintaining consistency across the platform.

Prototyping and Iteration

Within Figma, I crafted interactive prototypes to visualize how the design system elements would function within the Respond.io platform. Implementing a changelog became an integral part of this phase to track all changes made during the iterative process. Feedback loops with developers ensured that the design system aligned with Vue.js principles and provided the intended flexibility for designers. Adjustments were made based on iterative feedback, and the changelog was updated accordingly.

Final Design System Solution

The final design system presented a cohesive set of reusable elements for Respond.io. From buttons to complex components, each element adhered to the established design language and seamlessly integrated with the Vue.js framework. The changelog was a valuable document, providing a detailed history of changes made throughout the design system development. The system was documented comprehensively, providing designers and product managers with guidelines on usage and customization.

Conclusion

The creation of a design system for Respond.io successfully addressed the challenge of inconsistency in the platform's design. The system, crafted through collaboration with developers and a deep understanding of Vue.js, stands as a testament to the power of unified design principles in improving visual coherence and operational efficiency.