Sensirion: Going Headless

This project was made during my time at Crafft as a Product Owner.

Sensirion, one of the world's leading manufacturers of sensor technology, went live in Q1 2022 with a completely new platform and a total redesign of their corporate identity. The next step was to apply this design and the new codebase to their internal business units' platforms. By this time it became clear that each business unit had their own specific wants and needs, which would generate a lot of extra costs to realise. Sensirion wanted to ensure the corporate identity of Sensirion would be reflected across all of its business units with minimal discrepancies from each other.

The idea was to create a modular design system that could be used to easily generate designs for new platforms. It's important to understand this project was done during the same time as the headless project. As such we were designing for immediate implementation. 

We had a dedicated team working specifically for Sensirion. This was an interdisciplinary team consisting of UX/UI designers, Front-, Back-end, and Full Stack developers, DevOps specialists, and a QA department.

After identifying how much extra effort each business unit would take in the maintenance and continuous development, we looked at different options to tackle the issue. One solution was a multi-site approach, and it became clear a single code-base would be the way to go.

Additionally, to provide interconnectivity between the business units' platforms, we'd propose to go headless and connect all platforms via a REST API.

The request to go headless came with a request for a lot of flexibility on page content. Due to the nature of headless, we had to come up with someting new. The idea for a front-end pagebuilder application was born. This application has provided Sensirion with all the flexibility they required while keeping the headless benefits.


Creating a headless platform with a page builder on the front-end meant that we could not use server-side rendering. The monolith platform was built in a fashion that required many database requests and these would be tackled by caching (ReDIS), CDN's (CloudFlare) and server side rendering.

In turn, caching would prevent the Sensirion administrators to immediately see the adjustments they made as the previous version would still be available in the caching until the cache would be flushed.

After close collaboration with the client and the team, we understood the technical limitations we were facing. However, Sensirion was happy to implement a release-workflow where they would only edit on the staging environment and the content would be pushed to production once per week.

We also implemented a cache flushing mechanism on the Production environment in case an urgent adjustment would have to be published immediately.


Sensirion has a big visitor count in mainland China. However, due to the golden-shield project (China Firewall) we experienced difficulties with loading times in this region.

The project's time constraints did not permit to fully adjust everything to adhere to the Golden Shield Project's rules, we were able to improve the loading times of the platform by implementing a localised CDN and optimise the load balancers.

We took care of the cloud environment in the Google Cloud Platform. We created a Kubernetes Cluster that was future-proofed into hosting all of Sensirion's platforms.

The entire digital ecosystem resided within the Google Cloud Platform. Certifications, Databases, Backups, CDN's, ReDIS caching and load balancing is all tackled from here.

The Front-end was built using Nuxt based on the Vue.js framework. The pagebuilder application is completely built within this framework and connects via the REST Api to the back-end to manipulate page content.

For the back-end, as mentioned we use a singular back-end codebase on the Django framework. We only utilise the DjangoCMS to provide isolated administrator interfaces per business unit. The back-end is completely Python based and uses a REST API to connect to the front-end.

At the end of Q1 2023 the headless platform went live. The page builder application provides Sensirion with a lot of flexibility in creating their own content. Looking at it from an abstract visualisation, the implementation of headless is now complete, and the base-plate building blocks for expanding into a micro-serviced solution are now available to Sensirion. We have basically taken the functionalities of the old monolith platform and segmented them into front-end and back-end.

The platform is now set up in a manner that we can easily enabled / disable business units. Code updates are automatically rolled out to each business unit and, upon release, available on every platform.

Since going headless, and using a new grid system, we completely re-did the front-end development and as such, immediately implemented the changes that came with the design system such as a wider grid-system and adjusted modules.

 

The project went live on March 7th 2023.

For the long-term vision we proposed to strip it apart even further, and micro-service the entire platform, and allow interconnectivity between all business units.

In the image below we can see the REST API at the center connecting the business units at the top line and the stripped out functionalities in their own micro services at the bottom line. The left-top shows the heart of the navigation with a search database that's already being filled constantly with a content parser, analysing all content of the sensirion.com platform.

    More case studies