Unilever

Knorr

Bringing flavour to people's lives through a new and fresh digital experience

BRIEF

 

Deliver a new online experience on Adobe Experience Manager (AEM) platform created by SapientRazorfish that promotes a new look and feel through a best in class user experience for Knorr globally.

OBJECTIVE

 

The platform itself is made up of a series of components that have a set number of characteristics within them and creativity would have to be managed and adjusted accordingly.

Use the learnings I have gained from Dove and Axe previously in the run up to Knorr and work with two Senior UXers and receive oversight from a lead UX.

EXPERIENCE PRINCIPLES

 

The team defined five experience principles to help craft our ideas around:

  • Joyful

    We believe that food is one of the greatest pleasures in life and flavour is there to be celebrated.

  • Authentic

    Knorr is authentic in everything it does. This is our guiding principle for the brand, in the food we make, the stories we tell and the way we behave.

  • Inspiring

    Knorr is inspirational, a partner in the kitchen, who provides cooking ideas when you need them.

  • Generous

    We believe that food is an expression of love and should be shared unconditionally, with passion and affection.

BUDDY TEAMS AND PROCESS

 

We had to deliver this project in 8 weeks and the team itself was larger than previous Unilever projects that I had been part of.

We had Managers for both UX and Visual Design who would oversee three buddy teams comprising a UX designer and Visual designer.

Each buddy team would feedback on progress to the two managers and occasionally share progress with the Creative Director on the account.

APPROACH

 

I was fortunate enough to get up to speed on this project by helping out on the Category UX.

This piece of work took place before the initial kick start for the Knorr online experience but covered all brands across the Foods spectrum for Unilever.

It also helped the team to ground a lot of the thinking in line with the AEM platform.

IDEATION - LANDING PAGES

 

Straight after our initial briefing we got on to scamping and ideating on different pages with my visual design buddy, we did some desk research to help fuel inspiration, did a quick look at existing content to understand the different types of recipes we would need to cater for, and then began sketching out components with the mind-set of piecing together a range of templates in the coming days.

Here is where we got to after a few hours work:

When presenting this exploration back to the client I tried to back up the designs with a simple one line statement:

Recipe Landing Page
Tempts you to discover flavours, make your mouth water and dive deeper to find the perfect recipes

Recipe Category Page
Get users to fall in love with food, get hungry and excited to cook

As part of the structure and process defined on the Unilever account we had weekly and sometimes twice a week catch-up with the client.

To take this initial thinking and exploration to them I brought up the fidelity and with my UX colleagues began to create an Axure template structure across all the sprints that allowed us to re-use components within our designs.

IDEATION - NAVIGATION AND FILTERING

 

My lead UX defined the sitemap but the biggest challenge faced with AEM was the components and the way they are built. When designing the navigation, I found myself using different section navigation and link components to build up a navigation from the ground up rather than an out of the box solution.

This provided greater control and I was able to leverage change requests that we had tried to implement on AXE previously. By using those change requests we could prioritise and escalate the need for certain functionality across more than just one brand to the platform team.

Here are some sketches of the exploration I did with one of our platform architects. We pieced together components to help create this full screen navigation with multiple sections that a user could explore in line with the sitemap. Fundamentally the navigation and filters are an experience I can explore without the need to navigate to another page which is what the out the box component proposed.

HOMEPAGE ANALYSIS

 

As part of some research for another sprint we wanted to understand what and where users were clicking on the homepage.

A) Navigation - Users adopted an approach of navigating the site through the navigation more than any of the promo/main content on the homepage.

B) Flavour Pots Promo - 3,348 Clicks - Received more clicks than any other piece of content on the page.

C) Popular "Next Page Path"

Popular links that users visited from the homepage in order of popularity were Products, Recipes, Flavour Pots, Recipe - Chicken Curry and About Us.

*data shown from 26th July 2015 to 25th July 2016.
**total clicks shown as amalgamation of respective link on the homepage.

SOCIAL THINKING

 

Based on requirements gathered from the client, the appetite to serve up social content in the future was something I was tasked with exploring. I reached out to our platform teams to understand the current components we had and what offerings we could bring to the table.

Here's the current social networks supported by our platform team:

Based on existing content I proposed the following:

The client was happy to go with an existing component called "Tab" which we continued to explore. As part of a past project on Dove, I remembered we had a social video component which could pull in YouTube videos and playlists. When we spoke to the client about this, it transpired that they had a batch of playlist videos that they were about to release. We fed this insight into our final deliverables.

TEMPLATE CONFIGURATIONS AND COMPONENT MAPPING

 

An important part of any big build project is the need to share template configurations and component mapping documentation to help our teams understand how our designs can come together on a set template.

Based on my learnings from Dove and AXE, I had a good idea on how the document could be structured and began to piece together each template into a final documentation for our offshore tech teams.

In an effort to minimise confusion I also combined both documents and referenced them accordingly with lettering and numbers to make cross-referencing easier.

THE CURVE

 

As the project developed over time my attention turned to motion and how we could bring a static website to life.

As a show piece of the project the Knorr curve is derived from a curve in their logo.

I came across this when getting to grips with Principle and the anchor points used to tweak a curve. This influenced all of the motion design across the website.

PROTOTYPES

 

As part of my own development I taught myself Sketch and Flinto. Principle then began to become an emerging prototyping tool which was perfect for presentations and creating quick interactions. However, it lacked the ability to create on scroll animations with ease.

We were fortunate enough on the project to have a front-end developer as the go between for our offshore platform team. He was able to help validate our designs and communicate more complex interactions early on in the project.

As a team we made a decision midway through the project to bring a handful of pages to life through some coding, and due to the pitfalls of Flinto and Principle, I recommended we built a quick smoke and mirrors prototype with HTML5 and CSS3.

We pieced together a handful of pages to communicate a single journey and presented this experience to our most senior stakeholders. We were able to use out the box libraries to define a structure and whilst it wasn't production ready code from the perspective of illustrating a journey it stood up to the task well. Nothing beats putting a working prototype in front of an enthusiastic client.

After we flexed our capabilities and passion for delivering a best in class foods site we began conversations about governance and how we inform and educate the 100's of editors across the Knorr network to keep their submarkets inline with the new online experience. This is where conversation arose around a potential styleguide.

Knorr - Hero initial load

Knorr - Product Listing on scroll effect

STYLEGUIDE

 

I created the initial styleguide as a proof of concept to illustrate the need for a go to guide. This evolved into another project in 2017 for SapientRazorfish and the team are currently working on this project with the final deliverable yet to be delivered.

Simply put this a step-by-step, piece-by-piece guide to Knorr's new site. It details what, when and how to use it. It will also help to inspire content creators, as well as to create and craft a great experience for their users.

Menu