WorkMethodAbout

Case study

2024

Immersive Brand Stories

Bringing customers closer to sound in the abscence of physical stores

eCommerce, Website

Long story short

Leveraging our design system to create immersive, user-centric online interactions that replicate the in-store experience and engage customers on a deeper level.

My role

Senior UX Designer

Company

BOSE

I played a key role in guiding and collaborating with the CX optimization team, leading the development of a customer-centric information architecture for explore and product experience pages. Our strategy focused on leveraging immersive experiences driven by a passion for sound, aiming to build lasting customer relationships. Educating the user on the product’s possibilities and its usage through storytelling. Convince the user that the product is the right one for them as well as propose similar products that respond to their needs.

Disciplines involved (A-Z)

Marketing — Content — Design — Development — CRO — SEO

The Challenge

Illustrating the power of sound by creating immersive experiences that encourage exploration, not just shopping, prioritizing the consumer's overall sound experience over mere transactions.

Desire preceds
purchase 

Problem statement

In the absence of physical stores, customers are missing the hands-on experiences that result from exploring audio products in-person.

Context

Our UX strategy focused on creating a seamless shopping and checkout experience that converts customers. By using interactive and educational tools, we needed to empower users to meet their sound needs and engage them meaningfully, prioritizing their journey over brand promotion.

Simplified navigational path

SHOP
Direct path to purchase via intuitive groupings.

EXPLORE
Discover based on listening moments.

SUPPORT
Best-in-class customer support.

New site structure
The new site structure integrates analytics, user insights, content, and strategy to guide customers to products they love, outperforming the previous taxonomy according to user testing.

Sound Occasion

User mindset

"I don't know which product will meet my need."

Explore

Cross-category groupings

Bridge the digital-physical by allowing customers to 'try' and 'feel' products and discover the ideal product for their sound needs.

vs.

PLP

User mindset

"I'm looking for some headphones."

Find

Category overview

Provides a fast and guided way to identify the ideal product from a diverse range, highlighting their distinct features.

PXP

User mindset

"I'm looking for the best noise cancelling headphones."

Learn

Flagship product

Center the site around a core group of products and provide content that allows customers to immerse themselves, fostering a sense of ownership.

vs.

PDP

user mindset

"I need headphones for work, with specific features."

Purchase

Product information

Enable quick comprehension to help customers confidently confirm their choices and make purchases.

Customer insights

Persona

We serve the music lover

Our design decisions were guided by a persona deeply rooted in the love for music and technological enhancements. This persona, characterized by a strong desire to "feel the music," values quality and immersive sound experiences that allow them to listen critically, relax, and set the mood according to their preferences.

User pain points

Unable to visualize the benefits of a product in their daily music listening and entertainment routines

User testing learnings

We aimed to assess the effectiveness of the product experience page's storytelling in educating and encouraging potential buyers. Additionally, we sought to understand customer reactions to copy, imagery, and page rhythm to determine if anything is missing from the experience.

The interview was conducted in partnership with an external agency, guided by the UX strategy we developed.

Sound 
Occasion 

Themed shopping

eCommerce PlatformUncover customer needs and priorities to identify the Bose product for the sound occasion (activity) that matters to them.

Explore

What are Sound Occasions?

Sound occasion pages respond to the "listening moments" strategy, tapping on our learnings about how customers use their products in specific contexts.

Shop by Occasion

These pages allow us to showcase multiple product categories around one use case, explain how uniquely Bose technology delivers better sound, and tell a more engaging story that goes beyond just product.

  • Guide users that don’t know much or haven’t yet made up their mind about a specific range of products
  • Showcase currated products based on specific use cases around occasions locations and locations

Simply and go

I developed an initial concept to guide our information architecture, serving as our north star. With limited time for research, we leveraged the existing knowledge and relied on our expertise and best judgment.

Goals

  • Leverage the explore section to drive more organic traffic
  • Surface relevant content to website visitors
  • Improve page exploration, discoverability and better connect to other areas of the website

Action items

In order to achieve our goals we’ve covered the following action items

  • Defined purpose of SO/PXP Pages to highlight products, integrate categories and drive emotional engagement.
  • Audit & optimization of motion to assess animation and transitions, establish motion principles and create modular reusable components.
  • Guide development by setting rules and motion guidelines, balanced page elements and improve UX contextually.

Proposed solutions & recommendations for 'explore' pages

Our solution centered on developing a story-driven, actionable, user-centric page that leverages technology enabled by real-life situations to guide users to products.
This approach prioritizes user behavior as the driver of technology, with products playing a supportive role.

Key ingredients

  • Focus around one specific occasion/activity.
  • Set context by provide familiar locations.
  • Use technology benefits to engage users.
  • Showcases cross-category groupings based on shared technology.
  • Drive for familiarity and consistency.

Key ingredients

Highlight

Information Architecture

While staying true to our overarching goal, we proposed the adoption of a formula that not only enhances user exploration but also simplifies maintenance for our internal teams.

Information Architecture - SO

Progressive disclosure

Present information gradually, only as it becomes relevant or necessary for the user.

  • reduce cognitive load
  • decluttered UI
  • user has control

Progressive disclosure

Clear entry points

This approach not only caters to diverse customer interests but also aligns with the trend of providing curated and thematic product collections to enhance the overall online shopping journey.

  • familiar groupings that resonated to users
  • consistent focus on ocassion

Progressive disclosure

Highlight

Proof of concept

Leveraging our information architecture and adhering to our motion principles and guidelines, we aimed to rapidly develop a testing prototype that closely resembles the final product. This self-initiated effort proved successful during discussions with stakeholders, even if it was a work in progress when demoing it.

View prototype **NOTE Only chosen ones have access so be ready for a password.

Product 
experience 

Discover

Ecommerce Best Design PracticesGet customers closer to sound and educate by letting them feel, try and immerse themselves in the products, while building mental ownership.

Learn

What are PXPs?

The PXPs (Product Experience Pages) were developed to address a recognized gap in our website's user experience.

PXP strategy

Why PXPs?
We required a solution to establish hierarchy within our product lineup and effectively convey the story of our flagship products in a more immersive manner. This solution needed to evoke an emotional response and facilitate a "show and tell" experience, enabling users to explore, interact with, and develop an affinity for the product before transitioning into the purchase phase.

PXP flow diagram

Goals

We aimed to address specific UX challenges, focusing on enhancing usability, performance, and emotional engagement across the platform.

  • reduce or eliminate animations on components where usability is compromised by excessive motion
  • Surface relevant content to website visitors + update content to provide richer context and link imagery with more emotionally resonant copy
  • Improve page exploration, discoverability and better connect to other areas of the website
  • improve performance and user focus by expanding the use of static components
  • refine scroll mechanics and timing adjustments to enhance performance and user experience on both desktop and mobile
  • ensure video animations behave consistently across the site, displaying text concurrently with video playback to optimize page load times. Eliminate scroll-triggered and parallax effects.
  • reduce unwanted negative space to improve content density and user engagement, without disrupting the overall UI in special use cases.

Highlight

Information Architecture - PXP

Sound Occasion approach to a formula proved to be succesful thus we approached the same solution for our PXP pages.

Information Architecture PXP
Information Architecture PXP

Local navigation

Valuable orientation and wayfinding aid — the local navigation indicates to users where they are and what other content is nearby in an information hierarchy.

Hypothesis

The inability of users to easily access and understand product overviews and distinctions may result in lower engagement and reduced purchasing intent.

Solution

Provide straightforward access to product categories and clear explanations of their relevance and differences to enhance user understanding and engagement.

Local navigation structure
Local navigation proposals
Local navigation proposals
Mobile-first proposals prepared for user testing.

Highlight

Adding depth when communicating benefits

Beyond the page structure we introduced an approach that would facilitate the communication of our product’s benefits. This method showcases layered information, allowing users to explore topics of interest in greater depth at their own pace.

An invitation to discover

Show & tell

Excite → Present

Learn

Educate → Expand

Build trust

Convince → Emphasize

Wireframe with annotations for Excite / Educate / Convince

Wireframes were annotated to support the 'Excite, Educate, Convince' strategy, providing clear guidance on each step of the approach.

Highlight

Proof of concept

The prototype highlights the present/expand/emphasize approach. Our objective was to gather directional feedback from users, which will guide us in making further incremental changes.

The prototype is a work-in-progress, with some content still pending, yet it has proven successful as a POV (point of validation) with stakeholders.

The End

Deliverables

  • Design System Guidelines & Recommedations
  • UX Strategy & Approach
  • Information Architecture
  • Documentation
  • Prototyping — Webflow  Explore 'At Home'  |  PXP 'Ultra Open Earbuds'

Personal Note

In large, global companies, it's crucial to recognize that change occurs incrementally and can be challenging to implement. Celebrating small victories is essential to maintain momentum and encourage ongoing progress.

Out there

View prototype

More from

All Projects →

BOSE

Sound is power. Sound has the power to transport us. Transform us. To make us feel alive.

Audio Electronics, B2C  |  Purmerend, NL

2022 - 2024

Case study2024

Solid Foundations

eCommerce, Website

Featured work

SOLID FOUNDATIONS

Case Study2024

Setting the foundations for an immersive shopping experience.

eCommerce, Website

UX and EyeCandy.

© All rights reserved. Images belong to the brands.