How to optimize a fresh user interface design for HelloFresh!
An analyze of the iOS Application
Just imagine: It’s Sunday in the evening, late evening and you are starving. You go to your fridge and with a slight frustration you have to declare your fridge for empty. What could you do instead? In Germany especially in Bavaria most shops are closed after 8 pm. You could go to the gas station nearby or to the main station to buy average food, canned food ... But you are too lazy and the only option is to call a delivery service. Meal kit delivery services like deliveroo, foodora or even UberEATS are reinventing the dinner ritual. You could call them spontaneously, use their service and they would save your time on shopping and planning meals. So is HelloFresh! The only difference is, that you have to plan your meals in advance.
HelloFresh is to become a cooking companion. It offers a variety of recipes. Especially working couples, singles and busy families who care about eating fresh and don’t have time to manage their shopping visit, should profit by this delivery service. Have you ever heard about HelloFresh? How often do you use it?
The aim of HelloFresh is to make cooking enjoyable and approachable for everyone. HelloFresh is constantly looking for new ways of becoming more than ingredients in a box.
And that’s where my job starts to become interesting. I analyzed the iOS HelloFresh-App and tried to find a solution so that cooking is approachable for everyone: people with an exotic taste, small and big eaters, people with allergies or special diets, cooking lovers who don’t have time but love to get inspired by new recipes ... In the following is my approach disclosed:
My approach
I approached design solutions in 5 steps:
- Evaluate: Discover goals and needs, Understand users
- Define: Competitive analyzing, Defining problems, Create a User Flow
- Ideate: Brainstorm, Sketching up ideas, Wireframing, Prototyping
- Design: Final Designs of the Start screen
- Test: Validate your ideas, Final considerations
EVALUATE
When I first got in contact with HelloFresh a friend of mine ordered a fruit box. He was a vegetarian. I didn’t get in contact with the interface for a really long time since, I randomly stumbled over the app when I was looking for some new apps of recipes.
While using the app, I had a few confusing moments and I was eager to solve them by creating a new concept. I analyzed the whole HelloFresh-App and tried to understand their USP. I listed pain points depending on users’ needs. Then I performed a competitive analysis to find out how competitors are tackling the same issue.

Proto-Persona
“Shifting your perspective is better than being smart.” Astro Teller, Google
I sketched a proto-persona on paper using a hand-drawn quadrant. The top left quadrant holds a rough sketch of the persona and her name and role. The top-right box holds basic demographic information and the bottom-left quadrant contains the user’s frustration or pain points of the app where as the bottom-right quadrant shows potential solutions for those pain points. I really like using this style of creating personas because it’s fast and fully effective.

And with that, let’s begin our persona:
Demographic information
Helen is 32 years old, lives in Berlin and is a Business Manager. She loves her job and values her time with friends and family. But she has to work a lot and her valuable time suffers from it. That’s why she came in touch with HelloFresh! From now on she orders food boxes and doesn’t have to manage big shopping visits.
Pain Points
But unfortunately Helen suffers from lactose intolerance and she doesn’t know how to filter recipes without milk. Besides that she can’t find recipes for a low carb diet. Just recently she has an interest in trying out the low carb diet. But also here she can’t find recipes for a it. On top of that she can’t order ingredients just for one recipe* which she has picked.
Solutions
One of her favourite wish would be that recipes which she has picked can be ordered as a box. Also she would like to select/ unselect ingredients so that she doesn’t get ingredients doubled while ordering a box. A nice add-on would be to gather information about different diets and find recipes which are compatible for allergy sufferers.
DEFINE (Problem & Goals)
I was able to craft a meaningful and actionable problem statement after having created and gained empathy for the persona I was designing for.
How could we design an application which is tailored to specific users so that loving eaters and allergy sufferers can successfully and efficiently order food without worrying about wrong ingredients?
Besides that the application should help the user to find inspiring dishes.
Competitive analyzing/ Brainstorming
After having studied and analyzed different apps I finally came up with an idea: My main goal was to tidy up the first screen of HelloFresh and slim down the information. I wanted to focus on the essential parts of the app which, in my eyes, are “recipes”, “boxes” and “profile”. That’s why I removed “weekly menu” and “notifications” from the application bar. I didn’t want to overwhelm the user with too many possibilities. “Weekly menu” moved under the menu item called “recipes”. “Notifications”, I feel, belong in the operating system itself where the user has prior knowledge and control over them.


My assumptions could be wrong, but I had to deal with all the information about the app which I had as a basic user or let’s say as an usability expert. I would love to get more data about real users and also about business goals.

Sketching up ideas// defining problems
I love to sketch up everything which comes into my mind onto a piece of paper. The pen and a paper is my basic tool to pitch ideas.

User Flow
I wanted to start with some questions before the user actually sees the content of HelloFresh. I wanted to make sure, that the user is presented with the most customized experience to begin with. To achieve that, I implemented a series of questions: “What is your favourite cuisine? Are you on a diet?” and so on.
The screens are set up as a linear process and a progress bar shows the user how many questions are left. If the user is not willing to go through all these questions, he can quit and jumps automatically to the start screen. The questions could come up later as a pop up screen again or be found under “profile”.


Wireframes
I created clickable wireframes so that it’s easier to understand how the final design solution should look like:

DESIGN
Final Designs
Eventually I arrived the state of creating final designs for the start screen, variant A and variant B. I didn’t go deeper into the design process for the whole application. I saw my task in slimming down the information of the start screen and I wanted to focus on the most relevant information at one glance. Users should understand the application intuitively.
The screens are separated into different categories “Weekly menu”, “Latest menu” (maybe also: “Newest stories” or “Best diets”). The swipe is horizontal. If the user clicks on “See all” a new screen will be opened. The filter controls temporal parameters such as: preparation time, difficulty, cuisine, disliked ingredients and category (starter, snack, main …). The permanent filter like diet, allergy and goal will be find under “Profile” and can be edited every time.


TEST
Takeaways
I analyzed this application because INMO the application was worth to optimize. I didn’t analyze the whole application but I tried to redesign an existing start screen and added a new introduction of the app that can increase users engagement with HelloFresh.
One of the next step would be talking to users which will reveal changes. It would be good to test and see how this concept works with different users. I’d remind myself of the original goal:
The goal is to design an application which is tailored to specific users so that loving eaters and allergy sufferers can successfully and efficiently order food without worrying about wrong ingredients.
Testing for success and efficiency would be a usability test, which could measure how long it would take for users to order a box and how successful they are in filtering their specific ingredients. And how the user experience would engage users while cooking or ordering food …
*Note: This was a fun project and I did the analyze in April so the application might have already changed. If you want to talk about design connect with me on LinkedIn. Thank you!
— Kati Schlieramp
User Experience Design Freelancer| katischlierkamp.com
