Case Studies

Bose

Frontend development for Bose's accessible Product Support platform, integrating AEM and Khoros Communities to help customers selfsupport through manuals, guides, troubleshooting, and community knowledge.

Screenshot of the Bose Product Support website; part of John Kavanagh's selected project work.

In Brief

As part of a wider website refresh, Bose relaunched its online Product Support portal and Community Forums to give customers a more effective selfservice support experience. The new hub brought together manuals, product information, troubleshooting, and community discussion in a single place.

My Role

I developed the front end as a reusable component system, building complex Mustache templates within a standalone Node.js application. The components were designed for integration across Bose's AEMmanaged support site and Khoros Community platform, with accessibility, performance, and content manageability treated as core requirements.

Technologies

bose.co.uk/support
  1. Mustache
  2. Modernizr
  3. HTML5 & Less
  4. AEM
  5. Khoros
Photograph of the Bose SoundLink Mini speaker, in silver.

In Detail

The Product Support Portal was intended to move straightforward support journeys towards selfservice, reducing pressure on Bose's customer service teams. Customers could resolve common issues through product documentation, troubleshooting content, and community knowledge before needing direct support.

The component library used Mustache, Less, Modernizr, and Storybook, following Bose's stringent brand guidelines. Components for the Community platform were shared with a thirdparty supplier for integration into Khoros, whilst the remainder formed the AEMmanaged Product Support experience. Together, they supported manuals and troubleshooting content across hundreds of products, including historic products more than a decade old.

Accessibility and performance were central to the platform. At launch, average page loads were a little over one second, supported by modularised code and lazyloading techniques, whilst accessibility work targeted WCAG Level AAA. The support site went on to receive more than 250,000 visitors a month, with daily forum post counts often exceeding 10,000.

Homepage

The Product Support homepage acted as the main routing layer for the support experience, directing visitors towards direct Customer Support, categorised Product Details Pages, or the Community forums depending on what they needed.

Screenshot from Bose Product Support website homepage, desktop screen size.Screenshot from Bose Product Support website homepage, mobile screen size.

Community Homepage

The Community experience combined Bose's own support content with peertopeer help. Visitors could troubleshoot product issues, download manuals, or move into the forums to find and discuss solutions shared by other Bose customers.

Screenshot from Bose Community Product Support website homepage, desktop screen size.Screenshot from Bose Community Product Support website homepage, tablet screen size.

Product Details Page

Product Support pages were populated automatically from Bose's main product catalogue, bringing together product details and imagery with manuals, guides, troubleshooting, videos, compatible accessories, and servicing options in a single destination.

Screenshot from Bose Product Support website showing Product Details page (a set of A20 Aviation Headsets), desktop screen size.Screenshot from Bose Product Support website showing Product Details page (a set of A20 Aviation Headsets), mobile screen size.

Need this kind
of technical help?

This project reflects the kind of handson engineering and technical direction I bring to complex web platforms. Get in touch if your team needs similar support.