1. The background of the project

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.

2. A set of usability tests to understand the current situation

Methodology

To investigate the current website, I crafted a methodology featuring a set of usability tests.

I recruited participants according to the specs delivered by the client as representative of their usual customers:

• 10 participants

• 90% women / 10% men

• 50% parent of family / 50% living in couple

• In their 30’s / 40’s (a good mix)

• French & living in France (Paris mostly)

• None of them had visited the HelloFresh website before → To re-create the conditions of a first visit.

My job in this phase consisted in:

• Recruiting participants & setting the planning of interviews

• Writing the interview script

• Moderating the tests, and taking notes

• Exchanging with the client to get her approval

Affinity Map

Once the fieldwork over, I used the technic of the affinity map to organize all the data that I collected.

How did I do it?

1. I wrote all the insights collected during the tests on (virtual) sticky notes. One participant = one color of sticky note. One insight = one sticky note.

2. Considering that the users saw different screens during the test, I sorted the insights according to the screen they were related to.

3. Then among each screen, I clustered the insights according to their topics.

This helped me to identify patterns specific to each step of the conversion funnel.

Below is an example of what my affinity map looked like for one screen:

User persona

3. Usability results

Overview of the current user journey

Based on the usability tests, I could draw a curve of the user journey showing how the satisfaction of Caroline evolved throughout her path on the website. Here, what we can see is that Caroline arrives on the website with a very positive mindset, she projects the yummy recipes she will be able to order. However her experience gets more and more negative as she goes further. The main reason being that she does not find what she came for: the recipes. Moreover other pain points come in addition to make the experience poorer. So that in the end, she just leaves the website before placing this first order, and in a very bad mood.

The current user journey step by step

Now, that the curve above gave a general trend of the user’s journey, let’s go through Caroline’s ordering funnel step by step to get into more details.

Step 1: Picking criteria for the weekly box

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

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

Step 2: Account creation

Once, Caroline has picked her weekly box criteria, the 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.

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 see the recipes. This stands as 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 info! I am out.”

To conclude, the dissatisfaction is escalating throughout the path until the breaking point moment when the user leaves the website before ordering.

Analysis of the current user journey

Based on the study above, I could draw 3 types of pain points along the current user journey:

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. This conclusion led me to the following question as a base for my website redesign phase:

4. Website redesign

Addressing the three types of pain points

Task #1: Redesigning the user flow

I made sure Caroline knows exactly what recipes 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 - and I displayed it on each screen of the path.

I twisted the current 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

Task #3: Reducing cognitive load

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

• 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. It is a way to make the process even smoother.

Prototype

Conclusion

I had a great time working on this project & I cannot thank more the France team for trusting me with it.

My take away from this studies are the following:

• Zoom is not the best tool for usability interviews. There are plenty of online solutions for conducting usability tests which can track way better the user (with timer, eye-tracking, emotions tracking). Next time I think I will go for UX Reality.

• My assumptions are not the reality of the user. Before conducting the tests, I used the website to create my own assumptions of why conversion was poor. Not all of them turned out to be true, which even if it can hurt my ego, was very important to take into consideration since what matters the most here is the user and not me.

• Setting up the research fieldwork is not a work to be underestimated. I knew that already from my previous experience in research: “always be ready for technical problems” and here of course I had some. Connection problems, validity of the voucher sometimes expired, user postponing their interviews… These were stressful but in the end they make you feel even prouder once solved.

• Listen to the user but also to the client when it comes to improvements for the website. Doing check-up with the client was dramatically important, since she could tell me what was possible to implement from a software/logistic point of view. Without these check-ups I might have recommended solutions that were cool for the user but impossible for the client to implement. It is all about being more user friendly, obviously, but while remaining doable for the client’s team.

For now I cannot state what this project brought to HelloFresh in terms of concrete results, as they did not implement it yet. However, the French team is working on it and once the changes are online, I will update this case study accordingly.

Thanks for reading :)

If you want to talk with me about this case study, you can send me an email to tyrodecharlotte@yahoo.fr