E-COMMERCE

Subscriptions

Auto-delivery creation & management for wellness e-commerce brand

Returning customers, or customers with an account, may create an auto-delivery. The brief was to completely re-concept the current subscription module, both the subscription management portion and the section to create a new one. I worked primarily with the brand manager and growth marketer.


My Role

Research
Concepting
UX
UI
Business considerations

TEAM

Brand manager
Growth Marketer
Project manager
Content lead

Duration

November '19- January '20

TOOLS

Sketch
Miro
Invision
Whiteboard

01

The Challenge

The first step to beginning the project is meeting with all stakeholders, and gathering everyone's position, goals, and assumptions.

Business-level Challenge

The first thoughts I brought to the attention of the team were macro-level questions, including:

  1. Would subscriptions hurt the RPI. In other words, would it hurt the bottom line, even if more units were purchased?
  2. How should the subscription model work -- would it be best to allow for multiple items to be put on auto delivery, or one at a time? Should we offer the ability to adjust frequency of delivery?

While these are not design specific questions, it’s the first step in my design process to make sure we’re building the right solution.

Constraint: Unique Model

A subscription platform is not a one size fits all for every brand and product. We couldn't just use the same formula as any other brand or e-commerce platform. Our selling model and specific product made it necessary to come up with its own specific subscription model, user experience, and interactive model.

The model to choose would have to satisfy the business-side goals, along with user goals, and to make sure that we solve the challenges listed above. Specifically:

  1. Growth - to increased revenue
  2. Retention - to have the customers enjoy continued purchase
  3. User satisfaction - to increase the level of user satisfaction
  4. New users - to attract new users

Design Challenge

The current version of the subscription platform left much to be desired. Users hardly used the feature, and it was clear why. The layout and user flows were quite confusing. The area to create a new subscription was mashed together with the area listing current subscriptions. It could take five minutes just trying to figure out the data on the page, and even then it was not clear.

Marketing

Being this product is part of an e-commerce brand, marketing the product is essential. All selling points are mapped out and considered where to place them. They can be integrated on the marketing pages, and others on the actual auto-subscribe page to show the good features.

Documentation

Documentation is of extreme importance, as it makes sure that we're on track. It's easy to forget our goal and go down a path that, while it might create a nice product, is not the solution to our problem. So I document and share with the team the main points, including:

  1. Goals, challenges, and assumptions
  2. Strategy and road map
  3. Product Concept + exploration
  4. Research
  5. Items to track

Also of importance to document is questions to explore - these items to explore affect business-level, company-level and product level and design level. Some assumptions will have to be made, and only tested with iterations and when looking at the data. But any questions we can answer at this time by talking to customer success, users, looking at data, and the team certainly helps.

02

User Needs

I worked with Customer Success to understand how the user would benefit from subscriptions and when they would be interested in them.

User Goals

A critical step is to understand what the user is looking to get from this platform. Some things they are looking for they aren't even aware, but should be satisfied.

  1. Community - To feel part of a community, a basic human need
  2. Satisfaction - they should be happy with a lower price and the ease of always having the product on hand
  3. 360 Approach - To feel that the company is serving the user holistically, with this being one part of the 360 approach to health
  4. Delight - the process of creating and managing subscriptions should be simple and even delightful.

User Pain Points

It wasn't hard to find what they found difficult with the current system. Specifically:

  1. They didn't even realize that they could subscribe (discoverablity issue)
  2. They had a hard time understanding the benefit of subscribing
  3. They found it difficult to get the details of the subscription, and the breakdown of what's included
  4. The process of creating a new one was confusing and often required calling customer support

Different approaches for different use cases

The next step is to understand how it fits in the buying process. Don’t run to build a target -- it doesn’t exist in a vacuum. For this, we need different use cases for different use cases:

  1. New New user, never purchased before
  2. Purchased but didn't subscribe
  3. Already subscribed

Browser If they never purchased before, it should be used as a marketing point. So we feature it on home page and within the “Membership” marketing pages. That if you join the club, you’ll get it. But business level decision was that you can only subscribe after you make a first purchase.

If purchased, there should be a CTA on your logged in page to convert a purchased item to a subscription, or just create a subscription with a new product.

If already subscribe, to manage it, or add a new one.

1

BROWSER

2

SInGLE PURCHASER

3

SUBSCRIBER

Guiding User Action

Each screen should serve a purpose, and not simple be there. So depending on where the user is in the customer journey, they will be greeted with a different main subscription screen.

  1. The Browser- The point is to market to them to join
  2. The Single Purchaser -The point is get them to convert
  3. The Subscriber - The point is to get them to add a new one, or to easily see what they’ve got. They can also easily see what’s canceled if they want to re-instate.

Different UX Journeys

The customer journey varies. Not only depending on if they’re one of the 3 groups above. But also how they access it. The entrance point. From phone, computer, etc. From an email, a paid ad. Also, the journey within the product -- do they leave in the middle, cancel order, return. We will target them to subscribe through email and other touch points, aside from the e-commerce platform. We want to make sure there's discoverability -- of the ability to create subscriptions.

03

Interaction Design: UX Flows

Creating a new Subscription

The idea was to create a wizard instead of the old way.

For the wizard, I explored different options, including have a fixed bar at the bottom showing where you are in the process, and how your cart is adjusted by price. At the end it came to realize that this was not necessary in this case. To push conversion, we added their purchased items up top (when available), then popular, and then all products which they can filter by group. They can click on a product for more details modal.

The solution to the mess is a wizard. But we can go many which ways. Purchase 1 or more? Frequencey of each should be the same? Do I want to order 1 or 3 at a time? I made multiple models for how this could work. Having them on the same page, different screens, in different orders. Should the price be shown by the product, since it can vary depending on how many they buy. Should it say “as low as”? The business-level consensus was for one item at a time. Then to choose frequency.

Product Information

Modal for more information on a product. This keeps them within the wizard, and doesn't pull them away to the product page. They can even choose to "Add" from within the modal itself.

Checkout Flow

After choosing your products, the wizard automatically sends the user to checkout. We must take into account all possible user actions and use cases. For example, if they have to update their information, if they choose to edit order, or if they choose to pause making the order.

Step 1: We are using the checkout screens used for regular purchases, as development is not ready to create a separate flow quite yet. This is not the best experience for checkout for this process, firstly as it is overly complex. Also, in most cases the user will just need to jump to column two, but with this layout they get distracted with column one. Also, its a strange experience that the 'place order' button is in column one, and not closer to the more relevant column two.

Step 3: Editing the shipping address can lead to an issue. Do we want it to update the default shipping address in the system? That is not wise, as the user would not expect that. Rather, the solution is for it to add a second address to the "address" options, but not as default. Only for this order would it be default.

Guiding User Action: The Dashboard

The main Auto Delivery page changes, depending on if the user is a browser, a previous purchaser, or a subscriber. This is for the most personalized experience. And it guides the users towards the desired actions.

1. THE BROWSER

The page features a clear CTA to add a subscription, plus it lists the benefits of joining. A marketing page, if you will.

2. PREVIOUS Purchaser

The goal is to convert the one-time purchaser into a repeat buyer, on automatic auto-delivery. So the page features up top the most recent and often bought purchases.

3. THE SUBSCRIBER

For all those who have subscriptions, this is the state of the main auto delivery page. You can scan all subscriptions, edit them, or find out more about the products.

04

User Tasks

A major consideration is what information and tasks should be on which screens. Some considerations for the dashboard screen:

  1. This page is meant for an overview. But if they want to see a financial breakdown of the order, such as tax and shipping, they can click in to the subscription and see the breakdown per order (per shipment).
  2. To learn more about the product, they can click on the product.
  3. Resume delivery
  4. User Actions:
  5. Pause
  6. Cancel
  7. Edit Shipping
  8. Edit Credit Card
  9. Edit Product
  10. Edit Frequency
  11. Edit Quantity

We had to identify what data should appear on which screen, if at all. Also, if the information should appear by default, or just on human interaction. How much data should be on the overview page, what should only appear on user interaction, and what should appear on individual screen. The goal was simplicity, both in terms of screens needed and elements on each screen.

Consulting with the user stories allowed me to understand what the user would want to see where, and what action they would want to take on each screen.

Action Tasks

All human-interactive actions.

05

Growth

Of course I benchmarked against others. I also researched e-commerce articles on best practices for retention, for subsription models, and for customer memberships in general.

Iterative Design: Personalization

As we gather data and with further user testing, we will be able to improve the UX and overall product. One area we would like to focus is on Personalization, making the experience feel tailor made to each customer. For example, as part of the wizard for creating a subscription, we can have a more personalized experience, where we can guide them to the product and plan best for them. For example, we can ask:

  1. Is the order for you or someone else
  2. What are your symptoms
  3. How often do you exercise

These answers can be used not only to suggest which products to subscribe to, but also how often to take them. Equally important, we can suggest ways of incorporating the product into their lives with exercise, healthy eating and other holistic ways of health and wellness.

Metric Tracking

The first question is: what exactly do we want to track. With the data team, we created a checklist of items to track. This includes: dropoffs, churn, which products are most popular, at what time they cancel subscription. This data can help us further delve into user behavior and desires. We can use this data to test alternative designs and to ask further questions, such as the reason behind canceling.