GEM
Designing a mix-and-match flavor feature for GEM’s subscription management portal.
Project Overview
Timeline
This feature was designed as part of a subscription portal experience redesign from March-May 2022
Role
GEM’s Lead Product Designer (Researcher, Visual Designer, Interaction Designer)
Tools
Figma
Invision
Challenge
GEM is a real food vitamin company. In May 2022, it redesigned its packaging to weekly packs to replace packaging that held a monthly supply of vitamins. This new packaging allowed customers to try different flavors of vitamins throughout each month. The flavor of our vitamins was a top reason why customers canceled their GEM subscription so we wanted to know: Would allowing customers to mix & match flavors in their subscription improve our retention rate?
Solution
Redesign a responsive web experience for GEM’s subscription management portal with a mix-and-match feature that allows users to customize the vitamin flavors in their subscription.
Solution: Mix and Match Feature
GEM makes its real food daily multivitamins in four flavors - cacao, lemon raspberry, citrus ginger, and peppermint. The vitamin company also uses a subscription model and when customers purchase their first month’s supply of vitamins they can select 4 weekly packs of vitamins in the flavor they think they’d enjoy the most. With the launch of the mix and match flavor feature, customers could then go into their accounts and swap out weekly packs to try a new taste, or shake things up with a different flavor each week.
Desktop Version
Mobile Version
Design Process
Exercises and deliverables for designing the mix-and-match feature.
Empathize & Define
Customer Survey
Competitive Analysis
Business & User Goals
Ideate
High-Fidelity Wireframes
Prototype & Test
High-Fidelity Prototype
Usability Testing
Priority Revisions
GEM’s Subscriber Retention Goals
For Q2 2022, GEM had two Key Performance Metrics it prioritized to retain more of its subscription customers:
Increase month 1 order retention rate from 44% to 55%
Increase month 4 order retention from 20% to 25%
In order to increase retention, we had to look at the data for which of GEM’s vitamin products retained the least amount of customers and why.
When customers go to cancel their GEM subscription, they have to answer a survey about their reason for canceling which gave us the data we needed. See below for the results.
Survey Results
Cancellation Survey Data (as of July 2022)
This data showed that:
15% of inactive subscribers canceled because they did not like the taste of the real food vitamins - especially those who subscribe to GEM’s Cacao flavor which people expected to taste like chocolate.
Citrus Ginger had 111% fewer cancelations than Cacao, Lemon had 77% fewer cancellations, and Peppermint had 103% fewer cancelations than Cacao.
We also sent out a survey on flavor to see how it impacted subscribers’ opinions on the products. See the results below.
Citrus Ginger:
Total respondents: 719
Avg. flavor rating: 4.6
Lemon Raspberry:
Total respondents: 26
Avg. flavor rating: 4.0
Peppermint:
Total respondents: 105
Avg. flavor rating: 4.3
Cacao:
Total respondents: 226
Avg. flavor rating: 3.9
Key Insights:
Citrus Ginger continues to take the lead in highest rated flavor.
Subscribers will cancel if they don’t enjoy the taste of GEM vitamins
Competitive Analysis
I continued my secondary research by conducting competitive analysis. It allowed me to identify the strengths and weaknesses, of other e-commerce sites with mix and match product features that GEM could learn from.
Business & User Goals
Next, I combined the business and user goals I uncovered throughout my secondary research to ensure that my team and I were clear on what problems we were trying to solve.
Design Challenge
How Might We create a subscription portal experience that enables users to find the GEM vitamin flavor(s) they will enjoy taking everyday?
High Fidelity Wireframes
I used my secondary research as inspiration to mockup high-fidelity wireframes of a mix-and-match feature design that would allow users to try out new flavors until they found which ones they prefer. I designed a mobile-first web experience because:
80% of our GEM’s users were mobile users and
19% of them were desktop users
We had about 1% of tablet users
BEFORE
Flavor customizer experience with monthly packs.
AFTER
Flavor mix-and-match experience with weekly packs.
Usability Testing & Prototype
I then conducted usability testing using Invision with my high-fidelity prototype. The overall goal of usability testing was to uncover any user frustrations with the feature design and see if it addressed the user and business goals.
Prototype:
Users:
We recruited 4 high lifetime value (LTV) customers for testing since they were most familiar with our product and how to manage their subscription. They were all female, aged 45+, a demographic representative of most of GEM’s customer base.
Objectives
To see if the redesigned portal experience was an improvement on the current portal experience.
To test if users could successfully customize the flavors in their GEM Daily Essentials Subscription.
Test Methodology
Evaluative Research, or remote, moderated task elicitation while documenting observations with the thinking aloud testing technique to gain insight into users’ feelings.
Key Task
I asked users to update their Daily Essentials subscription by removing a flavor from their box and another one back in.
Usability Test Findings
After testing, I listened to my recorded sessions and documented my observations of users’ behavior. I compiled my notes into an affinity map which allowed me to uncover the following user insights.
Key Insights
Users were unclear about the product offering because they are used to our old monthly pouch packaging
Users need visible confirmation that an order was added to their subscription and where to find it
Users like sampling flavors until they find their favorite
Users are not necessarily using our website to manage their subscriptions and contact support to walk them through how to complete actions
Findings:
👍 3 out of 4 users could figure out what was in their upcoming order
👍 3 out of 4 users could add and remove a flavor
👍 4 out of 4 users could cancel, add discounts, and change the date
👍 4 out of 4 users described the new portal as “easy”
👎 4 out of 4 users did not see “added to upcoming order” confirmation for add-ons
What Was Shipped
Using feedback from usability testing and my internal team, I was able to make the following revisions to the mix-and-match feature and hand the designs off to my engineering team for development.
Adding dynamic explainer text that changes as users customize their box.
Making the “ADD”/ Quantity button larger on mobile so it would be easier for users to tap on mobile.
Moving the “ADD”/ Quantity button above the product description so it was not cut off by the bundle module as easily.
Removing price from the mix-and-match screen since it wasn’t necessary to complete the desired action.
Desktop Screens
Mobile Screens
Succss Metrics
All in all, this feature was successful in that it shipped and positively improved our subscriber retention rate. Here’s what we saw:
Of the 915 customers who were up for their first refill during the week of May 23rd, 123 (13%) switched to a custom bundle (using the mix-and-match feature):
Of the 13% that switched, 27% of them have canceled their subscription.
Of the 86% that didn’t switch, 35% of them have canceled their subscription.
Of the 405 who were up for their second refill during the week of May 23rd, 28 (7%) have switched to a custom bundle.
Of the 7% that switched, 18% of them have canceled their subscription.
Of the 93% that didn’t switch, 23% of them have canceled their subscription.
TLDR: Customers who have created a custom bundle (using the mix-and-match feature) are retaining higher. The adoption of the custom bundle is the highest for second refill customers.
Reflection
One learning from this project was the importance of help and documentation such as including explainer text and tutorials to help users understand how to use features, especially because GEM’s customers tend to be more mature and less tech-savvy. I was able to make revisions to my original design after testing to include more explainer text and partner with GEM’s marketing team to create tutorial videos that were included in feature launch emails.
Next Steps
Create more in-portal tutorial modules so users understand how to use new portal features (including mix-and-match).
Partner with the marketing team to promote this feature and increase the utilization rate.
Continue to iterate using the design thinking process to improve feature usability.
Crave
An end-to-end mobile app.
Peloton App
Adding workout features to the Peloton App.
Lox Club
Allowing users to send opening lines to dating matches.