Fjordland Succeeds with Next.js and Design System

Introduction

Fjordland is a renowned Norwegian brand owned 51% by the TINE cooperative. They are especially recognized for their ready-made meals, and their brand roster includes Yoplait, Safari, Bremykt, Brelett, and Kos.

TINE and Fjordland are currently undergoing a significant digital transformation. After using Enonic as their CMS since 2005, TINE and Fjordland faced challenges related to outdated processes, suboptimal technology implementations, and fragmented solutions.

With numerous internal changes and a desire to modernize, TINE and Fjordland decided to invest in new frameworks that could provide the best developer and editor experience.

Challenge

As the years went by, TINE’s digital solutions generally and Fjordland’s specifically became cumbersome and complex to maintain and develop. This was due to a lack of focus.

Furthermore, the Fjordland site was not mobile-friendly—a critical shortcoming when over 80% of users access the site via mobile devices. The Fjordland brand umbrella also had five different websites built on various other CMS platforms, each with its own agency, design, and features. 

Additionally, existing frameworks like Freemarker and Thymeleaf were outdated, necessitating a solution that could unify all brands under one platform. With a fragmented system and a lack of centralized expertise, Fjordland wanted to adopt a more long-term strategy to leverage strengths across the board.

Solution

To address these challenges, Fjordland chose to implement Next.js as their new framework, through the ready-made Next.XP integration provided by Enonic. This setup was combined with TINE’s own design system, KREM.

The decision to use Next.js was made to achieve the best developer experience, allowing developers to work exclusively with React and TypeScript without the need to maintain data. This also provided access to a mature and reliable front-end framework with a large developer community.

In implementing the new solution, Next.js was chosen for its React purity, flexibility, and strong developer community. Tailwind CSS was used for styling. The Next.js application is hosted in Azure, while Enonic runs in parallel. This setup slightly increases operational complexity, but offers significant flexibility for Fjordland.

KREM is TINE’s own design system, developed to standardize UI components across all brands. Previously, TINE had TIFF (TINE Frontend Framework), but it was not managed and required modernization. With KREM, they now have a single “source of truth” for design, which not only offers a unified look and feel but also aids in universal design and accessibility.

The design system is built upon TINE’s brand manual but has been expanded to cover digital needs like hover effects and interactive elements—areas previously unaddressed.

As for content, everything is centralized in Enonic. The new solution simplifies the updating and maintenance of product data across websites, as well as the articles and recipes.

In the editorial interface of Content Studio, editors could previously make changes both using the content form and the visual page editor. Now, editing is delegated to the content form exclusively, even for landing pages by using blocks. This simplification has made the editor experience more intuitive.

While the earlier editorial regime allowed for extensive flexibility, it often resulted in a chaotic “free-for-all” situation. The new approach, though it sacrifices some flexibility, offers a more structured and streamlined workflow. This has enhanced productivity and consistency, making it easier for editors to update and maintain content.

TINE has also established a design system forum that meets every 14 days. Here website owners and editors discuss needs, share experiences, and collaborate on new features. The development of new components, like e.g. a carousel, has been greenlit in this way, as it is seen as relevant and a long term benefit for several TINE brands.