Overview.

HelloFresh provides customers with high-quality, fresh food items along with the knowledge to create interesting meals using provided ingredients. This service aims to supply customers with healthy alternatives to ordering take out from restaurants which many believe end up being more expensive in the long run.

This was a concept project where I explored what else HelloFresh could do. I wanted to introduce customization options to allow people with dietary restrictions, such as low-carb diets, the chance to enjoy interesting meals.

Role.

I worked alongside a Senior Designer who acted as a mentor and collaborator. All of the work you see here from user research to visual mockups I did myself.

June 3rd - July 7th, 2020

Disclaimer:
I do not work for or with HelloFresh. I am just a young designer who is always looking to learn and expand my skillset.

Empathize.

People aren’t as enthusiastic about going to the store as they once were.

Meal kit delivery services thrive as we social distance in our homes and watch the world change around us in unexpected ways. These services allow us to lessen our trips to supermarkets and still cook delicious dinners at home.

I challenged myself to make meal kits more accessible. I believed that options like HelloFresh could reach a wider audience if there were deeper customization choices in each meal.

Discovery.

After conducting a user survey and collecting responses, I identified common pain points expressed by individuals to better understand customer needs. It was revealed to me that individuals:

• Looked for deeper levels of customization

• Expected sustainable packaging

• Preferred ingredients that were locally sourced

• Wanted to easily track their deliveries

Synthesis.

I narrowed my scope of work by identifying key business goals to determine what I could realistically accomplish. I identified these goals as:

• Customers should be able to easily swap ingredients to fit their needs

• Customers should be able to track deliveries quickly and see how far away they were

• The prototype should be piloted on the HelloFresh mobile site

The Journey.

In order to truly understand the experience of using a meal kit delivery service I took the extra step to sign up for HelloFresh myself — this provided me with so many wonderful insights! I gained a personal perspective and used that to inform a User Journey Map.

The Process.

The custom meal options in HelloFresh were designed to fit into the existing behavior patterns in the HelloFresh mobile website. Rather than building an entirely new flow for users to learn I decided to integrate these features into areas of the site customers already had experience interacting with to eliminate a new learning curve.

Sketches.

My knowledge of the HelloFresh mobile site from my own experience gave me valuable insights for the purposes behind the existing design. I came up with a number of solutions that I believed could be seamlessly integrated to achieve my goals.

Following a user-centered approach, I refined my sketches into a user flow. Closely examining the purpose behind each interaction helped me to see the bigger picture and eliminate potential pain points before wireframing.

Wireframing the Solution.

Using Marvel, I began solidifying potential solutions based on my hypotheses derived from the sketches and user flow above. By visualizing my ideas this way I was able to create clean Wireframes and build an early stage prototype for user testing. This would allow me to experiment with multiple solutions so that I could fail fast and learn before spending too much time on the UI.

Room to Experiment.

I designed two solutions — one option had users interacting with a dropdown menu to add ingredients that were not included in the meal while the other option provided users with an "Add to Meal" button.

I ran a usability test with four users and discovered that the dropdown menu did not deliver the best user experience. This option introduced slight confusion as there was only one option to choose from in the dropdown and required more work for users. I decided that the "Add to Meal" option was the way to go. I went on to implement these changes in my high-fidelity prototype and used checkboxes for increased clarity.

A Subtle Approach.

So as not to disrupt the familiarity of the existing layout, I placed the option to create a custom meal on the recipe detail screen.

Flexibility.

Examining interactions throughout the site informed my decision to create expandable menus with dropdown lists nested within. You can also see the checkboxes here based on the results from my first usability test.

Tracking Your Order.

I wanted to keep users from opening an additional tab to view their delivery information so I created a screen that would slide up when "Track Delivery" was pressed.

This was an interaction that I had seen used in several other places on the mobile site and wanted to implement it here too.

Iterate.

I built a second prototype and ran another test. I created a particularly “happy path” for the user and decided to withhold messaging that would highlight these new features because customizing a meal is not the primary intention of HelloFresh. It is simply meant to provide additional flexibility if needed.

The meal customization screen was intuitive for users but I noticed that some users didn’t realize they could expand the map by swiping down on the screen. I decided to make this a bit more obvious by adding in a "view map” button.

Takeaways.

Through this project I learned the importance and the power of iterations and proper project scope. In addition, rooting my approach in empathy through first hand experience along with my research with customers gave me a valuable perspective on the design.

Some of my other key takeaways from this project were:

• Design thinking is a flexible process. I found myself going back to the empathize stage multiple times as a way to check myself and make sure I was keeping users in mind. I learned to not be afraid to shake things up and ask "why" a lot.

• Fail fast and learn often. I found immense value in conducting small usability tests along the way which equipped me with amazing insights and informed the high-fidelity mockup.

• Don't get lost in the sauce. By committing myself to solving this one pain point I avoided the trap of getting overwhelmed by having to design too many screens or user flows which resulted in a better user experience.

Thanks for Reading!