Nutribees

Weekly-delivered healthy gourmet dishes, tailored to your nutritional needs.

Client: Nutribees
Website: nutribees.com
Services: Wireframe, IA, Competitor Analysis

In short

Nutribees is a food delivery service with the mission to help people eat healthy and tasty while saving the time to cook. It’s targeted at busy people and anyone trying to eat healtier or lose weight. The service sets itself apart from competitors like freshly.com thanks to the Nutrition Test, used to algorithmically determine the recommended dishes presented into the Dish Shop.

Nutribees dishes are expertly prepared following World Health Organization guidelines, mediterranean cuisine and Harvard’s Healthy Eating Plate logic.

Customer acquisition flow

  1. Click/tap social ads
  2. Nutribees homepage with CTA to Nutrition Test
  3. Nutrition Test (questions about eating habits)
  4. Test results page
  5. Dish Shop with recommended dishes
  6. Weekly subscription or one-time purchase

Customer acquisition flow

  1. Click/tap social ads
  2. Nutribees homepage with CTA to Nutrition Test
  3. Nutrition Test (questions about eating habits)
  4. Test results page
  5. Dish Shop with recommended dishes
  6. Weekly subscription or one-time purchase

Problem area

Nutrition Test

  • “It was inconvenient to fill in my info in the first screen”
  • “I don’t understand the correlation between Nutrition Test and Dish Shop”
  • “The test is too long”

My fixes: gender as dropdown rather than custom radio button (which added to the visual complexity), more usable and readable inputs for age, weight and height with units to the right and no plus/minus buttons. Left alignment for text to further improve readability. My wireframe collaterally addresses the usability issue where it was hard to reach a high or exact number in any of the last 3 input fields. Of course I provided messages for error and blank states, usage of system dialogs and numeric keyboard for the mobile version.

To address the test’s lenght I set a sort of checkpoint halfway through the test, so users can choose whether to keep answering and complete the test for more accurate suggestions, or to just jump to the Dish Shop because the system has “sufficient information” (bottom-left copy):

This is the part where the user should input how many times a week he/she eats the presented ingredient. The original design has “never” as the minimum value and “often” as maximum, plus there’s a third value above the slider handle which indicated “2-3 times a week” or a not quite user-friendly “50%”.

In my wireframe: min/max values are gone, replaced by “1 portion = 1 egg” or “1 portion = 70 grams” and so on, so the user could just move the slider to input a quantity of weekly portions  (e.g., “3 portions”).

Problem area

Test results page

  • “The test results are difficult to read and not very actionable”

The test results have two versions: a short one (left) and the full results (right). The goal here is to report the user which ingredients they need to eat more/less both on daily and weekly basis and the original design in fact splits the sections (full results) into general information (basic information entered by the user, like weight, diet, allergies, goals…), daily basis and weekly basis.

Problem is that, even with just 6 ingredients, the infographic style used results quite visually complex, hard to read and understand:

So, I moved the general informations to the very bottom and picked 5 more relevant health infos (made available by the test’s algorithm) to display on top: daily caloric need, weight status, body mass index

Differently from the old version, I splitted the results in “here you’re doing good!“/”here you can do better” sections, got rid of the complex slider-like look and just listed each ingredient with image, name, how many portions you eat (weekly or daily) and how many portions you should eat (weekly or daily):

Problem area

Dish Shop

  • “I can only choose 5 dishes a week?”
  • “Do I need to subscribe to try it once?”
  • “I don’t understand which dishes are no-carb, low-fat, veg…”

The user can buy more than 5 dishes a week of course, but the other options appear unclickable, lacking affordance. I simplified the old version just rearranging visual parts, cutting long texts, changing components (custom radio buttons into dropdowns), using plus/minus on dishes rather than in the side cart and improved the defaults.

Given the active customer base, Nutribees asked to make the final design look more like an improvement than a revolution.

Mobile version:

The original design was basically adding too much to users cognitive load in the wrong touchpoint, affecting sales as well: it was required to select the kind of purchase (1/2/3 weeks or flexible subscription) and to read the tiny and yellow explanation. I just moved these in the checkout phase, reducing the options to two: Smart Subscription and single order.

Opportunity

Dish Shop

What if a user goes beyond the maximum number of maximum dishes for the selected package?

The old version just required the user to interact more with the UI to change the package: I seen here the opportunity to help the customer (and business) by offering to remove 1 dish to fit in the current package, or to upgrade to the bigger one (e.g., 12 dishes/week).

Problem area

Subscription management

  • “I wanted to change my subscription, since I could found nothing on my profile I went to the dish shop and created a new subscription by accident…”

A subscription management interface was previously designed but never implemented because it didn’t support multiple subscriptions: in a scenario where people live under the same roof (family or roommates) it is common to share a single account (think about Netflix) but in this case the main user needed something to quickly understand which package belongs to who, so I basically used color coding for that and accordion style to expand/collapse the cards:

And a separate page with subscription settings (shipping method, delivery day, menu category and number of dishes):

Order management

Changing weekly dish mix

In the old version there was just a non-actionable order history, this menu item has been replaced by “next deliveries“: this section works as a chronological playlist for orders. It is possible to edit or skip the upcoming order before the number of days in bold (sentence right above the buttons). An accidentally skipped delivery (grayed-out card) can be reactivated before the same timeout.

The vertical dots let the user view the dishes, manage the linked subscription, or check the FAQs. The bottom-right link brings to the snack shop to add snacks.

User testing and more

For this project I conducted internal testing with 5 target users and evaluated the gathered heatmap data. For everything else I did expert review/heuristic evaluation, tapped into available documents and stakeholder insights from FAQs and customer support.

The rest of the wireframes here: