Bose

To cover a range of the entire product line, product categories included Earbuds, Frames, and Speakers, and stories are editorial articles. I initially reviewed site analytics and internal product materials, and we remotely engaged the Bose team to gain insight into their product marketing and customer behaviors. I also requested a CMS review and learned of its lack of modern features; punctuated by rising mobile traffic this would influence the design process.

The following opportunities emerged:

• Increase visitor education outside of the product page
• Afford product comparison
• Tailor experiences based on user goals
• Validate new mobile components to identify where Bose should allocate development resources

From the output of discovery, I developed content and feature concepts for both product categories and stories in parallel to potentially arrive at a set of templates, and start to visualize a framework across pages.

Product Categories / This process exposed how each of the product types have different content contexts; familiar (Earbuds), new/niche (Frames), and navigational to sub-categories (Speakers).

Stories / Story concepts explored formats and content types intending to inspire and increase product knowledge, while the stories list was explored later in the process as a browsable aggregate of all article content.

With limited time, the research priority was on product categories, to understand the mental model around how visitors discover and assess products. Validating template directions at a high level, I wanted to learn what kind of content resonates, and how repeatable formats could be tailored for each product.

It was also important to understand how new components that allowed content to be grouped together would affect content density and page engagement, and translate that into guidance on internal development.

Super cool thinking there. Categories are to show options. If testing warrants that this is yielding high-performance, I would put this into development.

Templates were effective, content matters, and evidence supported developing components

Overall, templates enabled participants to compare similar familiar products, understand a new product, and browse a larger category of differing product types; adding confidence to further define my concepts and establish a framework.

But, what they’re comprised of is highly important; including supporting content that demonstrates ‘relatable’ use cases and facilitates comparison and product usage (e.g. product benefits, video, lifestyle and product form factor imagery). We also noted that inline related content was mostly ignored unless it supported product shopping.

Content grouping was preferred across all concepts and I was able to provide Bose with a recommendation to prioritize these types of components with regard to development resources.

Combinations, or sequences, of content sections, enable template modularity, consistent authoring, and live A/B testing.

Comparison Template (Earbuds) / Aids user comprehension and review of a product line, facilitating self-selection.

Introduction Template (Frames) / Introduces users to an innovative product category, and provides selection guidance.

Category Directory Template (Speakers) / Provides paths to subcategories.

Three primary templates cover a range of lifestyle and product editorial directions including buying guides, profiles, and product launches:

Standard Template / Employs baseline components for consistently presenting a variety of content in a basic framework.

Structured Template / Facilitates repeatable story types with pre-defined patterns.

Photo Template / Tells an immersive story, visually.

Using Bose’s existing UI library, a collection of interactive tiles, content containers, CTAs, text blocks, galleries, and more were built as components for all templates. With CMS limitations, this balanced both the present and future.

As a result, templates can adapt to a range of product and editorial needs.

Completing the project involved packaging up a collection of materials as an implementation guide for Bose teams to author content and allocate resources to expand their platform by building new features:

• Provided a validated content strategy and template system for creating meaningful page experiences
• Provided guiding principles as ‘experience strategies’
• Produced an annotated implementation guide including all sample page template designs and variations, a library of components with development considerations, and interactive prototypes
• Recommended to develop a horizontally-swiping container that can be built into multiple components across devices