My role: Content Strategist, Interaction Designer

This was an independent project to help clarify ecommerce shopping patterns. I did the upfront research and content strategy, design and prototype development. I built a prototype in Framer using a site I coded for a student project using the Material Design Bootstrap framework. 

framer prototypeframer prototype

The Situation

The online shopping experience has a familiar browse and buy flow. Generally, we land on an ecommerce site, do a search or look for what we're interested in category pages. We collect information about individual items. When we’re ready to buy, we add the items we liked best to a cart, shopping bag or basket. But there are other states besides the cart and checkout: the wish list, favorites list or save for later. These states have several use cases but fundamentally give shoppers more time to find complementary items, compare and decide on alternatives, or to simply to watch an item over time. For many retailers, the intermediate wish list or favorites list is a valuable use case, often given equal hierarchy to the cart in top nav bars.

This intermediate state of a wish list or favorites list before the cart doesn’t have a single pattern, in fact several areas on a site with the same function can add cognitive load and require effort to recall where items were saved. The expansion of the shopping experience to multiple devices also adds complexity.

Action and approach

My goal was to come up with a simple pattern that didn’t break the browsing flow and gave customers a quick way to add to a single list for review at the end of a browsing session. I was inspired by the interaction of dragdis, an online drag-and-drop bookmarking tool. Because physical engagement, according to Susan M. Weinschenk can be an influential part of the decision-making process, I wanted to add a more involved physical action of the drag-and-drop to allude to the physical aspects of taking something off a rack or putting something into a cart.

I wanted to explore ways to simplify this experience and design a new interaction paradigm that doesn't break the browsing flow.

*I focused on the web experience with the presumption the app or mobile experience had comparable features.

What's out there today

I started by looking at the top-10 US online retailers along with some niche shopping sites and did a content audit of pre-cart states: favorites lists, wish lists and save-for-later lists. 

Audit infographicAudit infographic

Content audit results

It became clear there wasn't a standard way sites treated the pre-cart, pre-purchase state. Amazon had the most options, where shoppers can create lists, heart exclusive items and interesting finds, add things to an Alexa shopping list or to Dash buttons. The many-option strategy gives shoppers more ways to save items. It’s not a bad strategy because shoppers think choice equal control, but runs the risk of reducing confidence in a purchase by adding cognitive load of finding where items were saved. 

On the other side of the spectrum are Asos and Farfetch, sites that opt for a single favorites list placed on the same hierarchy as the cart. Asos and Farfetch have a seamless add to favorites from cart back to list and vice versa, with the same options available whether you were signed in or not.

Kohl’s has the most functionality for wish lists, where shoppers can set budgets and add dates for important events.


1. Words matter

Many retailers require naming lists (Home Depot, Target, Costco) before you can add items. This requires shoppers to have an idea about a category or theme. But categorizing after you’ve collected items might be easier. Users aren't always sure what the categories are until they start adding things and often start with generic list names: "likes" or "my stuff."

Naming can also befuddle, like the case at BestBuy where Saved item lists and Save for later in the cart are not the same thing. Saved items do not appear in the cart like save for later items, as you might expect. 

Sign-in messages presented to non-signed-in users who wish to add items to a list tend to put the onus on the user. An example from Gap:

“Don’t see your favorites. Check your devices to see if you saved Favorites without signing in. If so, sign in on that devices and hit refresh to access all of your saved Favorites.”

A better option: “Keep track of what you want in one easy place. Sign in to create lists.”


2. Sign-in pages break browsing flow

The majority of retailers require users to sign in before they can save to a list or save for later. The sign-in is typically a takeover sign-in page. 

Sephora had a good example of a less intrusive sign-in flyout "to add to Beauty Bag."

Design choices impacted sign-in consistency. Like Sephora, Rei has a less intrusive sign-in modal pop up when a shopper attempts to add an item, but if the shopper scrolls down and the top nav is no longer visible, they are taken to a separate sign-in page.


3. Business logic driving user options

In the Costco shopping experience, business logic isn’t transparent to the user. It’s not clear why some items can be added to a wish list and some to a registry while others to neither:

  • Shoppers can add a $49.99 Kettle to Wish List and to Registry
  • $1299.99 Chase Lounge Set to Registry only
  • $42.99 Diapers to Wish List only
  • $42.99 not member only towel set can't be added to any list


It was also common to see Save for later restricted to items already in the cart. (Amazon, Walmart, Nordstrom)

And it’s less common to see the option to add to a List or Wish list from the cart (Madewell, marcjacobs.com do). Apple and Barneys require shoppers to go to the product page from the favorites list to add to bag because it’s not possible to add an item from the list directly. This seems like a lost opportunity to get shopper to the shopping bag quicker. Similarly, Gap allows shoppers to favorite from product and category pages, and search results, but not the cart.

Except for Amazon, Farfetch and Asos, the ability to go from one pre-cart list to another, no matter where shoppers initially save an item, is uncommon. It's not a two-way street.


4. Validating choices

Sephora and Target show how many other shoppers also favorited/saved an item. Target has the most consistent other-shoppers-also-liked number across their registries and favorites lists. Target is transparent about likes feeding into shopper's recommendations. 

What I learned

A content audit helps uncover different approaches used to meet shoppers' goals to save an item pre cart. It also tells us there isn't a standard pattern for this behavior. Overall, my hypothesis is that there are too many options for this single, relatively simple user need to store items for evaluation and consideration before committing to buying. This choice may erode shopper confidence, and since the best predictor of when someone is going to decide is how confident they are they've made the best decision, too many buckets to choose from is a risk.