Salvatori Square Dritto Coffee Table by Piero Lissoni

Designing MultiSKU

A yearlong design journey evolving the 1stdibs marketplace

Eunie Kim
1stDibs Product + Design
6 min readJun 26, 2019

--

1stdibs has historically been a marketplace for one-of-a-kind vintage pieces. In 2016, we introduced new and made-to-order products to our platform to give buyers and interior designers an even larger breadth of products to purchase.

In order to integrate new and made-to-order items with standard variations (color, size, material, etc.) into our marketplace, our team had to overhaul a decade of assumptions around what an item is. This project is referred to as “MultiSKU” internally (SKU meaning stock keeping unit).

As the product designer on the New & Custom team, I worked through the unique challenges of this project from discovery to MVP launch over the past year.

The new MultiSKU product details page

Opportunity: Evolving our online marketplace

Without an optimized solution to buy, sell and upload items with standard variations, our teams would list different colors and sizes of items as separate PDPs (product details pages). Before MultiSKU was released, a sofa offered in five colors would be listed in five separate listings. If buyers were viewing a PDP of the green sofa but were interested in seeing what other colors were available, they would have to message the seller to ask. This created discoverability and purchase friction for our buyers.

For our MVP, we started with the attribute of color. New and custom items on 1stdibs vary the most by color versus any other attribute, like size or material. Color is also the least complex variable attribute to tackle because it usually doesn’t impact the size or weight of the item. When the size of an item changes (imagine a loveseat versus a three-seat couch), often pricing changes and shipping quotes shift due to differences in weight.

At a high level, our updates to the platform included:

  • Consolidating all color options of a product into a single PDP
  • Updating the purchase flow and order managers (seller, buyer and internal) to reflect color and SKU details
  • Adding context of color and SKU details in Message Center (seller and buyer-facing)
  • Communicating price variability for an item in Search & Browse
  • Reimagining how transactions and uploading items to our platform work

Discovery: Understanding sellers and their inventory

In addition to allowing this inventory to be bought and sold in our marketplace in an efficient and organized fashion, we also had to ensure that this new inventory could cohesively exist alongside vintage and antique pieces in our marketplace. Because of this, the discovery phase had to be thorough.

Our thoughts at the beginning of the project, as captured in our team Slack channel

First, we had to understand the potential MultiSKU products that would be uploaded to our platform and the sellers who produce these items. This involved sifting through bulky print catalogs of sellers and prospective sellers. This helped the team wrap our minds around how brands like to classify, organize and name their products.

Everyone on the team used sketching to communicate our ideas quickly. When the project kicked off, our engineers sketched database tables to understand how and where item and SKU data would be stored. These meetings led to key back-end engineering decisions such as necessary changes to the previous item model and how the new SKU model was made. In parallel to database and architecture discussions, everyone sketched many PDPs to workshop expected interactions.

Left: Product catalogs we referenced for this project. Right: One of many PDP sketches created during the discovery phase.

Long story short, if you walk through any of our New York conference rooms, you’ll see whiteboards full of sketches relating to this project.

Once we agreed on specific interactions, I created PDP wireframes for products with complex SKUs in order to stress test our assumptions and validate that our design would scale once we introduced additional variable attributes.

Conceptual wireframe used in discussions around scaling with multiple variable attributes

Design: Pairing industry patterns with lean research

To kick off the design phase, our team audited the entire platform to see where updates would need to be made.

All the touchpoints we had to consider for this project 🤯

After this, Joselyn Mujica, the product manager for this project, and I met with different product owners to understand the nuances of their respective platform areas. For example, our marketplace has tools like Message Center that allow buyers and sellers to communicate directly about a piece. We also have a large suite of professional tools like customizable invoices for our trade buyers and seller community to power their respective businesses. Understanding the complexity of these touchpoints was essential in creating design requirements.

A sampling of swatch-selection UI from various e-commerce sites

For visual patterns, we looked at competitor and analogous sites. Auditing these brands for everything from pricing treatments on search and browse pages to swatch-selection interactions helped us ensure that we were designing recognizable patterns for our buyers.

Once we understood how to support the requirements of our buyers, we shifted our focus back to our sellers and uploading their inventory. Sifting through product catalogs during discovery gave us insight into how sellers apply certain colors and materials to different groups of products. To document and organize all of a seller’s swatches on our platform, we built a new tool.

Internal Swatches page

Implementation: Cataloging new design patterns for a more scalable future

Once stakeholders approved designs, Joselyn would schedule engineering reviews where we’d walk through mockups with back-end and front-end engineers to discuss flows, potential concerns and allocate tasks.

Separately, our front-end engineers and our infrastructure team met to discuss style guide updates where shared visual components could be created and existing ones could be tweaked for this project.

Our swatch-selector component

One of these new components is our swatch selector, the most recognizable front-end change from this project. This simple arrangement of colored boxes is a representation of the months spent researching industry norms, perfecting UI and interactions, writing beautiful code and finessing the details. We made this selector a scalable component in our style guide, that in turn can render on the PDP across devices, in seller tools and on invoices where trade buyers can update the color of an item.

Next steps

Now that the MultiSKU infrastructure is in place, the possibilities for future development are endless — imagine a sofa that comes in eight colors, four materials and two different leg types, a print that comes in three sizes or a ring that can be made in one of six types of gemstones.

The MultiSKU framework we established has made 1stdibs the best destination for both one-of-a-kind vintage icons and an exciting variety of new and custom pieces. Apart from removing friction for buyers and adopting more robust e-commerce functionality, these changes are helping 1stdibs better serve large sellers — like Tolix — whose full catalog of inventory cannot be found elsewhere online. In the future, we hope to build more robust tools that empower brands to offer inventory with more options.

Has your team taken on a large project where the design team’s role has evolved? If so, we’d love to hear about it.

Special thanks to the MultiSKU engineering team at 1stdibs, Joselyn Mujica and Daniel Klainbaum.

--

--