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
Years
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.
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.
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
Uncover 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.
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.
Progressive disclosure
Present information gradually, only as it becomes relevant or necessary for the user.
- reduce cognitive load
- decluttered UI
- user has control
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
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
Get 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.
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.
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.
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
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 prototypeFeatured work
UX and EyeCandy.
© All rights reserved. Images belong to the brands.