Preview Customization Flow
BACK
Context
At FabFitFun, customers can customize their box of goodies with a changing product selection each season. The process can be confusing for new customers, as the timeline and rules vary based on the subscription tier
Challenges
Can’t show actual product selections for the upcoming season until a specific date
Limited time and resources, frequent introduction of new stakeholders, and misalignment among them
Objectives
Business
Increase conversions by introducing transparency in the core experience
User
Clarify how the process works to help customers make decisions easier
Role
I was the only designer on this team. That means I worked on all the new designs you see here
Research Findings
Analyzed customer support tickets and user sessions
Why
To understand what our customers’ pain points and confusions were
Findings
Prospective and current customers alike are confused about how the customization process works. Customers only customize 1 box every 3 months, so they need a refresher
Both Annual and Seasonal customers receive the same number of products. However, we don't clarify that Annual customers can customize 5 products, while Seasonal customers can only customize 3
Customers can choose one initial product during checkout, leading to confusion about when and if they'll receive additional products as promised
Reached out to Business Insight team for customer insights
Why
To understand why our customers cancel their subscriptions
Findings
Each season, we offer multiple product sets with a limit of one item per set, causing confusion and resulting in 24% of customers canceling due to perceived product unavailability
Hypothesis
If customers understand the customization process and how products are selected, they're more likely to convert
Impact of Design
Unfortunately, this project wasn't launched while I was at the company, so I couldn't oversee its implementation or measure the design's impact
Special Highlight
The project lacked clear definition and scope from my product owner and leadership. So I took the initiative to help shape the MVP and identify essential features
Audit of the Landing Page
The goal was to assess the information we provide before customers sign up and identify gaps in knowledge during the preview customization process.
Although both plans offer the same product quantity, they provide different levels of customization. Additionally, we use terms like 'customize,' 'add-ons,' and 'edit sales,' which are unfamiliar to new customers
How It Works
Customizable
Each season, we curate a box of
the hottest deals. You make it
100% you.
Stay in Control
Not in love with the season’s
choices? You can always swap for
credit to shop.
Shop Anytime
Shop and save with our shop and
curated weekly sales.
This section provides a broad overview of the experience but lacks important details
We offer a sneak peek of our upcoming products but don't set the right expectations with our selection logic
Featuring The Summer 2021 Box
Our best deals live in the Seasonal Box. Discover 6 full-size products in each box, valued at up to $350. Limited supply.
Funboy
Poolside Leisure Club Beach Towel
MSRP: $49
Vacation
Vacation Fragrance
MSRP: $60
Montce Swim
Ali Bucket Bag
MSRP: $78
Le Specs
Velodrome Sunglasses in Black
MSRP: $55
Thrive Causemetics
Sheer Strength Hydrating Lip Tint
in Melissa
MSRP: $26
Business & Pleasure Co.
Cooler Tote Bag
MSRP: $99
Arrae
Bloat Alchemy Capsules
MSRP: $55
Amika
Mirrorball Shampoo & Conditioner
MSRP: $52
Volition
Getaway Glow Gradual Tan
Firming Facial Serum
MSRP: $46
Freck Beauty
Freck OG The Original Freckle
MSRP: $22
Beach Riot
Travel Duo Bag
MSRP: $40
Dannijo
Double Gold Anklet
MSRP: $140
GET THE BOX
Choose a Plan
See why over 1 million members love us! Select a plan and check out below.
Annual
Best Value
Prepay for 4 boxes and save $60
$54.99
USD Per Box
You will be billed $219.99 annually.
Seasonal Box: 6 full-size products
Customize your entire box
Unlimited Swap for Credit
Early access to Customize
Early access to Add-Ons/Edit Sales
Earlier shipping
Cancel anytime
Selected Plan
Seasonal
Pay per box
$69.99
USD
Billed quarterly.
Seasonal Box: 6 full-size products
Customize your entire box
Unlimited Swap for Credit
Early access to Customize
Early access to Add-Ons/Edit Sales
Earlier shipping
Cancel anytime
Check Out to Start Your Membership
Account Info
Create Password
Create Password
Shipping Details
(We will ask full shipping address on next page)
Country
United States
State
Select State
Zip Code
Zip Code
Payment Info
Credit or Debit Card
First Name
First Name
Last Name
Last Name
Credit Card
Card Number
Expiration Date
MM
YY
CVV
CVV
Zip/ Postal Code
Billing Zip / Postal Code
Order Summary
Seasonal Subscription
69.99
1st Box - Summer Box
Shipping*
0.00
Promo Code/Gift Card
-14.00
TWENTY
TWENTY has been applied.
Tax
$0.00
Total
$55.99
*Free shipping only applicable in the contiguous US.
FabFitFun is an ongoing subscription service that is billed each
season ($69.99 USD) or annually ($219.99 USD for 4 seasons),
depending on the option chosen, and will be automatically
charged using the payment method provided until you cancel.
Taxes, shipping and handling fees, and, for non-US customers,
foreign exchange or transaction fees may also apply. You may
cancel your membership at any time before your next bill date
online or by contacting FabFitFun Support here. For more
details, click here.
By clicking "Order the Box" you are agreeing to our
Terms
of Use and Sale
and FabFitFun Membership Terms
Order the Box
We previously let customers choose their first product when they check out, which caused confusion.
We've now removed that option.
Design Explorations
The design goal was to show how the customization process works with different membership options.
Membership Selection Banner
Exploration 1
PRO
Minimal height, allowing focus on essential tasks
CON
Banner blindness prevents a clear comparison of the two membership plans
Exploration 2
PRO
Displays both membership plans prominently for easy comparison
CON
Too wordy and takes up too much vertical height
★
Exploration 3
PRO
Concise display of 2 membership plans, minimizing vertical space
CON
Lacks some context for the current membership preview
Preview Customization Flow
★
Exploration 1
PRO
Visibly unable to choose disabled products due to overlay on top
CON
Overlay obscures the products, possibly reducing conversions
Exploration 2
PRO
Disabled products remain visible
CTA to upgrade is in proximity to the product in question
CON
Some users may miss these details and get frustrated when they can't choose products
Exploration 3
PRO
Reduces clutter on the main page and encourages users to choose according to their desires
CON
The mention of the upgrade to select products comes later in the pop-up, which can be frustrating
Checkout Page
Exploration 1
PRO
Simple interface with one clear CTA
CON
The “Mystery Product” terminology is a little confusing
Not enticing enough for customers to make the switch
Exploration 2
PRO
Clear CTA for both choices
Better messaging around locked choices
CON
The prominent CTAs make it feel necessary to engage
★
Exploration 3
PRO
Product preview entices customers to upgrade
Visible information on the locked choices
CON
Product previews could be overwhelming and confusing
Final Solution
Preview Customization Flow
Concise membership options with additional details provided in a modal
Lock icons on choice tabs and product images emphasize that an upgrade is needed to choose one of these products
Display product selections for the locked choices
Entices customers to upgrade to Annual to select their desired product
Clear and visible reason as to why the choices are locked
User will be taken back to the choice question when they tap on locked products
Checkout Page
Lessons Learned
Sometimes product and leadership aren't sure what they want or how the experience should unfold because the idea is too abstract.
In these situations, designers can add value by quickly creating mockups that help the team determine the ideal customer experience and the best business approach.
Designed in Figma and Built in Framer © 2024 Selena Jiang. All Rights Reserved.