top of page

Subscription Site Integration

Integrating Subscription throughout the shopping journey

both-mock.png
Overview

The #1 initiative at Omaha Steaks was to grow and expand subscriptions. A key feature of this was integrating the subscription feature throughout the website—introducing it earlier in the shopping journey to ultimately increase subscription take rate.

Role

UX Designer at Omaha Steaks

Visual Design, Interaction Design, Usability Testing, Competitive Analysis

DEFINE

The Problem

In its initial implementation, users could only select Subscription from the Cart page. Through competitive analysis, there was an opportunity to allow users to select their delivery method earlier, i.e. showing Subscription as soon as the first add-to-cart. The challenge was integrating a delivery method selection while maintaining a recipient selection experience without adding complexity.

The Big Three

Let's say we start shopping the website, here are the three things to think about: what item to add to cart (the product), who it'll be sent to (recipient), and how it'll be delivered (delivery method).

Product

Not every product was available for every delivery method. The feature needed to solve for when products weren't available

Recipient

Users can assign a “recipient” when they add-to-cart. They can add as many recipients as they like, with each recipient receiving their own cart "tab" that contains the item.

Delivery Method

There was the choice of: One-Time Shipment, Subscription Plan, and In-Store Pick Up.

The Beginning & The End

While integrating the delivery selection earlier in the site was beneficial, we also needed to decide how to assess how it would affect the Cart. Could a recipient both subscribe to an item and pick another up? Or, would it be limited to one method per recipient? The two possible approaches are shown below.

broken up flow.png

Option #1

  • This is an example of one (1) recipient with two products.

  • Item A was added as a Subscription item

  • Item B was added as a One-Time Item

  • Now, the Myself cart "tab" was split into two sections:

    • Item A for Subscription

    • Item B for One-Time Shipment.

​

flow.png

Option #2 (Winner!)

  • This is also an example of one (1) recipient with two products.

  • Item A is added as a Subscription

  • Item B is added as a One-Time Shipment

  • In this case, the Myself cart "tab" was not split into two sections. Instead, the "One-Time" choice overrode the Subscription.

IDEATE

Let's Design!

Isolated Decision Points

decision points.png

Different Step, Different Screen

As I started designing, it would be possible for each step to warrant its own screen. Though, there was an assumption that this is too many screens and would confuse customers.

All in One Screen

Or, could everything go on one screen? With this one, it was assumed that it would all be extremely overwhelming. So, let's test it!

TEST

Unmoderated Usability Tests

A requirement of the feature needed to consider the two product types: package products (a bundle) and one for elemental (singular) products. The singular product comes with a multitude of additional options to select, adding to the vertical space. Think of it as selecting a shoe size and a colorway within a shoe style. Thus, the tests were ran with the experience for adding an elemental product to cart.

Guided Experience vs. All in One

We wondered if users were able to:

  • select their size and quantity?

  • understand the price associated with their selection?

  • understand the value of each purchase option?

  • make a selection?

qv options.png
elemental-qv-fulfillopt.png

Winner!

The final verdict was to move forward with the All in One option and update the design to have a consistent UI throughout.

Why?

  • More streamlined experience for the user to compare prices with respect to the variants and fulfillment options (as opposed to going back and forth between screens)

  • Allows for consistent display in multiple locations throughout the site (refers to product details page and quick view)

    • This was advantageous from an implementation and development perspective

IDEATE

Additional UX Considerations

Delivery Option Update

Imagine, a user shops the site and adds something to their cart as Subscription, then adds another product and selects One-Time Shipment. How would we tell them that everything has changed to One-Time Shipment?

This was solved by showing a message that'd convey the change. At this point, all recipients would change to the selected delivery option. However, the user can change them independently in the cart.

qv-sub-pckg.png

Unavailability

As mentioned earlier, there are cases where products are unavailable for specific delivery methods. Each delivery method (except one-time shipment) had a disabled state design.

delivery options.png

IMPLEMENT

Handoff Files

All handoff files outlined the functionality and edge cases that'd occur as well as how they'd be handled.

recipient.png

Multiple Recipients

Outlines the messaging display when addressing the change for multiple recipients.

confirmation.png

Confirmation

Notating the Recipient and Delivery Option selected within the Confirmation screen.

bottom of page