UX overhaul for eCommerce tool

Humankind was a B2B product that eCommerce brands used to provide their shoppers curated recommendations. By pairing shoppers with expert consultants, brands were able to increase sales and customer satisfaction.

The Humankind platform allowed consultants to message with shoppers, assess their needs, and build personalized landing pages with all the products they recommended for a particular shopper.

Problem

Humankind was at risk of losing clients because of concerns that consultants couldn't drive enough sales to justify the costs of the tool.

Consultants were able to close individual sales effectively, but they needed a workflow that would allow them to work more efficiently.

Opportunity

Streamline the consultation process by identifying and addressing points of friction.

Design process highlights

User research

Regular conversations with consultants showed that building personalized landing pages was a common bottleneck in the consultation process and highlighted three key pain points:

1. It was inefficient to add products via the company's public website.

2. Once added, there was no way to modify a product (e.g. change a shirt from green to blue).

3. Products could not be reordered (important for selling routines, complementary products, etc.).

   
   

Consultants had to find a page on the company website before they could use a browser plug-in to add it to a recommendation

Competitive analysis

I investigated how various products (Shopify, Salesforce, Figma, Canva, etc.) allowed users to select items from large catalogs. Two common patterns that could work for selecting products within Humankind emerged: hierarchical lists and canvas-and-configure.

Humankind served clients from very different sectors of eCommerce (skincare, apparel, home goods, beverages), so we needed an approach that would work for any type of product catalog. Also, we needed to support products like shoes that can have hundreds of variants when you combine properties like size, color, and width.

Shopify users drill down to select among variants vs. Canva users select a parent and then configure individual properties

Selecting controls

We only had capacity to build one type of control for configuring variant properties, so it had to work for every type of product. Dropdowns were flexible enough to handle every scenario.

Dropdown menus provide strong support for image previews, availability indicators, and they can support large numbers of options

Interactive prototype for handoff

I collaborated with developers by building interactive prototypes to show them how users should be able to reorder products on the canvas by dragging and dropping.

Solution and impact

We rolled out the new builder without retiring the old one, so a client-facing failure wouldn't cost anyone a sale. During usability testing and post-release feedback, consultants routinely shared that the new builder made building recommendations faster and easier.

The strongest signal came from consultants who ran into catalog integration issues in the new builder. Even when the new builder was missing products from the catalog, consultants found it such an improvement that they would switch between the new and old builder so they could do as much as possible with the improved experience.

Over the next few weeks, we closed the remaining catalog ingestion gaps, retired the old builder, and the new experience became the default, staying that way through Humankind's eventual acquisition.

Before vs. after update of recommendation builder