Nestlé Hydration Calculator 03: Nailing the visual design

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.


Embarking on the visual design phase, I understood that as part of the Nestlé Pure Life website, it was important to have consistency with the rest of the site. However, since the calculator is a new component I could come up with new elements if needed.

Here are the things I took into account while designing:

  • Consistency: Work within the evolving design guidelines.
  • Typography: Legibility is important.
  • Colour: Make sure colour choices support the information hierarchy.
  • Visual hierarchy: Distinguish between important elements and ‘furniture’ elements.
  • Mobile-first: Sticking with the mobile-first approach, while keeping the desktop version in mind.

Note: At this stage, Ron, our head of design, asked me to focus on the hydration calculators for individual and family, and hold back on the business calculator. The reason was that the design treatment for businesses would be very different. As a result, we should focus on the core audience until the client agreed with our approach.


A character to take you through the calculator

Before starting with the UI design, I had a wireframe review with Ron. He advised me to hide the facts in the Did-you-know section behind some sort of drop-down. Its current placement could slow users down if they wanted to quickly go through the calculator.

I came up with the solution of using a little character that takes people through the calculator and highlights the existence of the did-you-know facts. This would also make the experience more engaging, especially for our main target audience, engaged parents, and their children.

The following gif was created to visualise the concept, using a character reference (source).


V1. Colouring in the wireframe

Started the design process full with excitement, I quickly got through the following screens. I called this the V1 version.

My first attempt in designing the interface. It’s far from over.

I then reviewed my work in progress with Matt, one of our senior UI designers working on Nestlé. One of the first things Matt said was “Nice wireframe. Very high fidelity!”. Needless to say, I was in despair! 😂

“Nice wireframe. Very high fidelity!”—Matt

Looking back at it, I understood why he’d mistaken this for a wireframe. I had worked on the wireframe for such a long time with such a level of refinement it was difficult to step back from UX and think visually and creatively again. Matt also gave me the following useful feedback:


Side-note: After discussing with Sam (UX designer), we decided to take ‘height’ out of the calculator for now. We were not sure if this step was truly necessary. During my research, none of the methods I found online included height as a required input.


Introducing our litter water character

In response to Mat’s feedback, I decided to begin by developing our little water character further.

Our water character and an animation of him running.

I kept the design of the character very simple to align with the existing illustration and pictogram on the website. Using After Effects, I also made a little animation of him running to use in the loading screen. 🏃


V2. “This looks so much like an app” — Everyone

Afterward, I explored a different design direction, stepping away from “colouring the wireframe”.

V2

By using colour as a divider, I created a clear visual hierarchy between the important section at the bottom and the fun-fact on top. I also introduced the curvy line to make it look like our character is popping up from the ground.

I moved the back button to the top left corner. This is due to the button not being clicked very often. From our first user testing, I could see that our questions were simple, straight-forward so users hardly make any mistakes.

Feeling like this was going in a good direction, I then carried on with other screens of the calculator for a person and for a family (V2).

V2

Later that week, I had a review with Ron. When I showed the design to him, he immediately said it looked too much like a native app. This was mainly because I didn’t put the design in context with the rest of the site.

A summary of the advice Ron gave me:

  • Make it look less like an app. Put it in context and make use of existing modules.
  • The Did-you-know section doesn’t feel right. The colour choice creates a wrong visual hierarchy, putting emphasis on Did-you-know section, when it should be the other way around.
  • How can we let users know that our little water guy is clickable?
  • Taking out the curvy line since it doesn’t align with the rest of the
  • Design with desktop in mind.
V2. Highlighting some feedbacks I got from Ron

V3. Better, but not there yet!

With the feedback in mind, I updated the design, called it V3 (version 3). It was definitely a big improvement compared to V2. Here is why:

Comparing between V2 and V3.1

Later on, I decided to keep the Did-you-know facts visible on both mobile and desktop in V3.2. This was a common feedback I got from Andrea, Sam, and Paul (senior UI designers, UX designer, Head of Design).

The reason we hide it behind the water character was that the Did-you-know section used to be placed in front of the question, creating a wrong visual hierarchy (as seen in V2). Now that I have moved this section to the bottom, the facts should be visible, saving users from having to click to read it then click again to close it (V3.1).
Did-you-know section: V2—V3.1—V3.2.

Again, I went ahead and applied the design to the rest of the calculator for a family and for a person.

V3.2.
V3.2. Hydration Calculator for a person.

Learning point

During the initial design phase, Ron advised me that rather than design each page in so much detail, I should have taken some key pages and investigated more options.


Translating from mobile to desktop

When I started working on the desktop version, I suddenly had so much screen space. Since the hydration calculator interface is very simple and minimal, it was very frustrating for me to have so much space and so little information.

Since the interface is very simple and minimal, it was very frustrating for me to have so much space and so little information.

As a solution, I split the layout, having the question on one side of the screen and the Did-you-know section on the other. This way, I didn’t end up having a giant desktop design that looks like it’s scaled from the mobile.


At this stage, I was in a happy place, thinking I’ve nailed the design. It felt good to see your designs progress.

I continued designing the other screens for the one person and family calculators, both mobile and desktop versions. Looking back at this I realised I had already forgotten the learning point from the previous phase.

Screenshot of my enormous Sketch page (V3.2).

V4. “Final” version

I reviewed the design with Paul, our new freelance lead designer. Paul recently started working on the Nestlé Pure Life website so he had a fresh perspective.

Following Paul’s advice, I placed the calculator in the middle of the screen in V4, ditching the split-screen layout for the following reasons:

  • The design of the Nestlé Pure Life US site is very simple, minimal and blocky. Thus, I could get away with having a big and chunky interface as it will align with the rest of the site.
  • In term of reading direction, it feels right having the Did-you-know section at the bottom of the screen. Besides, it’s not a must but we do want users to read the facts. That’s the reason why they’re there. The current placement at the bottom left corner disconnects this section from the rest of the calculator, thus users will most likely ignore it.
Comparing between the split layout in V3.2 and the center layout inV4.

After iterating, I created a prototype for both desktop and mobile versions. Check them out here:

Desktop Prototype: https://marvelapp.com/2b1424e
Mobile Prototype:
https://marvelapp.com/1je3e65


Next step

Version after version, so many iterations! I decided that at some point I got to stop playing and draw a line under it. At this stage, the design was quite solid after a number of expert reviews. Now it’s time for the final testing.

Takeaway

As a young designer starting out, I couldn’t help being insecure about my design. I constantly have the urge to back it up with research, feedback, and reviews with my more experienced colleagues.

As a result, I ended up spending a lot of time working on the user interface. Design. Review. Iterate. Repeat. I had no idea when to draw the line and at some points, I felt like I would be working on the design for months! Sam advised me that “the only way you ever truly get better is by actually delivering something”.

The only way you ever truly get better is by actually delivering something.

I think this was one of my biggest takeaways during the design phase.