Designing a better cross-selling widget to increase order value and enhance the shopping experience.
Designing a better cross-selling widget to increase order value and enhance the shopping experience.
Project timeline: 1 month
Using a user-focused strategy, I oversaw the entire design process, collaborated with diverse teams to develop, test, and implement solutions, achieving positive results for the business and its customers.
Product Designer (myself)
UI Designer
Front-end Developers
Customers often purchased only single items, overlooking a range of complementary products. This limited browsing behavior resulted in lower average order values and smaller cart sizes, hindering business growth.
Efforts were previously put into a cross-selling strategy, featuring recommended product carousels and in-page product cross-sell and various modals, but they all fell short in effectiveness.
I researched, designed, and tested solutions to create an innovative product add-on widget., making the customer go from feeling overwhelmed to delighted.
Business Impact
paymentsAvg Order Value
+7%
add_shopping_cartAvg Cart Size
+11%
Imagine an online shopper navigating a vast gourmet market, where each stall offers a unique, delicious ingredient but lacks the suggestion of a complete, harmonious meal. This was akin to Avocado's challenge, where customers would select a singular item – like a mattress – but rarely envisioned the full ensemble of products, needed to create a complete, luxurious bedroom experience.
Customers didn't envision the full ensemble of products needed to create a complete, luxurious bedroom experience.
At Avocado we meticulously craft an eco-friendly bedroom experience, blending luxurious materials in a radically honest, transparent and fair way. Our products are synergistically designed to collectively foster a sense of harmony and wellbeing.
We want an elegant solution that would benefit business growth and engage our customers.
I conducted qualitative and quantitative research to get insights into our customers' frustrations, and their desire for a more integrated shopping experience.
I gathered data from post-checkout and product page surveys. Surprisingly, spending more wasn't a major concern for 45% of respondents; they indicated a willingness to invest in products that were attractive and offered health benefits.
I collaborated with the customer experience team and analyzed their chat logs looking for patterns. Customers would regularly ask about how to care for their mattress, which frame or foundation works best or if they even need one at all.
The previous research gave us a better understanding of the problem:
Users are seeking an efficient and intuitive way to discover and purchase complementary products that align with their primary selections, such as mattresses, without needing to navigate through the entire site.
As an environmentally conscious shopper interested in sustainable living, I want to receive recommendations for eco-friendly bedding accessories that pair well with my mattress choice, so that I can make informed decisions that align with my values and lifestyle.
I researched the competition to see how they designed cross-selling on their product pages. I was surprised by the lack of intuitiveness in these solutions, and little engagement they provided thus, highlighting the need for a more user-friendly approach, particularly for mobile devices.
Our goal remained to maintain an intuitive and user-friendly design, displaying just the right amount of information while keeping in mind certain constraints:
I researched 3rd-party add-on apps in the app store, focusing on customization and performance but ultimately decided to build an in-house solution due to the other constraints.
Users should be able to interact with the options that each product has to offer, making the design more intricate to build.
Various amount of content, products displayed, and more complex options in the future prompted the exploration of various presentation methods.
Option 1 proved ineffective during internal testing.
Some of the problems:
Option 2, despite being better (2 visible products Simultaneously), faces similar issues.
Some of the problems:
I gathered internal feedback from the previous wireframes and designed a third solution.
This new 'stacked' layout seemed to be more effective and solved the problems encountered previously.
I tested the prototype with 8 users of various technical skills representing our customer base and persona.
Objectives and tasks:
Why make it simple when you can make it complicated... Adding products to cart still required considerable thoughts and clicks. The feedback I received was extremely valuable and I didn't expect users to have such difficulties using the feature.
Giving users too much control can lead to undesired results.
When you know your products too well, you might think users "will get it". This false assumptions led to mismatched sizes between primary product and add-ons in the cart.
"So many options and menus, it's overwhelming!"
"I think I added the wrong mattress protector size to my cart."
"I need to be able to see more information about these products."
"It's not easy to use with all these different sizes."
error rate when asked to select a mattress size they would like and add it to their cart with an add-on.
thought the interface looked too cluttered and took too much vertical space.
didn't feel confident making a purchase at this point due to the lack of product details.
I remained positive and confidently faced the ongoing challenge.
I now have all the information needed for the next design iteration. I also gained a deeper understanding of our customers and how they interact with the page.
Working closely with the development team, I explored the different ways we could implement automatic size matching. After evaluating various scenarios and established the feasibility, I built a fourth prototype:
This time, I recruited 3 new participants to get new insights, and 3 other participants from the previous test. The goal was to compare how each group accomplished the different tasks and I can say that it was a SUCCESS!
"I like how all the information is right there."
"It's nice how the small image changes when I pick a different color."
"Very easy to use on my phone and my screen is small."
"This makes me want to add all these products to my cart."
accuracy rate. All the participants on both sides successfully added products to their cart. A 150% improvement!
thought the interface looked organized and easy to use. A 50% improvement!
felt confident making a purchase decision and the information provided was sufficient. A 100% improvement!
My work didn't stop there: developer hand-off with responsive desktop version, testing, continuous enhancements using a/b tests and performance analysis.
Post-launch, I monitored the performance closely, conducted regular analytic reviews and ran multiple A/B tests to further enhance the widget's performance. These iterative changes have led to improved benefits for both the user experience and the business's key performance indicators.
Example of A/B tests I ran:
... which led us to...
paymentsAverage Order Value (AOV)
+7%
add_shopping_cartAverage
Cart Size
+11%
shopping_cart_checkoutCart Abandonment Rate
-5%
highlight_mouse_cursorCustomer Engagement Rate
+13%
We've accomplished a big step towards our ultimate goal, selling the full Avocado experience.
Some products that were hard to sell on their own were now becoming top sellers. Product pages with add-ons performed better compared to the ones without. Product discovery improved as users were browsing the site more from these pages.
Other impactful metrics such as customer satisfaction improved. The feedback received from the Avocado's Customer Experience Team and how it affected their work was also positive.
Lastly, the marketing team was thrilled with the new feature. It allowed them to market more products and setup more attractive sales.
This project wasn't just about meeting business metrics; it was a narrative of understanding and meeting our customers' needs. Through innovative design and a deep dive into user experience, we not only achieved our goals but also significantly enhanced the shopping journey.
This success story stands as a testament to the transformative power of user-centered design in the digital marketplace.
Thank you for reading.