E-COMMERCE

Customer Portal

Retention-focused products including dashboards, subscriptions, rewards, personalized quiz and more

Overview

The brief was to completely re-concept the current customer portal from product strategy to final design.

My Role

Research
Concepting
Architecture
Experience design
Visual design

Team

Lead developer
Product manager
Growth marketer
Brand manager

Duration

September 2019 - January 2020

The Challenge

The 1MD Customer Portal is meant to offer the customer true personalization, in terms of Product Recommendations, VIP Pricing, Rewards, Subscriptions, Exclusive Content, and more. While offering a true 360-approach to health, the goal is to increase retention and brand loyalty.

Product strategy

The first step to beginning the project is meeting with all stakeholders, and gathering everyone's position, goals, and assumptions. I needed to make sure that we're developing a product that actually reaches our goals

  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

One specific question to address was which model to use to offer auto-delivery subscriptions to current customers: 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?

Design Challenge

The current version of the customer portal left much to be desired. First, the layout and user flows were quite confusing. Second, the customers were not being guided to the portal or the sections therein.

The products within the customer portal include:

1

dashboard

2

personalized quiz

3

subscriptions

4

rewards

5

orders

6

account settings

User Needs

Based on research, I worked to understand how the user would benefit from the portal and what would draw their interest.

A critical step is to understand user pain points and what the user is looking to get from this platform.

  1. Community - To feel part of a community, a basic human need
  2. Discounted Pricing - they should be happy with a lower price
  3. 360 Approach - To feel that the company is serving the user holistically, with this being one part of the 360 approach to health

Interaction Design

Guiding User Action per Use Case

The subscription page changes depending on where the customer is in the customer journey. This allows for the most personalized experience. And it guides the users towards the desired actions.

  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.

1

BROWSER

2

SInGLE PURCHASER

3

SUBSCRIBER

User 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 discover-ability of all key sections.

User stories

Consulting with the user stories allowed me to prioritize features and elements.

User Flows

Subscriptions

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.

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 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.

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.

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.

Design System

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:

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.

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.