Sensirion: Design System

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

Problem statement

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.

View the headless project here

Approach

With the upcoming requirements of new platforms for Sensirion's business units, a re-usable system had to be put in place. With the Sensirion redesign project we went down the traditional design path with persona workshops, journey mapping and experience matrixes. With all of this knowledge in hand, we identified some upgrades we could make to the design and generate a Design System, from the atom-level, to components, to modules, to full-scale pages.

One point of feedback was that Sensirion's platform had too much wasted space around it's content container. Another was that it was too much of a picture book. The media placed on the platform was, in some cases, screen-filling.

With Sensirion's feedback we went to work by first stripping away modules that were serving the same purpose as others, and determining which ones would be "scrapped". It also provided us with an opportunity to move away from the, by now, outdated 12 column 1280p grid system and instead go with the more future-proof 12 column 1440p grid system. However, increasing the width would also mean even bigger media files unless they would be re-designed completely.

Instead, Crafft and Sensirion decided in collaboration to forego the 1:1 and 4:3 media placement and implement 16:9 media placement as much as possible with a few exception.

This led to us briefing the team to get started on the design system.

Challenges

Seeing as the Design System project ran parallel with the Headless project, requirements shifted and we've had to re-introduce certain, previously scrapped, modules. Also, some modules were re-designed completely from the ground up.

As such we'd have to keep a close grip on the purpose of each module so that, when Sensirion started filling up their own pages, they'd know exactly which module to use for what page.

Since the modules would be part of a completely custom, front-end page builder application, a renaming of the modules was requested which happened at least two times during the process.

We simply kept the legacy names of the old modules and new names above each module so Sensirion could easily identify which module to use.

During the project we were lucky to have a client stakeholder who was very involved and closely collaborating with Crafft during the entire process. However, with the close collaboration we also had to clean up the library multiple times during the process. This close collaboration and quick edits inside of the design system often times caused for confusion with the development team.

As such we implemented a two-file approach. One WiP library where we could collaborate, ideate and adjust where needed. The other one we dubbed our SPOT (Single Point Of Truth) library. The atoms, components, modules and pages that went through the design phases and were approved by the client, discussed with the team and their scope understood, would move into the SPOT. Only SPOT items would be approved for development.

Result

The result of the Design System is a direct digital export to Sensirion's brand guidelines hosted on Frontify. With the new design system they were able to add a digital section to their brand guidelines, whereas it previously contained only marketing and print guidelines.

We were also able to simply generate new pages, landing pages, and even whole information architectures for new business units with the design system.