Case Study

Website UX

Optimizing Consumer Confidence

A UX Approach to “Why Buy Direct” at Bose

Interaction design to support marketing stakeholders' request to understand the best way to message and present content to instill consumer confidence—design provided for an A/B test with the website test team.

Year
2022

Company
Bose Corporation

Control and Test versions side by side, showing desktop and mobile views.

Project Background

Based on a newly designed landing page on the site with details on the benefits of purchasing products directly from Bose.com, the marketing experience team wanted to leverage that page as a basis for an A/B test for placing this information in the e-commerce area of the product detail page.  

My Role

I was the principal interaction designer and worked in collaboration with a content strategist, front-end developer, data analyst, and product owner for the website test team.

Project Overview

Gaining insights on customer purchase behavior through the implementation of a test. To understand the impact of changing the shop with confidence messaging on product pages. 

Ask per brief: The shop with confidence messaging should be more engaging and clear to users than the "i" icon next to the messaging triggers an overlay/more information. 

Taking this directive from the stakeholder was the starting point for UX and content exploration to provide a solution.

The purpose of this test is to understand if there is a way to increase prospect purchase consideration with clear messaging as to why they should purchase directly through Bose. We need to test modifications to the shop with confidence messaging and iconography. Additionally, we need to change the content of the shop with confidence overlay to complement the new landing page. 

Newly designed landing page for Buy Direct from Bose, to leverage for adding for A/B Test of messaging and interaction on the product detail page.

The Opportunity

Marketing Stakeholders were looking at ways to increase conversion and one way was to instill consumer confidence in purchases from the site. Customers may not be aware of the benefits of purchasing directly from bose.com. Benefits include the 90-Day free trial, free shipping, product support, or product warranty.

Goals/Hypothesis

Hypothesis from the stakeholder: If we restyle and change the shop with confidence messaging on site we will increase prospect purchase consideration to buy directly through Bose, increasing the site-wide conversion rate. 

Hypothesis from UX: If we provide a visible way for users to dive deeper and easily return to the task at hand, research/product purchase. This added content that they receive will help build confidence in purchasing Bose products from bose.com.

Design Process

My Task: Design a visible interaction for those customers that want to dive deeper into the benefit and warranty information. Finding an easy and intuitive way to present this information with adding the least amount of friction to the path to purchase.

  1. Competitive analysis to understand how other companies are showcasing shopping with confidence messaging. 

  2. Collaboration with content strategist on which important points to include.

  3. Review of current and future site capabilities to keep the test in line with current site functionality and keep the experience for the text consistent across the site.

  4. Early ideation for peer review with the UX team to receive feedback and push forward designs for stakeholder review.

  5. Mockup of two possible solutions prototyped in Adobe XD for stakeholder approval.

    • Option 1: separate link and overlay for each of the four benefits.

    • Option 2: one link and one overlay containing all four benefits.

  6. Handoff of interactive prototype to front-end developer of interaction and functionality.

  7. QA of experience prior to launch with feedback for the front-end developer.

Some highlights from the artifacts delivered…

Competitive Analysis

Review of three competitors to see how they handle this messaging and content on product detail pages.

User Flow

Quick user flows showing high-level interactions and listing pros, cons, and considerations.

High-level user flow for the task of finding out more information about Why Buy Direct from Bose.

Mockups

Provided two possible options for solution early on (revision 1) to align the intended direction with the team.

Option 1: Individual links and overlays

Option 2: One link and one overlay showing all four benefits.

Prototype  

Interactive prototypes (desktop and mobile) to show the intended interaction and flow for development needed to test versus the control version. The test will hit 50% of site traffic to the product detail page.

Interactive Adobe XD prototype in action for desktop devices.

Tools Used

Adobe XD, Photoshop, Adobe Experience Manager (AEM)