Avocado Green Mattress

Designing a better cross-selling widget to increase order value and enhance the shopping experience.

About

Overview

Designing a better cross-selling widget to increase order value and enhance the shopping experience.
Project timeline: 1 month

Role

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.

Team

Product Designer (myself)
UI Designer
Front-end Developers

Project background

Challenge: Going Beyond Single Item Sales

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.

Solution: An advanced product Add-On Widget

I researched, designed, and tested solutions to create an innovative product add-on widget., making the customer go from feeling overwhelmed to delighted.

support From overwhelmed to delighted, we...

  • Help users make informed decisions by providing the right amount of information, reducing cognitive load.
  • Show compatible products, enhancing the original product's experience.
  • Display all the available options, reducing friction.
  • Enhance product discovery.
  • Seamless integration into the product page.

sports_score Positive business outcome

Business Impact

paymentsAvg Order Value

+7%

add_shopping_cartAvg Cart Size

+11%

Discovery

Nobody enjoys a 1-course meal

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.

The Avocado Ecosystem
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.

what do we want

savings Customers are willing to spend more... for the right products

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.

survey results

support_agent The CX team chat log showed a pattern

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.

customer chat

Define

Customers want an intuitive way to discover products

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.


auto_stories The conscious shopper story

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.

What does the Competition look like?

compare Uncovering real opportunities for intuitive cross-selling

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.

competitive

Competitive Analysis Takeaways


  • Four out of ten competitors didn't offer add-ons
  • Two were to upsell the original product
  • Only one competitor had the option to see more product details
  • None of the designs offered product customization
  • Some of the designs looked cluttered and touch target sizes were too small on mobile

Ideation & Validation

Designing with constraints

Our goal remained to maintain an intuitive and user-friendly design, displaying just the right amount of information while keeping in mind certain constraints:

storefront Shopify limitations

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.

settings Variety of product options

Users should be able to interact with the options that each product has to offer, making the design more intricate to build.

ballot Scalability

Various amount of content, products displayed, and more complex options in the future prompted the exploration of various presentation methods.

My first two attempts got rejected early-on:

 

Option 1 proved ineffective during internal testing.
Some of the problems:

  • dangerous Only one visible product at a time
  • dangerous Swipe can be problematic to pick products
  • dangerous Difficult to see selected products

Option 2, despite being better (2 visible products Simultaneously), faces similar issues.
Some of the problems:

  • dangerous Swipe for more still a challenge
  • dangerousDynamic product content, hard to maintain equal height

Third time is the charm?

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.

thumb_up Changes I've made based on the feedback

  • select_check_box Increased touch zone sizes
  • select_check_box Removed swiping
  • select_check_box Visible full option list
  • select_check_box Easily change product selection

Validation

The moment of truth

lift_to_talk Ready, set, test!

I tested the prototype with 8 users of various technical skills representing our customer base and persona.
Objectives and tasks:

  • Add/remove items from cart
  • Understanding the price (before/after)
  • Interacting with the different options
  • Content relevance (enough details to make a purchase?)
  • Time on task, interaction issues

I might have Created More Problems

clinical_notes My assumptions were wrong

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.

school What I learned

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.

  • select_check_box Gained a better insight into our users
  • select_check_box Clearer direction for the next iteration
  • select_check_box Users mentionned potential positive impact on the shopping experience

Fourth Time Is The Charm!

diversity_3 Evaluating technical feasability & prioritizing feedback

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 new design features:

  • select_check_box A single dropdown updates all the add-ons
  • select_check_box Color swatches for visual clarity
  • select_check_box Preview image changes according to the selected options
  • select_check_box Product detail overlay for more info

The moment of truth part 2

diversity_3 A new hope

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!

Improvements accross the board & delighted users!

"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!

Final design & Implementation

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:

  • select_check_box Adding customer reviews
  • select_check_box Moving the widget from above to below the add to cart button
  • select_check_box Changing the checkmarks to words (add/remove)
  • select_check_box Add to cart from within the more details overlay

... which led us to...

Business and customer impact

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.


Conclusion

Final thoughts

sentiment_very_satisfied Happy customers, happy business

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.

Other Projects