Improving the user journey on the HelloFresh French website

As my final project of my UX/UI design bootcamp, I got to work in collaboration with the French team of HelloFresh.

The context

In some countries, HelloFresh is not to be introduced anymore as its leadership is spread out on the foodtech market. However in France, the company was freshly implanted less than a year ago. Therefore, it has been taking a little bit of time to get to be known, understood, tried out and liked by the locals. Aware of these stakes, the French team invested in communication and marketing campaigns. From a digital point of view, this is paying off with the website recording very satisfying traffic numbers. However, one issue is to be stressed: the user visiting the website for the first time tends to give up before placing his/her first order. Therefore, in this context, my task was to identify the potential UX pain points that could discourage these new users from placing their first order on the website, & to come up with a solution.

Research methodology

To investigate the current website, I set up the following methodology:

• I conducted 10 usability tests of the current website
• Among French users who never visited the website before → To re-create the conditions of a first visit.
• Users were in their 30’s, either parent of family or living in a couple
• The task of the users was to place their first order on the HelloFresh website (also to visit the competitor’s website “Quitoque” as a benchmark)
• To make the purchase possible, the users were given a voucher (a nice way to incentive them as well)
• Each test lasted approximatively one hour and was conducted via zoom with a shared screen (to make screen tracking possible)

Based on the information given to me by HelloFresh (from previous studies), I built the following user persona: Caroline.

Usability tests main outputs

Usability tests showed that users encounter three types of pain points while trying to place their first order on the website:

Issue #1: Major information is very untransparent

When the user arrives on the website, he/she is looking for two basic (but dramatically important) information:

• “What concretely will I get?”
• “For how much money?”

Two pieces of information that they struggle to find clearly and at an early stage on the website.

Issue #2: Cognitive load is quite heavy

When navigating through the ordering funnel, the user gets overwhelmed by unnecessary actions and information.

Issue #3: Steps of the user flow are illogical

The user is asked to pay before getting to chose the food he/she will get. Users are not used to proceeding this way, on every e-commerce website, they always know exactly what they get at the payment stage.

→ In the end, these three issues are stacking upon each other, creating mistrust and confusion, with a high level of time and energy consumption, resulting in the user leaving the website early in the process, annoyed and frustrated with his first experience with HelloFresh.

The current user journey step by step

Now, let me take you through our persona’s (Caroline) ordering funnel step by step to provide you with concrete examples of our three main issues listed above.

Step 1: Criteria picking for the weekly box

This page is Caroline’s starting point, here she expects to see a choice of product(s) and a total price, two pieces of information she will fail at getting.

• The price is only featured per individual portion (which happens not to be a relevant indicator to her eyes)

“So that means that I’ll have to use a calculator to find how much I’ll pay?”

• The layout is misleading concerning the product offer. The recipes are displayed just below the CTA (reading “chose my menu”), Caroline then gets appealed by that green button and clicks on it. However, by doing this, she misses out on the recipes, and continues her path completely blindfolded about what‘s on the menu!

• Caroline is asked to pick a preference for her weekly box however this feature rises a lot of confusion & perplexity. These criteria are not to be considered at the same level, for instance: being a family does not exclude being a vegetarian, and yet it is impossible to combine two criteria altogether. A very frustrating point for many users that do not know what action to take here and feel stuck. Besides, this feature could be more inclusive by offering more options to fit with the diversity of different diets users can have: pescetarian, gluten free, nut allergy…

In a nutshell, at step 1 Caroline does not feel satisfied. She is lost & misses a lot of important information she needs.

Step 2: Signing-in

Once, Caroline has picked her weekly box criteria, next step is to sign in. This step goes quickly (either with the Social media option or with the account creation), making Caroline satisfied.

Step 3: Filling out delivery information

At this step, Caroline provides her information for the box delivery. If filling out the blank for the address is pretty smooth, the cognitive load gets heavier as she needs to pick the time slot and to select a delivery date.

• When it comes to choosing a time slot, an endless list opens making it very hard to browse for Caroline. At this stage, the cognitive load couldn’t be higher, she needs a full minute to digest the whole information, which is way too long!

• The date of delivery choice occurs after the time slot. For Caroline, it does not make sense, the other way around would be preferred (and would avoid the long list of time slot seen above). Besides, the drop-down menu makes her think too much one more time (“wait, when is October 24th? What day are we even today?”), something more visual would be preferred here as well.

As a result, step 3 is bringing a lot of heaviness to the process. Considering that Caroline is already a bit uncertain about what she is doing (since the information provided at stage 1 was too light), this step discourages her a little more…

Step 4: Providing payment information

At this stage, Caroline is expected to provide her bank account information. Once this will be done, she will be able to pick her recipes.

Here, the user flow clearly stands out as the problem. Caroline doesn’t want to pay before having the possibility to pick her products. This happens to be the ultimate pain point in a path already judged heavy and confusing, so she just gives up and leaves the page.

“This looks almost like a scam! On serious websites we can see the products before buying them, here you have the feeling that they are hiding something from us… No way I am giving my credit card information! I am out.”

→ As we can see, the dissatisfaction is escalating throughout the path until the breaking point moment. This raised the following question as the main thread to redesign the website:

Redesigning the website by addressing the current pain points

Watch the video below to have a look at the prototype I built based on the learnings from the usability tests.

Task #1: Redesigning the user flow

I twisted the user flow around, making it start with the recipe picking and end with the payment. This is a way to make Caroline want to stay and go further on the website as :

1. It triggers appeal by showing the beautiful photos of the recipes at a very early stage in the path.
2. It creates a relationship of trust as the payment comes at the very end of the path, once Caroline is clear-minded and comfortable.

NB: the main competitor Quitoque is already using this user flow which during the tests was preferred vs HelloFresh.

Task #2: Making major information visually more explicit

I made sure Caroline knows exactly what she has in her box and for what total price, at any moment throughout the path. For this purpose, I used the green box already used on the website.

Task #3: Reducing cognitive load

This task was to be tackled at different stages of the path:

• Box criteria picking: My suggestion to revamp this feature was to go with a filter system, that enables to combine criteria and offers a longer list of options, more inclusive. Besides, users are accustomed to using filters, they don’t have to think too much to understand how they work, therefore this will decrease their cognitive load.

• When it comes to the delivery page, I switched the time slot and date, so that Caroline gets to chose, first, her delivery date with a calendar (more visual and easy to handle) and then her time slot.

• Throughout the whole path, I made sure there was no need to scroll down the page to find the CTA so that everything fits on one screen. This was not the case in the current website, and I found it was a way to make the process even smoother.

Conclusion and next steps

I had a great time working on this project & I cannot thank the France team more for trusting me with it. The team was ready to welcome any feedback and very cooperative when it came to developing new ideas. Next step: revamping the app in the same direction! We will see if these ideas will see the light, stay tuned :)