ABOUT BODI
BODi is a leading subscription health and wellness company, specializing in at-home fitness, nutrition and support.
3.2 million total digital and nutritional subscriptions
More than $300M annual nutritional subscriptions
400,000 Team BODi coaches
Project results
$5M in added sales revenue in first 3 months
24,000 add-on orders in first 30 days
+12,000 new monthly subscriptions associated with add-to-shipment cart messaging
PROBLEM TO SOLVE
Allow users to add items to upcoming shipments to reduce shipping costs
Beachbody shipping and handling costs were much higher than other e-commerce brands and shoppers were not incentivized to make additional purchases, increase cart size or make smaller one-off purchases. This was contributing to:
Cart abandonment and lower average order values (AOV)
Customer / coach frustration and ‘sticker shock‘
More one-time orders, less subscription conversions
“66% of consumers expect free shipping on every purchase”
Problem:
Customers feel they pay too much for shipping and handling and lack incentives to upgrade to monthly subscriptions or increase number of items in cart.
Goal
Improve shopping experience through add-on orders and reduce shipping costs for subscribers and non-subscribers
Roles and Responsibilities
I analyzed Net Promoter Score surveys, customer satisfaction surveys and conducted user interviews to gather a large volume of qualitative data on users’ pain points when shopping and checkin out on BODi.com
I analyzed analytics data to find opportunities to reduce drop-off, cart abandonment and other performance issues
I synthesized research findings and collaborated with key stakeholders to define scope and priorities
Using the new design system and branding, I designed three userflows to launch the new feature
Team
Product
Engineering and QA
Data analytics
User research
Executive stakeholders
Customer support stakeholders
RESEARCH & DISCOVERY
User Personas: Discount coaches
Summary
Signed up as coach for product discounts and is now a superfan
Has had success with BODi programs
May be starting coaching business
Lifestyle:
Married, work-at-home mom with little time for self
Works out at home and uses nutritional products for weight management
Technology:
Amazon, Target, Walmart, Facebook & Facebook Groups, Instagram, mobile productivity, connected devices, fitness streaming
Needs:
Saving money while prioritizing health and fitness
Maintaining healthy habits and inspiring others
Accountability and support from community
Rewards for loyalty and commitment to BODi
RESEARCH & DISCOVERY
User interviews and customer survey data
Gathering existing user data from our quarterly NPS and customer surveys, I reviewed thousands of responses and grouped pain-points and general feedback on our target experience into affinity maps to prioritize improvements and identify opportunities.
RESEARCH & DISCOVERY
Research synthesis
After analyzing both qualitative and quantitative data, I completed competitor analysis and summarized all findings in a presentation for stakeholders.
DEFINE
Usecases and userflows
I mapped the existing checkout userflows for subscribers, non-subscribers and casual shoppers on BOBi.com to understand each user scenario and define userflows for each potential usecase for the add-to-shipment feature. In reviewing the existing paths to checkout, I determined a way to reduce scope and converge two possible paths to checkout out into one.
Existing userflow analysis:
New userflows for subscribers and non-subscribers
DEFINE
Challenges and constraints
Design constraints
Prescriptive design requirements
Product team was inexperienced in working with design and lead with design solutions in requirements. Legal compliance also impacted designs options.
Outdated existing UI in need of modernizing
Originally design and optimized for iPad, limiting design dimensions. Lot of dev-designed screens and no Figma designs for existing UI
Eng implementation issues
Dev team inexperienced and eyeballing it :)
Technical constraints
Calculating estimated shipping costs
Minicart would not be able to display total shipping costs for free/paid shipping items
Identifying eligible SKUs for logged-in and logged-out users in international sites
Out of scope and budget for MVP launch
Potential for inconsistent UI
Checkout redesign and new design system rollout in progress at time of project
IDEATION
Exploring minicart interactions and personalized cart messaging
Depending on a user’s logged-in or logged-out state, and whether or not they were subscribed to a monthly shipment, the cart messaging to users would need to be personalized, in addition to dynamic message alerts on product detail screens and CTAs.
Cart, checkout and account component explorations
Design system and rebrand
During this project I was also working on a new design system for the e-commerce site and created a style guide and component library to support the design team’s implementation of new branding.
FINAL DESIGNS
Account settings and subscription management userflow
Redesigned account settings to prioritize subscription management and create a persistent place where users to could add products to upcoming shipments. I utilized all new styles and components and simplified the information hierarchy of the left navigation menu.
Before
After
Redesigned the cart using a fly-out interaction with banner components to dynamically display personalized cart messaging for shipment subscribers and non-subscribers.
Minicart and dynamic messaging
After
Before
Product details page with modal add-to-shipment flow for quick checkout
This userflow allowed us to completely bypass sending users through entire checkout flow, dramatically reducing time-to-purchase and saving users time.
Before
After
Reusing components and creating consistency
With the concurrent development of our design system, I was able to create a library of reusable components for order and cart product cards as well as in account settings and subscription management. This delivered a more polished experience site-wide and reduced level of effort for engineers and future designers working on this experience.
Before
After
