PostNL

PostNL has rapidly digitized in recent years. Various suppliers gained full control over individual products. While the organization has made significant progress, its digital landscape has also become fragmented. This has compromised the consistency of the user interface. As a user, you notice that the various products function and look slightly different. Profitability is also under pressure. Therefore, there is a need for greater efficiency within the digital department. PostNL's development teams, in particular, were performing a great deal of duplicate work. It was time for a consistent and efficient solution: a design system for all PostNL teams.

PostNL uses React as its primary framework. Therefore, it was crucial that components were built within it. Because various PostNL products are built using different frameworks, we also developed web components as a unified solution. This way, every team can use the design system.

The new PostNL corporate identity is a key driver for the design system. Implementing the new branding requires additional work for all teams. Thanks to the design system, this process is very quick and easy. The design system is not only incredibly efficient for current applications, but also a valuable asset for the organization in developing and validating prototypes. Within a day, developers can create a new prototype, which previously took two weeks.

Design tokens

PostNL's updated corporate identity and component design are incorporated into Figma. It is therefore crucial to integrate with this design tool. We developed design tokens, which allow us to extract key information from Figma for building the components. Design tokens are values ​​needed to translate the design into data, such as typography, color, shadows, or movement. These pieces of code ensure that the visual appearance and user experience are consistent across every product. As soon as the design is updated in Figma, it is immediately pushed to the components in the Design System. The design and code are automatically synchronized.

As the market leader in postal delivery, PostNL considers it crucial that everyone in the Netherlands can use its digital products. One of its design principles is "We are here for everyone." Accessibility, or digital accessibility, has therefore been a key focus of this Design System. Designs are only finished when they are accessible. PostNL's apps already scored well on accessibility, but the web products required more work. With the design system, we improved multiple products simultaneously. This not only allows PostNL to serve more people, but also prepared them for the European Accessibility Act, which came into effect on June 28, 2025.

Good documentation is essential for a successful design system. A single source containing all guidelines ensures that current and new colleagues - from designers to developers and from marketers to copywriters - work in the same way. We use Zeroheight for Stamp's documentation. All design guidelines and principles, accessibility checklists, components, and flows are described there. This ensures the design system is used as intended.

The main drivers for incorporating the design system within PostNL's teams were digital accessibility and the new branding. To introduce the design system across the entire organization, we first mapped all digital products and teams. We organized these based on business value, backlog, budget, and compatibility with the design tokens and components.

The design system was first introduced to the PostNL.nl team. After the launch of the redesigned website, the use of the design system immediately became widespread throughout the organization. Other teams became enthusiastic about using the system. For one product, we developed a separate implementation for a specific framework (Angular). This led to increased use of the design system and increased employee satisfaction within these teams.

Governance encompasses all processes surrounding the design system. This is crucial, as a design system is most valuable when it is embedded within the organization. At PostNL, we've managed this in various ways. The Stamp documentation tracks which functionalities are being worked on and which bugs have been fixed for each technology. For maintenance and support, the feedback loop has been expanded with a Slack channel. Users can quickly and easily ask questions and get answers about the design system's operation. This also leads to new improvements for the design system.