Knorr Netherlands ~
UX & Layout Redesign

A/B testing | UX Audit | Wireframing | UI

2022 July

Knorr Netherlands wanted to bring more flavour and freshness to their digital experience, starting with two of their most visited pages ~ the Recipe Detail Page and the Product Detail Page.

The challenge was to make everyday cooking inspiration feel effortless, while keeping Knorr’s brand voice.. warm, approachable, flavorful and alive on screen. Our goal was to refine structure, hierarchy, and interaction across desktop and mobile to help users find what they need faster, and stay inspired longer.

Through A/B testing, UX auditing, and a complete layout refresh, we redesigned these pages to look as good as Knorr’s food tastes ~ clean, appetizing, and delightfully easy to navigate.

The Ask

Knorr’s existing Recipe and Product pages were functional, but lacked the freshness and appetite appeal the brand is known for. Information was buried, visuals were small, and interactions didn’t inspire exploration.

Our brief was to make the experience feel as warm, sensory, and easy to follow as Knorr’s own cooking philosophy ~ simple ingredients, great results.

A/B Testing Insights

Before diving into the redesign, we ran a quick A/B testing experiment using Adobe Target to uncover what layout styles resonated best with users.

The goals were simple yet strategic:

Make recipe imagery bigger and bolder to instantly draw attention.
Improve clickability, scan-ability, and overall engagement.

Variations

We tested three variations.

🅰️ Experience A: Knorr NL’s existing layout
🅱️ Experience B: Knorr US layout
🥦 Experience C: A refreshed layout inspired by De Vegetarische Slager (The Vegetarian Butcher)

Knorr Netherlands Original layout

Knorr US layout

The Vegetarian Butcher layout

Results from Adobe Target ~

Experience C - inspired by The Vegetarian Butcher, emerged as the clear winner.

Most traffic came from mobile, and Experience 3 achieved ~

Significantly higher page views and link clicks
Longer average time on site
A 98% confidence score, surpassing the 95% benchmark for statistical certainty

With these insights, we moved ahead to reimagine Knorr’s digital experience, creating a layout that felt more intuitive, more visual, and unmistakably Knorr.

Site & Experience Audit

With the A/B testing results as our north star, we performed a UX audit of Knorr Netherlands’ website to identify where users were dropping off and how the experience could better reflect Knorr’s vibrant, everyday cooking personality.

The audit focused on three key objectives ~

Improve user journey & brand experience

Ensure we push for

SEO optimization

Drive better

conversion

We benchmarked Knorr against industry leaders like Jamie Oliver, Maggi, and BBC Good Food, uncovering several opportunities for improvement.

🌿 Key Recommendations

Overall improvements ~

Introduce clear page paths and breadcrumbs for easier navigation.
Refine category & recipe visualization for faster discovery.
Remove oversized, irrelevant hero images on category pages.
Improve Buy Now visibility and inspire more user action.

Home & Landing Pages (Scope - audit only)

Add visual recipe categories to guide exploration.
Reduce homepage drop-offs by promoting more recipe diversity.
25% of users didn’t realize Knorr offered ingredient-based recipe categories which is a major missed opportunity.

Recipe Detail Pages

Add breadcrumbs and SEO-friendly titles.
Make sharing, rating, and printing recipes effortless.
Cross-link Knorr ingredients within recipes with a Buy Now CTA.
Integrate videos, related recipe pop-ups, and Future 50 Foods (F50F) references.
Highlight sustainability cues via F50F logos and ingredient tags to educate users on planet-friendly choices.

Product Detail and listing Pages

Simplify navigation and improve load speed by optimizing image use.
Make Buy Now CTAs accessible from the listing itself.
Rework the claims section
(e.g., “Gluten Free”, “No Preservatives”) with Knorr’s distinct green and clean icons for clarity.

Wireframing

🥗 Recipe Detail Page

Our wireframes for the Recipe Detail page focused on making content more accessible and engaging at first glance.

We reduced the image size to balance visuals with readability and placed key details ~ ingredients, prep info, and sharing options within the first scroll.
Navigation was simplified with breadcrumbs and a 'Discover Similar Recipes' sidebar that encouraged quick exploration.
Each Knorr ingredient or Future50Foods (F50F) mentioned in the recipe linked directly to its Product Detail page or Buy Now CTA, creating a clear bridge between inspiration and action.

We also integrated ~

Nutritional values and recipe claims for added context.
A dedicated Products Used section with instant Buy Now links.
Embedded videos to make cooking guidance more intuitive.
Recipe reviews for credibility and community.
Tags/keywords to connect users to similar dishes & ingredients without needing to search again.

🧂 Product Detail/Listings Page

For the Product Detail page, our focus was on clarity, consistency, and conversion.

We designed layouts where the product image shared space with key details, keeping information like ingredients, allergens, and nutrition visible right away across both desktop and mobile.
Breadcrumbs guided users through the journey, and the prominent Buy Now CTA made conversions effortless.

Wireframes also featured: ~

Scrollable product images and easy share options.
Ingredient lists with allergen warnings.
Usage videos and 'How to Use' directions for practical engagement.
Claim highlights (like 'No Preservatives') styled for emphasis.
Reviews, Fun Facts, and Similar Products to keep exploration flowing.
FAQ and Tag sections to address questions and deepen discovery.

UI Prototype

Once the structure was set, it was time to add some flavour. The UI brought in Knorr’s signature greens and yellows, warm photography, and a touch of freshness, creating an experience that feels just as good as it looks.

🥗 Recipe Detail Page

🧂 Product Detail Page

🥗 Recipe Detail Page - Mobile UI

🧂 Product Detail Page - Mobile UI

✨ Conclusion

This redesign refined Knorr’s user journey through data-backed decisions and UX best practices, improving accessibility, discoverability, and overall engagement across devices.

By simplifying page structure, surfacing key actions early, and optimizing CTAs, we created a smoother path from exploration to conversion while maintaining Knorr’s signature warmth and brand voice.