HelloFresh. Feature Implementation -A UX Case Study

Trevorlon Jainarain
TrevorlonJainarain
Published in
7 min readMar 11, 2019

--

My Role: UX Researcher | Duration: 2 Weeks

Project Overview

We developed and integrated features into HelloFresh’s existing app to improve the user’s experience. HelloFresh came to us with a goal of increasing engagement with their customers through developing a feature in which users can generate their own recipes and vote on other user-generated recipes. In earlier phases of this project, we conducted user interviews and with those findings, invalidated HelloFresh’s hypothesis. To us, the best strategy to increase engagement was to increase the Lifetime Value of HelloFresh customers. To increase Lifetime Value, we focused on the root of the issue and focused on creating a solution that would prevent customers from canceling or skipping their membership and remain an active longterm user. Keeping both the business needs of increasing engagement and the users’ needs of saving time and accessing healthier recipes, we decided to design and develop a new feature.

Scope of Work

Our team was given the opportunity to implement a feature that would increase engagement with Hellofresh users. In order to provide a better experience for our users. It’s important to be aware of both the needs and goals of HelloFresh customers. We set out to research Hellofresh customer base, as well as other meal kit delivery service providers. This research provided us with key insights and knowledge of HelloFresh users. With our foundation in place, we developed some distinctive key features and created some wireframes. A few rounds of Usability testing were repeated with both mid fidelity and high fidelity prototypes.

Problem Statement + Hypothesis

Cooking meals is time consuming — between grocery shopping, prepping, and cooking. People want to be able to prepare a meal quickly and have healthy options while doing so.

How might we help provide Annie, and other meal kit delivery users, with a way to prepare a home cooked meal that is fast, healthy, and delicious?

RESEARCH PHASE

User Interviews

Our team created screeners to recruit these target users and distributed them to friends, family, and the #take-my-survey Slack channel. It quickly became apparent that our target user requirements were too narrow. We then expanded our primary target to include anyone who had used HelloFresh within the last year, with the exception of one user who had used HelloFresh in the last 1.5 years.

We interviewed 5 candidates with a combination of in-person and phone interviews. Our goal was to understand our user's behavior and motivation in using home delivery meal kit. We wanted to understand what they do and do not like about HelloFresh as well as how frequently they interact with the digital components of HelloFresh.

Finding Our People

The common theme that started to develop from our user interviews was that HelloFresh customers where not too happy with the product as a whole.

Synthesis » Affinity Mapping

Our team then proceeded to create an affinity map using the research data from where we were able to find and group common themes. We learned that HelloFresh users experienced negatives with HelloFresh that include lack of variety, time, portion sizes, environmental impact, healthy options, and cost. HelloFresh users value quality and freshness in their ingredients.

HelloFresh users consider different factors before selecting their box’s meals for the week, ranging from healthy options to variety and speed of recipes.

Affinity Mapping

User Personas

To better understand our users we created two different personas Annie and Danny to encapsulate our research and findings. These reflect an amalgamation of our interviewees’ opinions and behaviors.

User Personas

DESIGN PHASE

Design Studio: Sketching + Concepting

Our team ran a few structured Design Studio based on our user personas and research insights. This is where ideas and potential concepts are born. Our first Design Studio focused on solely feature development. The designated, focused time brought our team together and aligned us on the same page to design a feature that would best serve our users. Once we narrowed in on that one feature, we opened our process up and generated all of the different components necessary to support that feature. We were able to get even better clarity on our direction and priorities through a MoSCoW and a feature prioritization exercise. Our second Design Studio to focus in on the wireframing of our new features and the flow of how a user will experience this feature. Some key features we came up with are:

Choose between an original recipe and a healthier recipe (that would switch just one ingredient)

View “Quick Time” instructions if there is a faster way to make a recipe (i.e. cooking rice in the microwave instead of on the stove)

See more nutritional information

Design Studio Rounds

Initial Prototype

Our team then took the sketches from our final Design Studio and turned them into low-fidelity, then mid-fidelity wireframes. Based on our user interviews, personas, and Design Studios, we introduced the following new features into the HelloFresh app design.

Quick Time feature provides users with preparation and cooking shortcuts to help them save even more time when preparing their meals.

Low Calorie Swap provides users with a way to make their favorite recipes with a healthy twist.

Midfidelity Wireframes

Initial User Testing: First Round

With our prototype ready for action we set out to run some usability testing. Our testers were presented with a couple of scenarios and tasks. This was a relative success as the users where able to perform the task efficiently. Our healthy swap and a nutritional feature was a hit but there were still some flaws. We learned immediately that the Quick Time feature was not designed clearly. Our users struggled to find the feature or missed it altogether.

It was unique, and they had never seen the healthy swap option like this before

First rounds of User Testing

Design Iterations: First Round

We went back to the drawing board to see how we can improve certain features especially the QuickTime option which was nonsuccess in the usability testing. We rename the QuickTime feature to Cook It Faster and draw attention to the feature with color or a box. Also, allowed it to be clickable, and a pop up will appear with how it will be faster. Our users were frustrated that in order to add a recipe to their box, they needed to scroll all the way to the bottom of the recipe description. To address this issue, our hi-fi prototype will have:

CTAs that toggle to the bottom of the page so that they are in view at all times while scrolling

Ready for HiFi

With the changes made to our mid-fi, we decided to kick it up a notch and take this baby to hifi.

Added Cook It Faster Button
Nutritional Info

Second Round of Testing

With the improvement made to our prototype, we conducted our final usability testing and confirmed the overall improvements. Users were able to complete the task with greater efficiency and ease. While we should always assist in clarifying with the user’s, as tester #4 misinterpret the questions and threw the whole test results off track. If we were to take his test result out our usability test would have a remarkable success rate.

Final Round Usability Test

Final Prototype

We made some minor changes to our final prototype based off of our 2nd usability test. You can view the prototype here.

Implementation + Next Steps

We were able to deliver a remarkable integration within 2 weeks. If granted additional extended time we would do more rounds of usability testing to confirm that tester 4 was just an abnormality. We would also look to introduce some more additional features we had planned from our Designed Studio sessions.

--

--