Building an Internal, EditableStatic Style Guide For Knorr

Working with Knorr

Knorr is a company that probably exists in your kitchen, you may even be able to recall their iconic logo from memory, or at least know their brand colours. One of our partner agencies, Poly, came to us with a requirement to build a brand guideline for Knorr. Knorr’s primary business is in the food industry and they have a long history being over 140 years old. Combining these two factors means that they have a strong brand and strong brand recognition. Protecting that brand and educating members of their large teams about that brand and what specifics contribute to it became a priority for the company.

They had come to Poly looking for a solution, who had suggested a digital design book meaning that it could be accessed by all members of the company at any time. Poly then came to us to figure out a way that we could make this work with modern reliable tech stacks. It had to be performant, responsive and most importantly we had to be able to make the designs look perfect on every screen. This project was design and user experienced focus with the technology stack being chosen to support the process.

Creating a dynamic static site

To create a dynamic static site for Knorr's digital design book, we chose Contentful and Gatsby as our technology stack.

Contentful

Contentful, a headless content management system (CMS), was selected for several reasons, each of which will be discussed in detail below:

1. CDN for Images
2. : One of the key reasons for choosing Contentful was its content delivery network (CDN) for images. This feature ensures fast and reliable delivery of high-quality visuals, which is critical for presenting Knorr's brand guidelines and product images in the best possible light. A CDN allows for better performance and faster loading times by distributing content across multiple servers worldwide and serving it from the server closest to the user, significantly reducing latency and ensuring a smooth user experience.

1. Integration with Gatsby
2. : Contentful's seamless integration with Gatsby played a major role in our decision to use this headless CMS. Gatsby's powerful features and capabilities are further enhanced when combined with Contentful, allowing us to create a highly efficient static site that meets Knorr's requirements. This integration simplifies the process of fetching and displaying content, making it easier for us to develop and maintain the digital design book.

1. Flexible Data Structure
2. : The block-building architecture of Contentful enables infinite flexibility when designing the data structure for the site, allowing us to adapt to Knorr's specific needs. This flexibility is essential in creating a digital design book that accurately reflects the company's brand guidelines and effectively communicates their values and identity. By tailoring the data structure to Knorr's requirements, we were able to create a custom solution that met their expectations and provided a solid foundation for the site's design and functionality.

GatsbyJs

Gatsby, a popular static site generator, was chosen for the following reasons, which will be elaborated upon in the following paragraphs:

1. Static Generation
2. : Gatsby's ability to generate static pages ensures high performance and security for the digital design book. Static pages are pre-rendered HTML files that can be served directly to the user, eliminating the need for server-side rendering and reducing the load on the server. This results in faster page loads and a more responsive user experience, which is crucial in providing a smooth browsing experience for Knorr's team members. Additionally, static sites are inherently more secure, as there is no direct connection to a database, reducing the risk of data breaches and other security threats.

1. Data Layer
2. : Gatsby's data layer is another key factor in our decision to use this static site generator. The data layer integrates well with Contentful, enabling us to fetch and display content efficiently. Gatsby's data layer utilizes GraphQL, a query language that allows for precise data fetching and reduces the amount of data transferred over the network. This results in faster page loads and a more efficient use of resources, ensuring that the digital design book remains performant even as it grows in size and complexity.

1. Image Handling
2. : GatsbyImage, a powerful image processing feature, allows us to optimize images for various screen sizes and resolutions, ensuring a consistent and visually appealing experience across devices. GatsbyImage automatically generates multiple versions of each image, each optimized for a specific screen size or resolution. This enables us to serve the most appropriate image for each user's device, reducing bandwidth usage and improving load times. Furthermore, GatsbyImage includes features such as lazy loading and image placeholders, which further enhance the user experience by prioritizing the loading of visible content and providing a smooth transition as images load.

Emphasis on Design

To create an engaging and informative digital design book, we focused on three key design elements: menus, style, and carousels.

Menus

The user interface (UI) and user experience (UX) of the digital design book were designed to provide easy navigation and quick access to information. We developed intuitive menus that allowed users to browse through content categories and subcategories with ease. This streamlined navigation system ensured that company members could efficiently locate and access relevant brand guidelines.

Style

The digital design book's overall style was developed to reflect Knorr's brand identity, incorporating the company's color palette and design elements. We also focused on creating an interactive experience that mirrored the essence of the Knorr brand. By incorporating animations and transitions, we crafted a visually appealing experience that both informed and engaged users.

Carousels

Carousels played an essential role in displaying different types of information in unique and elegant ways. We designed various carousel layouts to showcase content, such as brand guidelines, product images, and promotional materials. These carousels were not only visually appealing but also animated smoothly, providing a seamless browsing experience for users.

Conclusion

Antler Digital successfully developed a digital design book for Knorr that effectively educated company members about their brand guidelines and protected the brand's identity. By leveraging powerful technologies like Contentful and Gatsby, we created a dynamic static site that was both performant and responsive. Additionally, our focus on design elements such as menus, style, and carousels ensured an engaging and visually appealing experience for users. Working closely with our partner we delivered a bespoke digital experience elevating the traditional costly and an uneditable physical brand design books.