Design System for vue.ai : An e-commerce SaaS Suite

Roles and Responsibilities

  • Worked with a team of five designers in developing a comprehensive design system featuring over 1000+ 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

Timeline

Aug 21 - July 22 (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. Our goal was 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. This often involved prioritizing reusable components and templated layouts where feasible.

Research

We conducted a comprehensive visual audit of all products, analyzing common components for size variations, states (active, inactive, error), interactions (hover effects, animations), and accessibility. This provided insights into standardizing these elements within the Design System, improving usability and accessibility.

Engaging with the front-end development team helped us understand their challenges and how design decisions affected implementation and performance. By integrating our audit findings with their feedback, we aimed to streamline the design process and enhance the user experience across implementations.

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.