Background
Re-designed the checkout forms for both web and mobile
Wire-framing & Presentation
Comps - Prototypes - Mockups
Collaborated with Dev to implement new designs
The tasks
Beachbody, a prominent fitness and wellness company, provides diverse workout programs, nutritional products, and supplements. Elevating Beachbody's online shopping involved refining the e-commerce platform's user experience, interface design, aiming for improved user-friendliness, visual appeal, and efficiency.
Product Finder
How can we help new visitors find their products, faster?
That question initiated our Commerce team's Product Finder initiative. Initially, we lacked any onboarding flows for newcomers; they essentially arrived without guidance, leading to abandonment issues.
Early Insights
The Commerce team found a substantial loss of new users interacting with the site for the first time via analytics. Our analysis revealed that these new visitors were being abruptly directed to the site without any introduction or guidance regarding the products. This approach hindered their confidence and readiness to explore, potentially causing revenue loss for the company.
Teaming up with our Commerce Team Leads, I delved into current data to gain a deeper understanding of the issue and potential solutions. We aimed to identify problem areas and comprehend how this situation impacted other areas of the business.
Researching Other Experiences
I chose brands akin to ours and explored diverse onboarding experiences to grasp users' perspectives. Analyzing various flows and features, I aimed to uncover their strategies, comprehend their onboarding goals, and explore their product recommendation engines. Brands in my review list encompassed Care/of, Duolingo, Caliber, Canva, Noom, and numerous others.
Unification & Brand Consistency
Ensuring brand consistency was crucial as different facets of the Beachbody business were consolidating into a more cohesive experience, such as Team Beachbody and Beachbody On Demand. Consequently, I also examined competitor flows, onboarding procedures, and recommendation experiences related to our existing programs.
My proposal for an enhanced user experience
After assessing our current pathways for new customer entry, I pinpointed areas of friction and proposed optimization strategies. This led to a detailed proposal outlining changes and alternative entry points for the Product Finder and onboarding experience. While the Commerce team provided valuable feedback, there was some resistance regarding email collection placement and prioritizing the Product Finder. I justified the importance of customer education and avoiding commitment without adequate information. This perspective resonated well, and they expressed openness to exploring this approach further.
Business Goals & Scope Refinement sessions
The next step was to move into wire-framing. In order to better inform those steps for to strategy and Design solutions, a few things to be discussed with Commerce, Marketing, and other teams.
Below are some of the topics that came up after research, reviewing flows and digging into solutions being used in other areas of our business. Our conversations were healthy and fruitful and resulted in clear insight for me to move forward to wire-framing.
Lo-fidelity Wireframes & Collaboration
I crafted low-fidelity wireframes to facilitate cross-team discussions and gather early feedback. During collaborative sessions, we delved into various aspects like page hierarchy, navigation placement, CTA labels, question types, order and quantity considerations, functionality, language usage, imagery selection, and the clear definition of each page's purpose. This involved interstitials intended to pleasantly disrupt the flow.
I ensured that these wireframes could help answer questions such as:
What actions do you think are possible on this screen?
What is the primary purpose of this interstitial?
Does the sequence of questions feel logical?
What content could be included on this screen?
Does the experience align with our unification initiative?
This review encompassed both web and mobile experiences.
Conducted competitive research
Conceptual design for new customer Product Finder
Designed pricing structure for Preferred Customer & Coach products
Designed new Preferred Membership banner and informational modal
Understanding our new customers needs
I re-evaluated our user experience, contemplating what would make our new customers feel assured and driven upon arriving at our homepage. I crafted diagrams to pinpoint essential areas for consideration. Regular meetings with the commerce team ensued, where I presented my UX proposals for a revamped Product Finder + Onboarding feature. Additionally, we worked on aligning business goals and defining the project scope, as the initial project requirements were somewhat unclear.
High-fidelity Comps & Final Walkthrough
Following numerous workshops and iterations, I proceeded to develop an interactive prototype highlighting the fully developed Onboarding + Product Finder feature. This prototype incorporated branding, visual style, and the intended functionality of the final product. I showcased the final compositions to Stakeholders, Commerce, and Product Design, receiving overwhelmingly positive feedback. With a few requested changes, we prepared to move forward to the development phase. The changes, as requested by the business and Commerce, comprised:
Simplifying CTA labels (Minor adjustment)
Replacing certain imagery with trainer and video content (Minor adjustment)
Including additional nutrition-related questions (Minor adjustment)
Within a weak…Scope creep and a pause
Regrettably, scope changes occur. With our team managing numerous commerce initiatives and upcoming program launches, Stakeholders opted to pause this feature. This pause wasn't entirely negative; it allowed us to ensure that the recommendation engine encompassed all offerings for new and existing customers. The delay was influenced by:
Exclusion of creating the Product Detail Page, leading to development delays as Stakeholders wanted to discuss imminent program releases.
Business's request to add 2-3 questions related to new programs, despite limited information about these offers and the challenge of integrating On Demand Programs into the Commerce experience.
Urgent demands from Commerce for other areas of our experience taking precedence over the new Product Finder + Onboarding feature.
Now, let's explore some of the final screens for the Product Finder + Onboarding feature below!
About the Project
To enhance the overall commerce experience and drive sales on any e-commerce platform, we need to ensure an engaging and seamless user experience. Within our Team Beach Body project, specific areas required updates. My primary focus initially centered on catering to new visitors by introducing a Product Finder to guide them through their experience.
Background
Re-designed the checkout forms for both web and mobile
Wire-framing & Presentation
Comps - Prototypes - Mockups
Collaborated with Dev to implement new designs
The tasks
Beachbody, a prominent fitness and wellness company, provides diverse workout programs, nutritional products, and supplements. Elevating Beachbody's online shopping involved refining the e-commerce platform's user experience, interface design, aiming for improved user-friendliness, visual appeal, and efficiency.
Product Finder
How can we help new visitors find their products, faster?
That question initiated our Commerce team's Product Finder initiative. Initially, we lacked any onboarding flows for newcomers; they essentially arrived without guidance, leading to abandonment issues.
Early Insights
The Commerce team found a substantial loss of new users interacting with the site for the first time via analytics. Our analysis revealed that these new visitors were being abruptly directed to the site without any introduction or guidance regarding the products. This approach hindered their confidence and readiness to explore, potentially causing revenue loss for the company.
Teaming up with our Commerce Team Leads, I delved into current data to gain a deeper understanding of the issue and potential solutions. We aimed to identify problem areas and comprehend how this situation impacted other areas of the business.
Researching Other Experiences
I chose brands akin to ours and explored diverse onboarding experiences to grasp users' perspectives. Analyzing various flows and features, I aimed to uncover their strategies, comprehend their onboarding goals, and explore their product recommendation engines. Brands in my review list encompassed Care/of, Duolingo, Caliber, Canva, Noom, and numerous others.
Unification & Brand Consistency
Ensuring brand consistency was crucial as different facets of the Beachbody business were consolidating into a more cohesive experience, such as Team Beachbody and Beachbody On Demand. Consequently, I also examined competitor flows, onboarding procedures, and recommendation experiences related to our existing programs.
My proposal for an enhanced user experience
After assessing our current pathways for new customer entry, I pinpointed areas of friction and proposed optimization strategies. This led to a detailed proposal outlining changes and alternative entry points for the Product Finder and onboarding experience. While the Commerce team provided valuable feedback, there was some resistance regarding email collection placement and prioritizing the Product Finder. I justified the importance of customer education and avoiding commitment without adequate information. This perspective resonated well, and they expressed openness to exploring this approach further.
Business Goals & Scope Refinement sessions
The next step was to move into wire-framing. In order to better inform those steps for to strategy and Design solutions, a few things to be discussed with Commerce, Marketing, and other teams.
Below are some of the topics that came up after research, reviewing flows and digging into solutions being used in other areas of our business. Our conversations were healthy and fruitful and resulted in clear insight for me to move forward to wire-framing.
Lo-fidelity Wireframes & Collaboration
I crafted low-fidelity wireframes to facilitate cross-team discussions and gather early feedback. During collaborative sessions, we delved into various aspects like page hierarchy, navigation placement, CTA labels, question types, order and quantity considerations, functionality, language usage, imagery selection, and the clear definition of each page's purpose. This involved interstitials intended to pleasantly disrupt the flow.
I ensured that these wireframes could help answer questions such as:
What actions do you think are possible on this screen?
What is the primary purpose of this interstitial?
Does the sequence of questions feel logical?
What content could be included on this screen?
Does the experience align with our unification initiative?
This review encompassed both web and mobile experiences.
Conducted competitive research
Conceptual design for new customer Product Finder
Designed pricing structure for Preferred Customer & Coach products
Designed new Preferred Membership banner and informational modal
Understanding our new customers needs
I re-evaluated our user experience, contemplating what would make our new customers feel assured and driven upon arriving at our homepage. I crafted diagrams to pinpoint essential areas for consideration. Regular meetings with the commerce team ensued, where I presented my UX proposals for a revamped Product Finder + Onboarding feature. Additionally, we worked on aligning business goals and defining the project scope, as the initial project requirements were somewhat unclear.
High-fidelity Comps & Final Walkthrough
Following numerous workshops and iterations, I proceeded to develop an interactive prototype highlighting the fully developed Onboarding + Product Finder feature. This prototype incorporated branding, visual style, and the intended functionality of the final product. I showcased the final compositions to Stakeholders, Commerce, and Product Design, receiving overwhelmingly positive feedback. With a few requested changes, we prepared to move forward to the development phase. The changes, as requested by the business and Commerce, comprised:
Simplifying CTA labels (Minor adjustment)
Replacing certain imagery with trainer and video content (Minor adjustment)
Including additional nutrition-related questions (Minor adjustment)
Within a weak…Scope creep and a pause
Regrettably, scope changes occur. With our team managing numerous commerce initiatives and upcoming program launches, Stakeholders opted to pause this feature. This pause wasn't entirely negative; it allowed us to ensure that the recommendation engine encompassed all offerings for new and existing customers. The delay was influenced by:
Exclusion of creating the Product Detail Page, leading to development delays as Stakeholders wanted to discuss imminent program releases.
Business's request to add 2-3 questions related to new programs, despite limited information about these offers and the challenge of integrating On Demand Programs into the Commerce experience.
Urgent demands from Commerce for other areas of our experience taking precedence over the new Product Finder + Onboarding feature.
Now, let's explore some of the final screens for the Product Finder + Onboarding feature below!
About the Project
To enhance the overall commerce experience and drive sales on any e-commerce platform, we need to ensure an engaging and seamless user experience. Within our Team Beach Body project, specific areas required updates. My primary focus initially centered on catering to new visitors by introducing a Product Finder to guide them through their experience.
ONBOARDING + PRODUCT FINDER
Incremental Wins
As previously mentioned, there were pressing initiatives requiring immediate attention and refinement within our experience. Quick turnaround on deliverables was necessary, specifically final designs for both web and mobile. These critical areas encompassed Offers, Preferred Coach/Customer pricing, and PC SKU Promo Banners at Checkout.
Below are a few final screens promptly handed off to developers for immediate implementation within a tight timeframe of just a couple of weeks. I actively supported the development process to ensure design integrity and user experience were maintained, participating in User Acceptance Testing (UAT) and Demos alongside the developers.
Despite conducting Kickoff, UX Discovery, Research, and Design phases, the process was expedited for swift implementation.
Customers required a transparent pricing format to display discounted retail offers, Coach pricing, and Preferred Customer pricing.
I crafted the Special Offers page and product modal pages, opting for a straightforward stacked hierarchy. Implementing a common practice of strikethrough pricing enhanced the visual clarity.
Outcome: The updated pricing structure was reviewed by customers and coaches, who confirmed its logical and user-friendly nature, finding it easy to understand.
The checkout form was excessively lengthy, spanning three mandatory sections for customers to complete.
I swiftly redesigned the forms using best practices and our updated design system, incorporating revised input fields, radio buttons, and updated primary, secondary, and tertiary buttons.
Outcome: The revamped design not only facilitated easier completion of the form but also improved navigation and expedited the process. As a result, it significantly reduced abandonment rates, dropping from 55.45% to approximately 20% in recovering abandoned carts.
(*Numbers have been adjusted slightly to maintain confidentiality)
I am deeply passionate about e-commerce and committed to building a meaningful, long-term career in this dynamic field. Leading cross-functional collaboration with Commerce, Marketing, and diverse project teams has been one of the most rewarding aspects of my journey, driving impactful results through shared vision and teamwork.
I believe that true success emerges from aligning around common goals and fostering open, solution-focused collaboration.
Mastering effective time management while maintaining agility to pivot when necessary is essential to delivering value and meeting evolving priorities.
Understanding the realities of scope adjustments and scope creep is critical. When approached strategically, these challenges become opportunities to refine project direction and strengthen outcomes. Staying proactive and adaptable ensures we are prepared for any unexpected shifts.
I view pushback not as an obstacle but as a catalyst for growth. Presenting to stakeholders has reinforced my commitment to championing strong UX foundations and pioneering design innovations that elevate user experiences.
To my former teammates at Beachbody, thank you sincerely for your unwavering support and collaboration — it has been instrumental in my professional growth.
Reflections and Learnings
BANNER PC SKU
The design request aimed to incorporate a Banner for a Preferred Customer Membership SKU on the shopping cart page.
While the option to add the PC SKU was present, we needed to include the capability to both add and remove it from the cart, along with a confirmation prompt for their decision. Collaborating with Product, I conducted light research and crafted microcopy for the Banner, Confirmation Modal, and emphasized the CTA button to encourage customers to retain their membership. Additionally, I worked with our Design System manager to assess existing Banner and Alert elements, creating new components tailored for the commerce aspect of the business.
Outcome: The functionality to remove the PC SKU was swiftly integrated, and we observed an increased inclination among customers to retain their memberships. We attribute this positive response to the informative modal and straightforward language, influencing user mindset and decision-making.
