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.
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.
Competitive AnalysisRead 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 SurveysView 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:
Would you use a meal service that focused on delivering prepared, health-conscious, whole foods to you and those in need in your community?
PersonasView 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 StoriesView 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.
- Sign up for account.
- Order a meal.
- Edit meals.
- Track an order.
- Choose charity.
User FlowsView 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.
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.
BrandingView the style guide
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.
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
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.
Choose a charity
Edit selected meal
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.
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).