A brief introduction: During my graduation internship at Poke I was asked to work on the Nestlé Pure Life website, specifically the hydration calculator and infographics. In this series of post, I’m writing about my design process and what I’ve been learning along the way.
Nestlé has significant problems relating to its brand image. With the information graphic, without addressing the problem directly, Nestlé want to change people perception. This can be done by having information on the site which shows bottled water actually isn’t as environmentally bad as you think it is.
Update the 3 following infographics so that they are engaging to the target audience and clearly and succinctly communicate the message Nestlé wants their customers to leave with.
My role and the team
I am solely responsible for the design update of these infographics. I work closely with Poke’s senior UX and UI designers, Sam Hails and Andrea Lombaard, to review the design.
First infographic — NPL water usage in production phase compared to other beverages
Emma, our copywriter, has been working closely with the client on the Nestlé Pure Life site content. According to her, the right message that this infographic should convey is: Shows bottled water isn’t as environmentally bad as you think it is, compared to other beverages.
The flaws of the original design
I started off with finding out why the current infographic needs to be redesigned. I tested the design with some people in the office and only a few actually got it without me explaining. Together with Emma and Andrea, we identified the following mistakes:
- Misleading Comparison: The comparison implies different beverage amounts rather than communicating that different amounts of water are needed to manufacture the same quantity of each beverage (1 litre).
- Inaccurate Scale: The size of the beverage icons don’t accurately reflect the relationship between the the amount of water used in the manufacturing phase for each beverage. The different fluid level in each icons also serve no purpose.
- Uninformative Headline: The original top headline doesn’t summarise the data. The most important bit “the production of 1 litre of these products” was placed at the bottom of the infographic, and in small font size. This is in contrast with the F-Shaped pattern for reading web content.
- Colour Confusion: Colour choice for the icons adds complexity to the infographic and. Not to mention it is quite confusing as well (bottle of milk in grey and tea in pink). These colours will need to match the new branding.
- Illegibility: Design is not legible on mobile.
- Other minor mistakes: Inaccurate Nestlé water bottle shape, and inconsistency in icon line-weight.
Early layout explorations
Having spotted the errors in the current infographic, I started exploring new layouts by sketching them down on paper.
I kept in mind that design needs to work on both mobile and desktop. Thus, I quickly realised that the beverages should be displayed vertically so the labels can be legible on mobile. I also explored the different options to visualise the various amount of water that goes in the production phase, includes water droplet, water wave, solid row, etc. To stay closely with the new branding, I decided to go with the water droplet.
The question now is how to use water droplet scale to accurately demonstrate the relationship between 2.6 litres and 1000 litres. Some of the initial explorations used 2 different droplet size, a small one represents 1 litres and a large one represents 100 litres. I relinquished this concept as it adds complexity and forces the reader to do more work.
Struggling finding out the right solution, it was probably time to take a break. Let’s move on to the beverage icons. When I’m ready to tackle the scale layout again, I can go back to it with a fresh pair of eyes.
In the original infographic, the team noticed that the water bottle icon doesn’t come close to the real NPL water bottle. To fix that, I created a new icon by tracing the actual product shape before simplifying it.
Then I continued with the rest of the beverage icon set. While designing, I tried to use rounded corners as much as I can. This is because they’re easier on the eyes, especially for children and families (NPL main target groups). Rounded corners are also more organic to how we use everyday objects in the physical world.
Back to the layout
How to use water droplet scale to accurately demonstrate the relationship between 2.6 litres and 1000 litres?
Returning to the infographic, I sort of had a solution to the struggle I had earlier: Using an almost empty 100-litre droplet to demonstrate 2.6 litre. It pretty much says “Look! We use just this tiny bit of 💧 to produce our water!”.
I worked up the design in Sketch and asked for feedback from the design team, which is summarised below:
- Design is still unclear. Need to specify the output is 1 litre of each beverage.
- Good that the new brand colours are incorporated in the icon backgrounds. However, they’re visually too dominant, which distract users from focusing on the actual content. The curvy lines combined with tinted colours added complication. The use of hot pink makes it feel negative towards the end.
- Header and beverage labels are still quite small when viewed on mobile.
I took the feedback into account and continued working on the design. In the later version below, I stripped down the icon backgrounds and added beverage output quantity to make the comparison more clear.
I also explored the option of putting the “1 litre” in the beverage label to make it looks less repetitive. Nope! That would make the label super long and make the information harder to scan.
I tested the design with my colleagues in the office and received good feedback. Everyone found the infographic clear and easy to understand within a few seconds. Woohoo! I guess I got the “approachable” and “informative” bits. But what about “fun”?
Having the layout in place, I started exploring different colour option while while being restricted to a corporate colour palette.
The dark background versions (2, 3) clearly don’t work since they’re quite hard to read. I was debating between the left and the right option.
The version on the right looks more lively with the use of hot pink colour, but created a wrong visual narrative. Thus, I decided to go for the option on the left.
The final design is bright and allows users to understand the infographic quickly.
Compared to the original version, the final design solves the following problem:
- Correct Comparison: The comparison communicates that different amounts of water are needed to manufacture the same quantity of each beverage (1 litre).
- Accurate Scale: The drop visual match the amount of water used in the manufacturing phase for each beverage.
- Visual Connection: Colour choices together with the extended line dividers support the narrative and helps uses understand the infographic quicker.
- for the icons and the adds complexity to the infographic and. Not to mention it is quite confusing as well (bottle of milk in grey and tea in pink). These colours will need to match the new branding.
- Legibility: Design is legible on both desktop and mobile. The mobile version is not the smaller version of the desktop comp. It has been altered to increase the legibility on mobile.
Second infographic — Recycling Process
Improve Nestle’s reputation for sustainability by showing their bottle recycling process.
The original design
Unlike the first infographic, this one was quite clear in term of the story-telling. However, the design is not visually compelling and definitely doesn’t work on mobile.
In order to make the 6-step recycling process easier to understand, Emma, our copywriter, has given me an updated version of the copy before I started the design process.
The updated 6 steps are collecting, sorting, shredding, cleaning, melting and reusing.
I tackled the design by working on the icons first.
In stead of using the circular layout in the original design, I went with a different direction, using the layout below for the following reasons:
- It works better on small screens and mobile devices.
- Top-down reading direction
- Timeline order
Besides, I also had to take into account that this infographic would be used on the Nestlé Pure Life USA website. The site will be built using a set of modules. Thus, I discussed with Andrea (lead designer in the project) and we agreed on using the module with one big picture on one side and dynamic text on the other. This will allow the content to be found via organic search.
Third infographic — The water that goes into making one litre of Nestlé Pure Life
Being transparent about how much water Nestlé used in order to produce one litre of Nestlé Pure Life water.
The original design
I started with finding out what problems need to be solved with this infographic. Here are the flaws in the current version:
- Wrong type of chart: The main purpose of this infographic is not to show the individual parts that make up a whole, but to compare values (various amount of water used in different production phases). Thus, using a pie chart does not accurately reflect the information. In fact, I was specifically requested not to include the total number 2.6 litres.
- Unclear Title: “Along the product life cycle” sounds very general and unclear. The infographic is meant to compare the amount of water using in various phases in order to make one litre of Nestlé Pure Life water.
Layout and colour explorations
I created the following set of icons to visualise each phase of the production cycle.
Then I continued with exploring various layouts. Designing with mobile in mind, I thought it might be good to use the vertical row layout. However, after discussing with Andrea (senior UI designer), I quickly found out that this doesn’t working. As users read from to to bottom on screen, the there would be too much emphasis on the first step “Manufacturing”.
I also decided to eliminate the icons since they made the design more complicated, especially on mobile.
As mentioned before, the main purpose of this infographic is to compare values. Thus, the different phases should have the same hierarchy level so users can quickly make comparison.
I was also experimenting with using gradient for the drops and bubbles. However, we only use solid colours within the Nestlé Pure Life US site so it doesn’t make sense to have gradient colours.
I went through a few colour exploration and decided to use a light background colour for better legibility and also to make this infographic visually align with the other two.
How about combining two infographics into one?
I tried combining the first and the third infographics for the following reasons:
- There was a connection between these two infographic in term of the message they need to convey: One shows how much water it takes to produce Nestlé water compared to other beverages, the other show how that amount is divided between different production phase.
- They’re placed next to each other in the same page.
When I showed the combined layout to people in the office, it took them a really long to understand the information. As a result, the team and I decided not to go with this approach since it caused more complexity.
The final designs ensure legibility, support the right information hierarchy and convey the right message. They have been tested with my colleagues and have been reviewed by the team.
Putting it in context
Putting the two infographics in context, I decided to place the first infographic on top of the third one for the following logical reason:
- We explain the principle that for every litre of beverage, there was additional water used in manufacture. Having establish that principle, we could then make a comparison between bottle of water and other beverages. Highlighting the fact that water was the least wasteful.
I have solved the problems of the existing infographic and communicated the key point effectively. The methodology ensured the design fit for purpose. The main proof of this is that the design has been signed off by the team in the review session. It has also been shown and signed off by the client. “I never understood what that information graphic was supposed to mean until now!” — said Sarah Johnson, Nestlé Global Brand Manager.
“I never understood what that information graphic was supposed to mean until now!” — said Sarah Johnson, Nestlé Global Brand Manager.
Note: Because the site won’t go live until the end of the year, the only measures of success can be either client sign-off or team sign-off.