HelloSort

A collaborative desktop software that streamlines the recipe creation process at HelloFresh under one unified tool, making the process of creating new and fresh recipes effortless and efficient.

MacBook Pro 16 inch-1.jpg
MacBook Pro 16 inch-3.jpg
MacBook Pro 16 inch-2.jpg
Front view mockup of Macbook Pro (Mockuuups Studio).jpg

Project Overview

Role

UI/UX designer and researcher

Project type

Design Sprint Challenge

Timeline

5 Days (Feb 2021)

Tools

Pen & paper, Figma, InVision, Powerpoint

Overview

HelloFresh prides itself on providing a diverse set of recipes for their customers. To ensure we deliver a good customer experience through exciting and new recipes. However, there are identified areas where improvement can be made. The recipe creation process is done through different systems. This can cause delays in generating ideas, defining ideal nutritional information, testing and finalizing the recipe.

This design sprint challenge introduced by the HelloFresh Product Design Team with the aim to streamline and merge their current softwares into one digital platform to enable efficient workflow and quicker recipe generation, without hiring new resources. HelloSort was chosen as the winner amongst 16 teams.

Discover & Define

Problem Space

HelloFresh is the world’s leading meal-kit company. They deliver high-quality seasonal ingredients and easy-to-follow recipes to their customers on a weekly basis, saving them time and money all while reducing food waste.

Despite that, HelloFresh realized there is still room for improvement. Their recipe creation process is completed using multiple platforms and software, making it time consuming and inefficient. With that, HelloFresh approached the challenge with the following design question: how can we help recipe developers create more recipes than what they create currently, without hiring new resources?

Screen Shot 2022-01-19 at 2.19.06 PM.png

The above image represents the existing HelloFresh recipe creation process. Evidentially, recipe creators must constantly shift from one software to another to complete their recipes, hindering their productivity and the efficiency of the overall process.

Assumptions

After evaluating HelloFresh’s existing process and conducting quantitative research regarding tracking and auditing systems, we came up with a few assumptions to better synthesize the area of focus.​

1

Recipe creators must always be aware of inventory (what is scarce vs in abundance).

2

Recipe creators value experimentation and the ability to adjust their recipes conveniently and efficiently.

3

Recipe creators are not very tech-savvy.

Goals

We also noted the following goals that help narrow down our thinking process and would ultimately streamline our entire design process:

1

Increase recipe creators’ efficiency through provided brief templates.

2

Unify all functions of recipe creation into one tool.

3

Provide team members will a collaborative feature focused on feedback and the status of the recipes.

How Might We

Based on our research, assumptions, and goals, we developed the following design question: How might we automate the inventory sorting process in order to streamline recipe creation while ensuring consumer demand is met?

Develop

User Stories & Epics

To prioritize which tasks will allow our users to complete their goals most effectively we authorized a few sets of user stories and further categorized them into five epics: supply, inventory sorting, recipe creation, customer trends, and inventory stock.

Picture1.png
Picture5.png
Picture4.png
Picture3.png
Picture2.png

Inspiration

Prior to designing the wireframes, our team conducted a visual analysis of what is already in the market as well as collected inspiration. Below are a few images that grasped our attention and were added to HelloSort’s mood-board.

this 2.png
this 3.png
this 1.png

Lo-Fi Wireframes

We started developing wireframes inspired by our most viable sketches to get a more realistic feel of the product. As a team, were able to develop lo-fi versions of the home and inventory pages before our halfway meeting with Senior Product Designer at HelloFresh, Tamira McCoy.

Picture1.png

Major Pivot

How Might We

After our team meeting with Product Design Lead at HelloFresh, Tamira, we realized our designs should focus less on inventory and more on streamlining the recipe creation process. At this point, we went through a major pivot and redirected our design question to: How might we enhance recipe creators’ productivity in order to optimize and accelerate the recipe creation process?

Task Flow

Furthermore, we developed a task flow to better visualize the ways in which our user’s will use and navigate through the system:

Screen Shot 2022-01-19 at 3.24.12 PM.png

Storyboard

We took the time to create a storyboard revolving around Mark, a recipe creator at HelloFresh. Mark is very busy with his job and is looking for time-management solutions to optimize the recipe creation process. Based on a given brief, Mark is required to complete his tasks that include experimentation, logging, and approval.

HelloSort is introduced to Mark, so he can optimize the process where he can improve his performance and productivity under one unified tool for a faster result. Through HelloSort, Mark is directly aware of inventory and is ready to begin curating the perfect recipe. After filling up the template, Mark waits for approval and/or comments from his peers.

Screen Shot 2021-11-10 at 3.34.03 PM.png
Screen Shot 2021-11-10 at 3.34.03 PM.png

Site Map

Finally, we developed a site map to visualize the prioritization of pages, features, and tasks. The four main pages we’ve included are the Dashboard, Creator, Recipes, and the Inventory.

Our focus is on the Creator Tab through which recipe creators can efficiently navigate through the experience of creating recipes. HelloSort introduces a unique feature that allows recipe creators to curate recipes either based upon a given Brief or they can start from scratch with HelloFresh Meal Plan template.

Screen Shot 2021-11-10 at 3.42.38 PM.png
Screen Shot 2021-11-10 at 3.42.00 PM.png

Hi-fi Wireframes (V1)

After our pivot, we had no time to develop new lo-fi wireframes and so we went ahead and developed our first hi-fi prototype wireframes based on our sketches as well as on-going iterations.

DASHBOARD - Original.png
INVENTORY.png
CREATOR - Meal Plan Templates.png
CREATOR - Recipe Lab 3.png
CREATOR - Recipe Lab.png
CREATOR - Recipe Lab 2.png
Group 136.png
Group 137.png
Group 138.png

User Testing

We then conducted a user test with nine participants in which all users could swiftly navigate through the system and complete the task flow required. Participants had a few comments regarding the user interface that we addressed in our final version.

Hi-fi Wireframes (V2)

After editing, iterating, and improving our final prototype, our software, HelloSort, was born.

Group 150.png
Group 151.png
Group 148.png
Group 140.png
Group 141.png
Group 142.png
Group 143.png
Group 144.png
Group 145.png
Group 146.png
Group 147.png

Key Project Learnings

  • Collaboration is a very valuable feature and communication is key.

  • We should always be mindful of accessibility as we kept in mind that recipe creator may not be tech-savvy and so simplicity is preferred.