Journey Mapping to Improve UX at FabFitFun

FabFitFun was built on WordPress and legacy code. This created problems and accrued a lot of design and technical debt.
‍
FabFitFun was originally built on WordPress. We grew really fast as a company and accumulated a lot of UX and tech debt along the way. In 2020 we decided to migrate off WordPress for a lot of reasons, including UI Consistency, complex technical upkeep, improved security, etc. As part of the migration process we wanted to improve our experiences and did not want to persist the UX and tech debt.

Our Membership Grew Fast and Became Confusing
‍
During the pandemic we grew to 2MM members. Because of warehouse limitations, we created 2 windows of participation because of fulfillment limitations.

Due to this growth, our user experience grew to become confusing to comprehend during different phases in the season. This created big gaps in the experience throughout the entire lifecycle of purchase to receiving your first box. A prospect was able to purchase a box, before, during or after a participation window and our product didn't account for the right messaging across all these use cases.

Our Main Programs at FabFitFun
‍
1. Customize: Choosing the products that go in your box
2. Add-Ons: A flash sale for discounted items to add to your box
3. Edit Sales: Another flash sale not associated with your box. Incurs a shipping cost if the minimum shopping threshold is not met.

2 Windows of Participation for Members
Our warehouse cannot handle all our members at once, because of this we separate our participation windows for each campaign by membership type. Annual members participate in "Window 1." Seasonal members participate in "Window 2."

September 2020
Part 1: Usability Study & Distilling Findings
Conducting ethnographic research on our products throughout different phases in the season. Focused on understanding & defining problems. Created full summary of usability & sentiment learnings.

October 2020
Part 2: Journey Mapping & Cross Functional Team Alignment
Focused on identifying key opportunities along a user’s journey. Visualized a prototypical user journey based on most common trends.
Strategized low cost solutions to address unaddressed needs.

November / December 2020
Part 3: Design, Sprint Planning and Production Release
Delegated and made sure everyone did their job on respective podsManaged stakeholders to mitigate and stop scope creep

Starting with an Ethnographic Research Study
I designed a 18 person study with participants based in the US or Canada & familiar with subscription boxes and FabFitFun, but not a current member. All participants tested remotely due to COVID-19 on our staging environment with their browsers setup to emulate a mobile device.

What Participants Were Shown
I presented participants a FabFitFun ad, asked to go through the process of signing up for a membership, and observed as we advanced participants artificially through the season asking for their thoughts, perceptions, and expectations throughout the process.

What I Was Watching For
‍Documented what their pain points were for understanding the membership and its benefits as a new member through different phases in a season.

All Possible Scenarios Covered in a 90 Day Season
‍I covered all possible scenarios: Pre-Window 1, During Window 1, Between Windows, and After Window 2

Legacy Onboarding Flow not Built for Inclusivity
“Just giving respect to the AA community, we have different types, broad types, you don’t want to say anything offensive, but Coily is not offensive at all… I’d would know that it would also help my hair type." (Sierra)


Members Confusing the Onboarding Survey for the Customize Event
‍“Ok, so looks like I have an hour to customize my box. Or no, that’s not what it’s saying, it will process in 1 hour which is pretty quick. Here’s a survey where I can answer some question so boxes are more customized to what I want.” (Liora)

This was because we had an ephemeral "Customize" state, in which we'd hide the Customize step from the onboarding depending on what phase in the season a member signed up. This was an enormous source of confusion for new members.

Key Issues Identified in User Interviews
• Participants confused personal survey for "The customization process".
• Seasonal cadence creates gaps in product causing confusion during
onboarding process.
• Concerns About Product Compatibility (Lack of Inclusive Language).
• ‘Select Membership' terminology and membership types are confusing.
• Poor membership education

Key Opportunities For Conversion Funnel
• Confusion about what items will come in advertised box.
• Lack of awareness of box item variety.
• Lack of awareness of full size products.
• Lack of awareness of personalization for each box.
• Lack of awareness of seasonal cadence (assumes monthly)

Designing Around User Needs: Creating First Box Fiona Persona
Meet “First time Fiona,” a proto-persona with a journey map for prospects signing up in the 3 main points of the season.

Before a window:
Participation window is in the future.

‍During a window:
Participation window is now.
‍
‍After a window:
Participation window is in the past.This was done as a consolidation of all use cases to account for all the possible combination of member types (annual and seasonal) with window possibilities.

Stakeholder Alignment
We shared the insights cross-functionally as well as to an executive audience to align all internal stakeholders about the existing pain points for usability and sentiment.

Before
😥 Confusing onboarding
😥 Lack of box status visibility
😥 Poor member education
😥 Not Mobile Optimized
😥 Inconsistent UI

After
✅ Clear onboarding
✅ Visible box and season status
✅ Baseline member education
✅ Mobile Optimized
✅ Standardized UI

Addition of Educational Onboarding Video
We added a baseline level of education to increase comprehension of membership, customization, e-commerce programs, and differentiation from personal survey.


Improved Customization During Onboarding
Previously during onboarding Customize would disappear and be omitted depending on when you signed up in the season. We designed and implemented an always on contextually aware version of Customize ‍gave appropriate messaging and feedback based on your timing in the season.

Pre-window: Provides the opening date with countdown to anticipate Customization.

‍During window: Allows members to customize, matching user expectations upon conversion.

Post-window: Allows members to customize and finalize your choices as part of onboarding.

Improved Personal Survey
We improved the personal survey by leaps and bounds by making it consistent with our design system, making it mobile optimized, and increasing the diversity, equity and inclusion.


Improved diversity, equity, and inclusion in personal survey
We added in more terms for hair types for people of color, expanded the swatch palette from the original 6 to 12, adding labels and introducing undertones as well.

‍

We previously had "New Member Add-Ons" as part of our onboarding process. It proved to be a big source of confusion: People believed that NMAO was the “core Add-Ons” experience, which negatively impacted Add-Ons participation & satisfaction.

We had little to no explanation of the e-commerce program itself. That coupled with low participation (5.7%), limited revenue, and a poor experience today (Old UI/UX, minimal SKUs & oversight) made it eligible to be deprecated entirely.

Addition of Box and Seasonal Tracker
We improved the homepage to actually include a seasonal box
tracker and seasonal timeline so members could understand and know where they were in the season as well as what events were in the past and future.


Addition of Explore Your Membership Section
We also added an explore your membership section to improve discoverability for membership perks.

‍

Streamline Navigation to Reflect Member Goals
• Removal of old and deprecated initiatives
• Reset defaults to be less chaotic
‍
Major usability improvements
• Mobile optimization
• Sitewide Consistent UI
• Faster loading times
• Global Cart: Part of Mobile Nav
• Design polish

✅ Clean, Intuitive Survey
✅ Improved DEI
✅ Improved Onboarding Flow
✅ We said bye, New Member Add-Ons!
✅ Quality of Life in Navigation

Measuring Results
🤩 “Je ne sais pas” polish
📈 +50% average completion rate onboarding video
📈 +9% lift in conversion for our Customize campaign
⭐️ -50% CS call volume for box status

Member Sentiment
We shared the update in our member forum. It was well received.

We made a mountain of difference in just 3 months.
‍Cleaner easier to understand experience with onboarding education.
‍
Cleaned up customer journey to match expectations and meet user needs. This is not even mountain summit. There's still more to research, optimize, and improve!