Problem

Create an app for a product which combines meal delivery and charitable giving. Users need to:

Review dinner menu.

Schedule meals in advance or order as needed.

Choose a charitable organization to distribute donated meals.

Feed hungry people in the user’s community.

Solution

Haricot allows users to donate meals to hungry people in their communities, while having nutritious, seasonal dinners conveniently delivered to their doorsteps. The idea is simple:

View and select meals from the dinner menu for the nights you need dinner, or select the current dinner for immediate delivery.

Modify meals to fit your unique dietary needs. You can choose from a dietary framework, and/ or modify meal ingredients as needed.

Choose a charitable organization to distribute meals donated from your orders.

Give the same meal you are eating to a hungry person in your community. For each meal purchased, the same meal goes to an underfed person. In this way, users break bread with those they seek to help, even if not together, physically.

Process

Competitive Analysis

Read competitive analysis

Many services exist to get meals to users’ doorsteps. A variety of companies specialize in prepared meals with focus on convenience and/or nutrition. I conducted a competitive analysis for each of the following meal delivery services: Freshly, Blue Apron, and Hello Fresh.

Blue Apron and Hello Fresh each offer meal kits which contain all the ingredients for, and instructions to cook, a particular meal. Freshly offers frozen prepared meals which require reheating in the oven. Blue Apron and Hello Fresh each cater to those who desire to learn to cook well, while desiring guidance, and providing a grocery-store free experience. Freshly, on the other hand, seems to cater to those who are looking for convenient, nearly ready-to-eat meals, and may have dietary restrictions. Hello Fresh and Blue Apron convey a sense of the experience of cooking. Freshly conveys a sense of removing the hassle of shopping and cooking from eating.

User Surveys

View the user survey

A user survey was sent out to identify which services users have tried, how their experience was/is, and if a similar service with a mission of hunger relief would be appealing. Here is what I found:

Personas

View the personas

Three distinct personas were created based on user surveys and follow up interviews. While each persona has an interest in convenient meals and charitable giving, each is in a unique situation, and their needs are each distinct.

User Stories

View the stories

Market research, user surveys, and personas all honed in on specific user needs. To give these more focus, I developed a set of user stories that stated user desires and then prioritized them. This exercise yielded the essential functions the Haricot app would need for a successful Minimum Viable Product. Referring back to these stories was essential for avoiding scope creep.



priority levels

  • High

  • Medium

  • Low
  • Sign up for account.
  • Order a meal.
  • Edit meals.
  • Track an order.
  • Choose charity.

User Flows

View the user flow

I developed user flows following user stories and a sitemap as guidelines. I began breaking each user story into individual components of the whole. I discovered a more intuitive approach to realizing simple flows which guide users to their goals.

Wireframes

User flows made clear exactly what users will do to complete tasks with Bag of Sharing. Wireframing explored many different versions of how users will do those things to complete those tasks. The most significant departures while iterating on wireframes included:

Layouts for selected meals details.

Introductory “Quiz Style” buttons.

Access to Home Screen, Account, Info and other actions.

Early dashboard

Early menu

Updated dashboard

Updated menu

Branding

View the style guide

Brand Name

I wanted the name of the service to reflect central philosophies of interdependency and growth. The name should call to what the service does while declaring “We’re all in this together!” I explored a lot of motifs and ideas, but ultimately loved the ring of using the name of a vegetable. Many names were entertained, but “haricot” conveyed everything the company represents. Haricot is the common name for pole beans. It rolls off the tongue while referring to the proverbial “peas in a pod,” in this case, all those in a community together.



    brandywine 

    shishito 

    snap pea 

✔ haricot

Logo

The logo is a natural extension of the name. A lyrical script text recalls the curling vines on which haricots grow. Below the name are three “seeds” or beans. The final of the three splits open to signify new life and growth.

Color Palette & Typeface

Tackling problems as big as hunger can seem daunting. Haricot wishes to convey a sense of encouragement. The color palette, like the logo, is uplifting, fun, and active. A complimentary logo color scheme juxtaposes the deep purple which rounds out the main palette.



Ultra is, as it’s name suggests, big and superlative with lots of juxtaposition. It has a stark contrast of weight, with thick strokes and thin terminals. It’s surprising, fun, and hard to miss. It’s weight gives it a feeling of security and steadfastness.

Heebo is a great support. It’s legible and clean. The variety of weights and styles are more than ample. Heebo is used mostly for body text. Use regular weight for this. H3s and occassionally H2s will be set in Heebo, using bold.

Mockups & Testing

Mockups

I designed high fidelity mockups using Figma. This phase moved fairly quickly, as most of the interface just needed to be skinned with color, typography, and imagery.

Dashboard

Choose a charity

Edit selected meal

User-friendly snackbar

Testing

User feedback included preference tests through Usability Hub, in-person and email interviews, and, perhaps most importantly, user testing the prototype. The feedback from these tests was essential to refining the interface and creating a quality user experience. Improvements discovered through user testing include:

Type weight changes for CTAs.

Navigational interaction to help move users through the onboarding process.

Reorganizing action icons at the top.

Conclusion

Summary & Beyond

Haricot is a large undertaking that goes far beyond the app. There is a lot of logistical legwork to be done to get this project going. Still, there is much to be done with the app. So far there is a prototype for an app using Google Material guidelines. The next steps for the app are:

Design an iOS-compliant app.

Design the desktop app.

Add a statistics page (for fun animated visuals of how much you donated).

Meta-Conclusion

This project was a special challenge. First, it was very rewarding to work on a product which involved my passion in community action. My experience with volunteer work, food service, and food production informed my design process. It was my first experience designing a product where the service wasn’t software. Logistics had to be discovered and considered very early on. This is where user stories informed actions far beyond the app. An operations team would be an ideal addition to the planning stages of such a product.

Back to top

Connect with me

I am open to new freelance projects and full-time opportunities in UX design and responsive web development.