Select Page

Shopping Suite Design System

Introduction

ARES (Augmented Reality Enterprise Services) was Snap Inc.’s platform that delivers cutting-edge augmented reality and sizing solutions for businesses, revolutionizing how users shop online. Its Shopping Suite includes tools like Fit Finder and Live Try-On, designed to provide personalized sizing recommendations and interactive AR experiences, creating a seamless and engaging shopping journey. As the Shopping Suite grew, a scalable, accessible design system became vital. With reusable components, standardized patterns, and accessibility features, it ensured consistency across products while streamlining workflows for efficient delivery of AR and sizing solutions.

My Role

I collaborated with another designer to establish the ARES Shopping Suite design system, ensuring it served both Fit Finder, the suite’s only existing product, and upcoming AR tools. My contributions included independently conducting a detailed accessibility audit for Fit Finder, addressing usability issues, and incorporating these findings into scalable, inclusive design components. Together, we worked on defining design patterns that aligned with Snap’s visual identity and usability standards, enabling consistent and accessible experiences across all tools.

Project Collaborators

  • Product Designer: Co-developed the design system to ensure consistency across tools.
  • Product Manager: Defined objectives and aligned design with business KPIs.
  • Engineering Team: Collaborated to ensure feasibility and scalability of components.

Design Process

  1. Define
  2. The System
  3. Collaborate
  4. Prototype
  5. Document
  6. Test
  7. Iterate
  8. Launch

Define

The ARES Shopping Suite Design System streamlines collaboration between designers and developers by providing a clear, unified framework with reusable components and detailed documentation. This ensures both teams are aligned on visual language and interaction patterns, reducing friction and enhancing efficiency in the design and development process.

Products Powered by the ARES Design System

The ARES Shopping Suite Design System was designed to support a range of innovative products within Snap’s AR Enterprise Services, ensuring consistent, user-friendly, and accessible experiences across all touchpoints. These products include:

  • Fit Finder: A size recommendation tool that helps users find their perfect fit by analyzing their preferences and measurements.
  • Live Try On: An AR-powered tool that lets users try products virtually using their camera to see how items look in real-time.
  • Image Try On: A feature allowing users to upload a full-length image of themselves to visualize how an item would look on their body.
  • 3D Viewer: A tool to view 3D renderings of products, enabling users to rotate and explore items from every angle for a comprehensive preview.

Design System

Duration: 3 weeks

Collaborated with: Product Designer, Engineers, Accessibility Specialists, and Project Manager

Built with foundational UX elements, interactive components, and design tokens, the ARES Shopping Suite Design System ensures a consistent and scalable experience across Snap’s AR services. It provides a seamless foundation for internal teams to integrate and deliver intuitive, accessible user experiences across all products.

Foundations

Core Components

We used Figma variants to create multiple component versions with different properties, allowing us to easily swap them during the design process. This approach improved flexibility, streamlined iterations, and ensured consistency across designs.

Image Try On Components

We used Figma’s Auto Layout to create responsive, adaptable designs that adjust seamlessly across different screen sizes and content. This approach ensured consistency in components while improving flexibility, reducing manual adjustments, and streamlining the design process.

Fit Finder Components

We embedded prototyping directly into the components, using Figma to design interactive flows and ProtoPie to bring enhanced animations to life. This approach enabled us to refine both usability and visual appeal, ensuring an immersive user experience.

Design Tokens

After defining design variables in Figma, I converted them into a full set of design tokens—brand tokens, alias tokens, mapped tokens, and responsive tokens—in Token Studio. This ensured a scalable design system that maintained consistency while being adaptable across various screen sizes.

Brand Tokens

Specific colors and styles that represent the brand identity. As an example:

Token: { “color”: { “grayscale”: { “100”: { “value”: “#c4c4c4”, “type”: “color”

Variable: colorGrayscale100

Usage: Used for dividers, and inactive text fields to visually distinguish sections or inactive states without drawing too much attention.

Purpose: It maintains subtle separation and clarity while supporting a clean, minimalist interface on white backgrounds.

Alias Tokens

User-friendly names for design elements, often referring to brand tokens for color specifications. As an example:

Token: { “error”: { “300”: { “value”: “{color.red.300}”, “type”: “color”

Variable: colorError300

Usage: Used to indicate error states in UI components, such as error messages or alerts, drawing user attention to issues that need resolution.

Purpose: It communicates urgency and importance, helping users quickly identify and address errors within the application.

Mapped Tokens

Standardized color shades linked to specific design roles or components, derived from alias tokens. As an example:

Token: { “text”: { “heading 1”: { “value”: “{neutral.500}”, “type”: “color”

Variable: textHeading1

Usage: Used for the text of heading 1, ensuring that it stands out prominently against background elements to capture users’ attention.

Purpose: It establishes a visual hierarchy, enhancing readability and guiding users through the content effectively.

Responsive Tokens

User-friendly names for design elements, often referring to brand tokens for color specifications. As an example:

Token: { “font-size”: { “heading”: { “h2”: { “value”: “18px”, “type”: “dimension”

Variable: fontSizeHeadingH2

Usage: Used to create a visually distinct hierarchy in text, ensuring that secondary headings are easily identifiable within the content.

Purpose: It enhances readability and guides users through the information structure, helping them understand the relationship between different sections of the content.

Developer Handoff

Duration: 2 weeks

Collaborated with: The Engineering Lead and Developers to ensure clear design specifications, tokens, and assets were provided for accurate implementation

During this two-week phase, I focused on assembling detailed documentation that facilitated effective collaboration between the design and development teams. By supplying comprehensive design specifications and resources, I aimed to ensure a seamless handoff and precise execution of the Fit Finder features.

Design Specifications

  • Style Guide: Include typography, color palettes, spacing, button styles, iconography, and other design elements.
  • Component Library: Provide a library of reusable components with their states (normal, hover, active, disabled).
  • Design Tokens: Prepare tokens for colors, typography, spacing, and UI elements in a development-friendly format (e.g., JSON, YAML).

Interactive Prototypes

  • Clickable Prototypes: Provide interactive prototypes that illustrate user flows and demonstrate how components and screens should behave in context.

Documentation

  • User Flows: Include diagrams that outline the user’s journey through the application, highlighting key interactions and decision points.
  • Functional Requirements: Document the functional specifications, including how each feature should work and any necessary integrations with APIs or services.
  • Accessibility Guidelines: Specify any accessibility considerations or standards that should be followed during development.

Annotation and Comments

  • Annotated Screens: Provide annotations within the design files to explain specific design choices, interactions, and behaviors that are not immediately apparent.
  • Feedback Mechanisms: Outline how developers should communicate questions or feedback regarding the designs.

Version History

  • Keep track of design iterations and ensure developers are working with the latest version of the design.

Collaboration and Support

  • Scheduled Meetings: Arrange handoff meetings to walk developers through the designs, clarify requirements, and address any questions.
  • Availability for Questions: Ensure that myself and other designers are available for follow-up questions during the development process.