Staples

Shipped

@ Galaxy Weblinks

TL;DR: Staples established an offshore team of designers at Galaxy to assist in revamping their entire online experience, utilizing the newly-introduced Sparq design system.

Role: Lead Designer

Team: 4 UX Designers, 1 Project Manager

Duration: ~2 years (Nov 2019 - July 2022)

I led the Staples offshore team of designers in India, formed in partnership with Galaxy Weblinks, to elevate their consumer and business-facing online experiences.

Featured Cases

Design System Maintenance

Our primary responsibility was to assist Staples in building, refining, and managing their new Sparq design system.

Designing Visual Comps

Simultaneously, we were tasked to use this new system to revamp staples.com and staplesadvantage.com.

Featured Cases

Staples's Sparq design system is a collection of reusable design components along with design styles, guidelines, and principles - utilized to create consistent interfaces and marketing collateral.

Design Library

Includes essential design components (buttons, input fields, accordions, grids, toggles, etc.) and various type, color, and effect styles, used across Staples' websites and apps.

Icon Library

Contains different types of icon sets, ranging from utility to marketing icons, with each icon in three different sizes.

In early 2020, Staples switched to Figma as their primary tool for design and organizing projects from Sketch and Abstract.

To ensure a quick and efficient transition, while maintaining design consistency and brand identity across various platforms, we extensively utilized some of the key features of Figma:

Auto Layout

For consistent padding, spacing, and alignment, dynamic resizing, and directional flexibility.

Components & Variants

Facilitated an organized workflow and reduced significant iteration time.

Plugins

Saved time and effort by automating tasks that were low in value but high in labor.

Featured Cases

The entire redesign was split into different domains such as marketing, cart & checkout, merchandising, etc. - each containing several projects.

Each week, we designed multiple screens for various projects, guided by the sprint requirements and other considerations. To guarantee a seamless and consistent experience across all devices, we created each screen to accommodate eight different viewports, from desktop to mobile

Among the various visual compositions I created, some stand out due to their unique challenges and the creative solutions they required.

Product Comparison

This page features a table that evaluates the items on various parameters, including price, specifications, and features. After reviewing, users can either add an item to their cart or remove it.

Membership Plans

This page showcases all the membership plans offered by Staples. Each plan is presented in a tabular format, allowing users to easily compare features and determine the best plan for their needs.

Cart & Checkout

This page is an integral component of a larger checkout flow we developed. As the final stage of this flow, it provides a summary of essential information users need before placing an order.

Order History

This page displays a list of all orders placed by a user. Users can view the current status of an order, review it, and initiate requests to return or cancel. Additionally, the page includes several drawers (side menus) that are activated by actions like adding filters or editing a shipping address.

Staples Business Advantage

Staples Business Advantage (SBA), the division of Staples focused on business-to-business (B2B) customers, was a key area of our work. We created a series of landing pages for SBA, including a master home page and various industry-specific inner pages.

Email Templates

In addition to the websites, we also designed several email templates for Staples's regular and business customers. These templates are content-adaptive, ensuring compatibility across all device types.

Axure Components

Finally, we utilized Axure to develop a separate component library for creating wireframes. This library, with its interactive components, facilitates quick and efficient usability testing of the wireframes with real users.

Featured Cases

Working With Constraints

Working under guidelines and principles has honed my ability to produce coherent designs across various projects. Direct interaction with clients has also refined my communication skills, allowing me to understand and meet their needs effectively.

Building Design Systems

Creating and managing a design system has ingrained in me the significance of consistency and efficiency. I learned that a well-structured system is the backbone of any scalable project, especially in the dynamic environment of an e-commerce platform, where user experience is paramount.

How Design Sprints Work

Learning how design sprints function has revealed the benefits of rapid prototyping and iterative feedback. This knowledge was crucial in handling large-scale projects, where strategic planning and resource management are key to success.

Copyright © 2024 Ritwik Mittal