Brief

Nutri-Genetix has developed the world's first genetically personalised nutrition shake and reached out for help with redesigning their homepage ahead of its re-launch at the end of 2020.

​

I led the redesign of the Nutri Genetix homepage for their DNA personalised nutrition shakes.

My responsibilities included user research, concept ideation, aligning key stakeholders on product goals, and incorporating user feedback into design iterations.

 

​

​

Defining The Problem

We conducted interviews with 8 people who had never heard about or used Nutri Genetix before and found that most participants were skeptical about personalization with a DNA test. 

 

​

​

The Challenge

The Nutri Genetix e-commerce site was under reconstruction, after attempts of launching the site at the start of the year they reached out for help, as they felt they were losing market share to growing online competitors. 

The task was to redesign the user experience starting with the homepage, using the existing content, and deliver a solution with a desktop-first approach that would attract new customers while not alienating existing users.

​

​

​

The Opportunity 

Through detailed and extensive user research and testing, we believe will gain an understanding of what works, what could be improved, and what needs changing on the NGX website.

 

​

How NGX can create an experience focused on the customer?

What makes NGX unique and how will NGX capitalize on that?

​

 

And lastly, on our side - building a list of improvements for the site that is based on the feedback and insights from our research. 

​

​

The Process

A wide range of different online meal replacement sites was tested. This helped us gain a better understanding of what others in the market were doing as well as getting in the mindset of a regular online meal replacement and nutrition site. 

Initial ideas and concepts were explored using post-its and sketches before a workshop was held with key stakeholders. This helped us to understand more about the user and also to understand the business objectives of online nutrition shakes with a DNA test. 

​

​

​

​

​

​

​

​

​

​

​

​

Research

To begin our research, we identified 3 key areas to focus our research on:

​

The first is Information Architecture, which is the structural design of shared information environments, such as organizing and labeling websites. So here, we’re answering questions like ‘How is it displayed?’ Where can the user find it? And Is it clear?

 

Next is Content, and this is really important because the content you create communicates your message, educates your readers, and persuades them to purchase your products and services over your competition. So when testing, we’re looking at questions like ‘what do the images tell the user?’ ‘what is the purpose of this video?’ ‘How are the instructions explained?’

 

And lastly, we’re focusing on understanding the User Journey. This is critical because it will enable NGX to better understand how customers view their products and services, what their intentions and values are, and how a customer interacts with the brand or business at different touchpoints. “Why is the user on the website? What do they want to do? What do they actually do? 

​

 

​

​

Screener Survey

We started our research conducting an online survey and we wanted to focus on questions that gave us an idea of people's experience with meal replacements and protein shakes.

​

​

 

 

 

 

 

 

 

 

 

 

 

The three biggest motivators for purchasing a meal replacement and or protein shake.

​

​

User Interviews

In the second step of research, we conducted 6 user interviews where we could further dig into the habits and experiences, the users we selected  had an average age of 33, we made sure that there was a slight majority of females as NGX wants to target the female consumer

 

Key things to understanding from the user interviews were user's motivations for using nutrition products and what factors ensure they have a positive user journey. 

The key motivators were the ingredients and what benefits they would get from them and also time & ease of use.

 

We also wanted to understand, in an open and unbiased forum, what users' perception of ‘personalization’ is and it was largely one of skepticism that was rooted in brand trust and what would be done with user’s data.

 

​

​

Market Research

As part of our research, we conducted a competitor analysis with our 6 interviewees. As part of this process, we did not mention which company we were working with so it didn’t cloud their judgment in any way.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

We chose three brands similar to NGX, two that are meal replacement specific and one with personalized vitamins. 

​

​

​

​

Desirability Ranking

To get the first impressions, we showed users only the landing page on separate slides. First, we asked them to rank them from the most desirable to least based on what they saw,3 out of 6 selected NGX, while Huel got zero votes. We felt this was important to include in our research, as the stakeholders identified Huel as the most desirable competitor. 

To get a more in-depth understanding of the pro's and con's of each of the competitors, I compiled the feedback with a focus on their wording, personalisation and visual impression.

​

​

​

​

​

​

​

​

​

​

 

​

​

 

​

 

 

 

 

 

 

 

 

​

 

​

 

 

​

 

 

 

Showing only the landing page visible, We then asked them to describe the brand value of these companies and the words that came out of the NGX site was personalised, good quality, healthy, luxurious, and science forward.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

The NGX Landing Page

We tested key pages of the site on a broad demographic of users to see how they navigated around the site and what pain points they encountered.

 

On the homepage, one that kept coming back was why there is a tab for investors. The user said that this made them question what the company goal was as this felt very corporate and contrary to what they would expect to see on a nutrition companies web page.

​

​

​

​

​

​

​

​

​

​

 

​

​

​

 

 

​

Goals

Two things that came up on the tests of the goals section were that the pictures contradicted each other and left users feeling like NGX was for elite athletes.

And also the navigation, that no matter which one you clicked on you ended up in the same place. As the product packaging didn’t differentiate much, the only thing that was changed on each page was the product name. The majority of the information remained the same throughout.

​

​

​

​

​

​

​

​

​

​

​

 

​

​

​

​

​

​

DNA Test

Something that came quite often was the reaction that the pages are too text-heavy. Users are time poor and want to get the information they need quickly and at present, a number of pages require a larger investment of time than the majority of users are willing to give.

As one of the main aspects that made users curious about the brand, information about the DNA test and process was a challenge for many to find. 

 

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

Product Images and Info

The overall message from the users is that the aesthetic works, although the quality of each of the images is not consistent. 

One key here is why the products are on sale, or if there is a sale at all. The majority of users picked up on this noting that everything offered on the site was on sale and the feedback was that it made them lose trust in the brand. One last thing was that the food shots jarred slightly with the product shots, distracting from the product. 

 

​

The Homepage

Another key aspect of the homepage that I wanted to look into, was the length and repetitive content. The feedback about how confusing and overwhelming the homepage was from user testing, I made an overview of the whole homepage and compared it to the competitors. 

The NGX site has 2-3 times more sections and nearly 4 times repetitive call to action buttons. The length of the site showed to cause frustration and too many CTA leads to the same page. The number of sections not only decreased the value of the brand and the product but it also made the users frustrated as it was time-consuming to go through all the content and the majority felt like leaving the site.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

​

​

​

​

​

​

 

From left to right: Vitl, Huel, Soylent and NGX

​

​

Site Usability

Regarding the messaging, 5 out of the 6 felt that the messaging was aimed at athletes and in particular, for men. Their reasoning is messaging, colors, and imagery. For example, the words ‘compete harder’. Another example is the wording  ‘workout obsessive’ that you see in this section. This is contrary to what we understand NGX’s goals, which is to be seen more as a wellness brand and appealing to women first. 

 

When we asked their thoughts on the DNA test, the first assumption of the majority of new users is that DNA tests are done with blood samples. There isn’t clear enough information on exactly how the tests are done without doing further reading on the site, this is something that should be changed as soon as possible to minimize time investment from new users to search for the information that should be one of the first things they should see.

 

​

User Persona

After gathering data from our in-person interviews and online survey, we created our persona - Sophie embodies the traits of the targeted audience NGX wants to reach and having her in mind when making the changes to the site helped us to focus on the problems we're trying to solve. As a successful and busy account manager, her motivations are time efficiency,  fitness goals, and finding products with quality sourced ingredients that fit her busy lifestyle. Her frustrations are nutrition brands that are marketing to men and gimmicky brands that do not honor what they promise.

​

 

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

NGX Site Remake

With Sophie in mind, we wanted to show an example of the desired length of the NGX that would suit her needs, which is time efficiency and information that is clearly displayed and straight to the point. 

We minimized the 18 sections down to 7, still covering the 5 main points which is the product, DNA process, desired goals, and the NGX expert panel, we reduced the repetitive CTA buttons from 9 to 0. This way the homepage became user-friendly as it's easy to digest while being informative.

​

 

NGX Site Edit Suggestion

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

 

 

1.Header

• “Learn more” that takes the user to the product page.

• Close up of product.

​

2. Step-by-step process

• Clear simple steps for the user to follow the ‘Happy Path’.

• Recognizable iconography.

​

3. NGX Goals, add CTA button for clarity

• Clear user journey and access to what the goals are.

• Ensure goals align with the target audience.

​

4. Benefits

• Bring health benefits to the main page and make them clear, readable, and evidence.

​

5. NGX Experts

• Lose CTAs and white text boxes.

• Change copy from centrally aligned as this has accessibility issues.

​

6. Press Banner

• Links to relevant articles if possible.

• Have TrustPilot rating and clickable link rather than scrolling feed.

​

7.Subscription

• Consider adding to the footer or making smaller.

​

​

Next Steps

​

1. Information Architecture

 

• Simple and easily accessible information on the product and process.

• Removal of repeated pages, sections, copy & elements not relevant to the customer.

​

2. Content

 

• Content that trusts the user, their needs and shows them only what they need to know.

• The customer is ‘time poor’ and the content should reflect this.

​

3. User Journey

 

• One main objective for the user that is straightforward and clear at every stage.

• This is an e-commerce website and this should be clear at every stage (eg. shopping cart visible throughout).

​

​

Result

Set to be launched at end of 2020.