Sonos is the ultimate wireless home sound system: a whole-house WiFi network that fills your home with brilliant sound, room by room. With more than 1500 employees, and a $1.7 billion revenue in 2022, Sonos is growing extremely fast.

They contacted Pixel Alliance to help them launch Sonos products on new European markets.

To do that, the Sonos EMEA team needed a website that would showcase Sonos products in several languages, and have relevant content for each local market. They also wanted the flexibility to extend and customize the website over time.

This is a major challenge for Sonos to expand its commercial horizons to new countries and adapt its marketing to specific geographies.

We often worked with traditional CMS like Wordpress and Drupal, as many clients are familiar with them. However, there have been many performance issues with these solutions, and they imposed many limitations on the frontend. That's why we started shifting to newer, modern technologies such as Headless CMS.

Sonos also used WordPress for their website, but it was not a great fit for building a product catalog with 15 product pages, each in 8 languages. It was also challenging for the editorial team to manage content using WordPress - they could have accidentally changed the frontend without following the design guidelines.

We needed to facilitate the processes of adding the initial content in English and translating it into other languages. To achieve that, we were looking for a product that would be easy to use for content editors and have multilingual support.

Strapi met all the requirements for this project: 

• it's user-friendly, even for non-technical folks

• it allows us to manage multiple pages in many languages while having a good performance

• it's scalable and has integrations with localization software such as Localazy which was a key element to properly manage all the translations..

With Strapi, editors can focus on the content and forget about the rest.

We used Docker to build the stack, as it permits us to scale and isolate services easily.

The whole stack is served by an NGINX reverse proxy that acts as a load balancer for the different services.

The frontend was built with Nuxt.js, to provide a fast and interactive user experience, while allowing faster and more efficient development using this Vue component framework. Nuxt also allowed us to build a fully reactive and smooth multilingual website on the frontend.

We used Server Side Rendering because localized SEO was an important factor for this project. We built a product sheet model, and the data model was built following a logic of extensibility. To achieve this extensibility, we used two technics:

• A mix of static data that are common to all product sheets (title, price, etc...)

• Dynamic zones for Sonos to be able to organize the layout of their product sheet depending on their marketing material.

Here's what it looks like: Most components have a nested structure, which makes them extremely configurable.

The website has to be translated in 8 languages (and counting), and we rely on Localazy to manage the translations. We chose Localazy as it has its own Strapi plugin and made the translation process smoother. The ability to populate the back office directly from Localazy was a huge time saving, and separating the concerns between the initial content editing and the translation processes has been a time-saver for the different teams.

For instance, here's an example of a product sheet being translated in Greek in Localazy.

The Sonos team can manage content independently using Strapi - they don't need to ask the agency to make updates or add new pages. Using the dynamic zones and components, they can customize every page as they see fit.

The website has lots of media files, that's why the editorial team regularly uses the media library. The folders are very handy to organize all files according to the product. We have also installed the SEO plugin that helps the editors optimize their content for better ranking on search engines and gives them a tool to evaluate  specific criterias i.e Meta tags, keywords, etc and provide hints on what to fix.

With Strapi, we spent less time on building the data model, as the creation of the back office was very agile. Making modifications of the data model was easy to do, and we easily implemented all the fields Sonos wanted for their product sheets. This speeded up the feedback and iteration processes, which in the end helped us to deliver the final product in three months - 2 times faster than before.

We also noticed a performance improvement after building the website using Strapi as compared to WordPress: the lighthouse performance score grew from 25 to 99.

Finally, with Strapi, we can customize the project 3 times faster than before, and quickly add complex features if the client needs it.