Bowers & Wilkins is Britain’s leading manufacturer of high performance speakers and headphones. Since 1966, the brand has built an unrivalled reputation for innovation and sound quality, earning countless awards and the endorsement of many of the world’s leading recording studios and musicians.
‍
I was tasked to redesign the website to better reflect their high-end products and services they offer. To create a new responsive shopping experience. The website focuses heavily on their beautiful imagery by keeping the design minimal where possible to let the products speak for themselves.

One of the key things to fix on the new site was the navigation. The site ranges from the 800 Series, portable headphones to wireless speakers. A huge range of products so it was important to have a section for each category. Allowing users to target specifically on what they want with one scan of the top navigation. Product names are quite cryptic so it was important to show a product image where possible to help understand the product better.

Bowers & Wilkins products are premium to say the least, so it was important to tell the products story, show off its technology for the keen tech enthusiasts. Reviews were key to feature, something that resonates well with the target audience so these were brought to life throughout the page.

Retaining customers, new customers and guest checkout were needed to support all areas. Bowers operates in 20+ countries so currencies and different delivery thresholds had to be considered. The checkout was primarily based on Magento 2’s platform so customisation was limited.

Bowers & Wilkins have a huge legacy and the story is told throughout the new site. New users can gain trust whilst retaining users are free to explore and dive into the rich heritage of the brand.

There was a few guidelines already set before the project. The brand have used Helvetica since the beginning of time so there was no changing that. As well as setting UI rules throughout the project, digital guidelines were set up to ensure consistency for future designs.

The build was outsourced so organisation and well annotated files were key. The handover consisted of design components in desktop, tablet and mobile. As well as key pages throughout the site. Everything was uploaded to Zeplin to ensure consistency. Key animations were completed in After Effects and Framer.