Case Study

Website UX

Enhancing Online Shopping with Sound

How Bose’s Interactive Audio Demo Boosted Conversions by 22%

Design of an intuitive online demonstration of the noise cancelling technology for users of the e-commerce website. To help users better understand the noise cancelling capabilities of our headphones.

Year
2021

Company
Bose Corporation

Desktop prototype created for a simulated noise canceling demonstration on the website.

Project Overview

This product demo was to be the first one of its kind on the website. The purpose was to test and evaluate the viability of possibly expanding and scaling this type of demo to other products we sell.

To determine if this would be a viable option for customers on the website, the experience was launched as an A/B test. The results would help us determine the need before pushing forward with development work and scaling the experience to other products.  

My Role

I was the principal interaction designer and collaborated with an art director, copywriter, audio engineer, front-end developer, and digital producer.

The Opportunity

Our customers are looking to spend $200-$300 on a pair of headphones. They may hesitate to purchase if they can not experience some of the features of the product they chose from the website.

Since more customers are purchasing online, coupled with the global pandemic keeping customers out of retail stores to try products, we wanted to provide an alternative experience that would help customers in their purchase decision of headphones and instill consumer confidence in that purchase.

We asked ourselves

How might we offer customers an experience that would demonstrate to them the power of the noise cancelling technology in our headphones from the comfort of their own homes?

Considerations

  • What would this look like on the site?

  • Where would this fit into the product story (placement on PDP and messaging)?

Product Detail Page (PDP) at launch. Showing both desktop and mobile views.

With all the content on PDPs, placement for the audio demo panel was a key consideration.

Project Goals

We want to give users browsing the website a way to experience how the different levels of noise cancelling in our QuietComfort Earbuds work. This demo will be part to be a feature on the product description page. Allowing users a deeper understanding of the product’s noise cancelling capabilities.

Assumption: Most customers want to try before buying, especially when spending upwards of $300 for a pair of earbuds. The goal here is to increase consumer confidence to buy online.

Hypothesis: We will increase engagement and conversion on the QuietComfort Earbuds product page with this new demo.  Potential customers will be more likely to buy QuietComfort Earbuds when hearing the adjustable simulated Noise Cancellation audio.

Business Goals

  • Increases online sales of QuietComfort Earbuds. 

  • Increase engagement with the website/PDP.

UX Goals

  • An easy and intuitive experience for users to understand the impact of noise cancelling while using our headphones.

  • Experience that adds value and engages the user.

How do we plan to validate?

  • A/B Test at launch

  • Usability test via Userzoom

A/B test pages for QuietComfort Earbuds

A/B test for validation

QuietComfort Earbuds Product Detail Page: Versions used in A/B testing shown. Control version (left) without demo panel. Test Version (right) with demo panel.

Design Process

Step-by-step analysis and review to improve the usability of the demo, and have an intuitive and consistent experience created for the website for testing.

  1. Analyze demo layout/interactions provided by the art director.

    • Provide an audit and review design proposal to understand visual intent.

  2. Implement best practices for usability and interaction.

    • Reduced the number of audio levels for simulation from ten levels to three levels.

      • Ten audio levels of noise cancelling meant that the demo would require ten separate audio tracks. The tracks would need to be synced and played throughout the user's interaction with the demo.  

      • Ten levels introduced a lot of clicks for users with little contrast between each audio experience level. 

      • Three levels simplified the demo and demonstrated the noise cancelling capabilities.

  3. Considerations of existing site functionality and calls to action for consistency and keeping layout within brand standards.

    • Updated to use similar UI and icons on the site.

    • Placement considerations on the Product Detail Page to help ensure the content on the page is telling a story and guiding users to interact with the demo.

  4. Create a prototype for development.

    • Handoff with a detailed explanation of intended interaction and provide all assets for demo.

Revisions for Interaction Design

Evolution of interaction design from the first image of a sketch from the Art Director, through UX revisions to the layout based on current site experience, best practices, and feedback.

Starting Point: Art Director supplied file

Revision/Version 1: UX design

Revision/Version 2: UX design

🚀 Final UX Design

Results

Through the A/B test implemented on the site, along with a qualitative research study on customer experiences on Userzoom, the following were some insights and results…

Overall

The participants were surprised and delighted with the experience. 

22%

Increase in product orders by 22% on the Product Details Page with the audio demonstration.

18.5%

Increased user engagement with the page. Users spent 18.5% more time on the page using the demo.

Conclusion

These results confirmed our hypothesis and met the business goal of increasing sales.

“It’s actually a really cool demo. Nothing confusing or frustrating.”

— Participant from Userzoom Study

Final prototype of audio demo for mobile devices.

Conclusion

Learnings: The test shows that the audio demonstration can drive additional QuietComfort Earbuds orders.

Future Improvements: From user testing, we received feedback to add different scenarios or background noises, move the demo higher up on the page, and include an off option to stop the demo (although the demo stops once the user scrolls past the panel on the screen).

Outcome: This demo has been scaled and implemented for sound simulations for headphone and speaker products across Bose’s website.

Tools Used

Adobe XD, Photoshop, Adobe Experience Manager (AEM)