Design System for an enterprise SaaS product suite
Roles and Responsibilities
Worked with a team of six designers in developing a comprehensive design system featuring over 2000+ design components, ensuring consistency and efficiency in design workflows.
Engaged with stakeholders to elicit requirements, facilitating effective collaboration throughout the wireframing, visual design, and prototyping phases.
Coordinated the development process, ensuring seamless collaboration between the developers and designers for delivery of milestones.
Team
Mahalakshmi, Vaishnavi, Noyal Claiton, Vignesh, Shwetha, Adarshya
Timeline
September - December 2021 (4 months)
Platform
Web Application
Tools
Figma
Zeplin
Confluence
Overview
Vue.ai AI is an AI-powered e-commerce suite of products that helps retailers optimize shopper journeys to achieve business goals while offering personalized and relevant content matched to every individual shopperʼs style preference across channels.
Background
The company offered 5 products specializing in data processing, image recognition and tagging, fashion recommendation curation, personalized user journeys, A/B testing, analytics, and virtual dressing rooms.
Each product followed its own design language, leading customers to perceive them as distinct offerings. We aimed to consolidate them into a unified e-commerce suite and establish consistent design guidelines across all products.
Scope and Considerations
As a small design team, we had to balance our time between developing the Design System and managing rapid UX tasks. The Design System needed to scale quickly as we identified new use cases and continuously expanded the library.
To tackle this strategically, we collaborated with the Product Managers and Front-End Engineers to set short- and long-term priorities. Rapid scalability and modularity were key principles, aiming to meet a tight deadline for the MVP launch.
Research
We conducted a visual audit of all products, analyzing components for size variations, states, interactions, and accessibility. This audit provided insights into standardizing these elements within the Design System to improve usability.
Working closely with the front-end development team helped us understand their challenges and the impact of design decisions on implementation and performance. Integrating our audit findings with their feedback streamlined the design process and enhanced the user experience.
Organizing for collaboration and accessibility
We created a dashboard interface to document each component's progress, ensuring organization and preventing confusion amidst numerous components and variants. This approach facilitated easier collaboration between designers and the product team, maintaining transparency and keeping everyone informed.
Laying Foundations
We discovered numerous inconsistencies across various aspects including text, spacing, color usage, icon styles, cards, size variations, interactions, and states. To address these issues, we began by establishing foundational elements such as text guidelines, spacing standards, and a cohesive color palette.
🎨 Color: The product's original colors were fashion-centric. However, considering the company's diverse e-commerce clientele beyond fashion, we needed colors that would be universally applicable across industries. This decision was driven by our business requirements for broader market appeal and versatility.
📏 Layout and spacing: We implemented an eight-point grid system, ensuring that elements were positioned and sized in multiples of eight pixels, enhancing visual harmony and usability throughout the design.
🔠 Typography: We liked the font family that is already in use "Lato" for its elegance and legibility. But we established standardized guidelines for its consistent and appropriate usage.
The next step was getting started on an ever-developing set of components, guided by the Atomic Design approach. Continuously working with developers, we made sure that naming conventions and component organisation work for both sides.
We created nearly 30 types of UI components, such as accordions, breadcrumbs, dropdowns, data grids, query builders, image tiles, and more. We continued to add new components as we discovered additional needs and as new features were developed.
Overview of the system and prototype
Compilation of the components
Interactions samples
Guidelines and best practices
We documented the best practices and guidelines for each component to maintain consistent brand identity and provide context to anyone who uses the components. Here are some examples of best practices for menu and datagrid.
Outcome and Impact
This was the first design system that was built and it's instrumental for the SaaS suite to maintain consistent branding across products.
Strengthened brand identity
We observed a remarkable improvement in design consistency across all our products by establishing a design system with clear guidelines. This system provided a unified set of components and design principles that ensured each product adhered to the same aesthetic and functional standards.
Accelerated Time-to-Market:
As we expanded our suite with more use cases and products, the design and development process became more streamlined, allowing us to accelerate the MVP launch.
Enhanced development efficiency
By providing a standardized set of components and guidelines, the design system allowed developers to focus more on building innovative features rather than reinventing the wheel. This efficiency improved the consistency and quality of the final product, freeing developers to solve complex problems and deliver value faster.
My Reflections and take aways
Prioritizing and Time Management
Working on design systems alongside new use cases was both challenging and rewarding. This experience taught me how to strategically prioritize, plan, and execute projects effectively. I learned to balance the demands of maintaining design consistency with the need to innovate and adapt to changing requirements.
Learning from diverse perspectives
Being a product designer allows for collaboration with people from various teams, and it’s always fascinating to see how everyone brings their unique perspectives together to work seamlessly towards a common goal. This collaborative environment provides endless opportunities to learn from each other and build truly impactful products