Posten Bring Unifies with Design System and React

Helle and Viggo, consultants at Posten (Norway Post), recently presented a detailed look at how Posten and Bring operate as two distinct brands under a unified platform, leveraging a shared design system and Enonic as their core CMS.

This collaboration has brought significant advantages but also posed unique challenges, particularly in maintaining consistency across brands with differing visual identities and functional needs.

See their presentation here:

Background of Posten and Bring

Posten primarily handles postal services within Norway, focusing on letters and small packages, while Bring is more targeted toward parcel delivery, freight solutions, supply chain management, and support for online retailers across the Nordics and Europe.

Despite their operational differences, both brands now fall under the umbrella of Posten Bring AS, moving away from the earlier Posten Norge naming, which was often a source of confusion.

The two brands have distinct visual identities: Posten is red, while Bring is green. This distinction creates unique challenges for their shared design and technical systems, particularly in terms of maintaining brand consistency while allowing for their individual features and needs.

Design System: Hedwig

The Hedwig design system was developed to ensure brand consistency across all platforms and sites while allowing for flexibility. It includes:

1. React Components: Built to align with Hedwig's guidelines and ensure accessibility.
2. CSS Package: Provides base styles, utility classes, and theme support.
3. Design Tokens Package: Houses reusable variables (spacing, fonts, colors, etc.) that allow for flexible brand customization.

Previously, the design system had only two themes (red for Posten and green for Bring), but a new co-branding theme now allows the integration of both green and red colors for shared sites. The design tokens enable this level of flexibility, something that was previously not permitted.

See also: Gjensidige’s Design System in Enonic with SSR »

The Challenge of Two Brands, Multiple Sites

Posten and Bring operate a range of websites, most of which run on Enonic. These include core brand sites and specialized pages like tracking applications and Bring's regional websites. However, some applications, like Posten’s tracking pages, operate outside Enonic but still rely on shared components like the navbar and footer.

A key challenge is accommodating shared functionality while supporting site-specific features. For example, Bring SA, the largest Bring site, has far more features than smaller sites like Bring PL (Poland), which has just a few pages. This diversity necessitates modularity to avoid bloated applications with unnecessary features.

Modular Enonic Apps

Posten and Bring's technical team has developed modular applications within Enonic to handle their diverse requirements:

• App Bring and App Posten: Initial apps tailored to each brand.
• LibCommon: A library for shared features.
• Separate React Apps: React apps for more complex functionalities, due to challenges with Gradle builds when trying to unify everything.
• Decorator App: A Node.js application that handles the shared header, footer, and other navigation elements, offloading this responsibility from Enonic and ensuring consistency across sites.

The use of a decorator ensures that even applications outside Enonic (like Posten’s tracking tool) can still use the shared design system. The decorator fetches menu and footer data from an Enonic service and integrates them with React components from Hedwig.

See also: Integrating Enonic with Your Design System »

Dependency Management

With over 14 different sites relying on shared applications, deploying updates can be complex. Each deployment carries the risk of breaking functionality for other teams.

Dependency management remains an ongoing challenge, with older apps built using vanilla Enonic starter kits and newer ones using TSM starter. This mix of technologies adds complexity for developers working across different apps.

Future Improvements

The team is looking forward to improvements with the upcoming React4XP version, which promises a more streamlined integration of React and Enonic XP. This update is expected to simplify workflows, enable a more conventional React app structure, and significantly speed up build times.

Conclusion

The shared platform approach for Posten and Bring allows the two brands to leverage unified resources while maintaining their distinct identities.

Despite the challenges of managing dependencies, ensuring brand consistency, and accommodating site-specific needs, the Hedwig design system and modular app strategy have proven to be robust solutions.

With ongoing advancements like React4XP, the technical foundation for these brands is set to become even more efficient and scalable.