The Whole Foods Allergen App
It all started
When my 6 year old began having a violent reaction minutes after biting into a gourmet Chocolate Walnut cookie.
Shopping was never the same again.
Our goal was to allow a shopper at Whole Foods to accurately and easily identify ingredients of concern using a simple barcode scanner or search.
Market Research
Our Market Research highlighted how prevalent and urgent this issue is nationwide.
* Every Three minutes, a food allergy reaction sends someone to the emergency room
* Each year in the US, 200,000 people require emergency medical care for allergic reactions to food
* Childhood hospitalizations for allergies tripled between the late 1990 to the mid 2000s
Competitive Analysis
Surprisingly, Whole Foods does not have a allergy app. But competitors such as Health Pantry, Shopwell and Food Maestro have taken upon themselves to save the world. Even though their apps have robust functionality, the sheer number of products that they support is their unbecoming. The dreaded ""Can't be found," was our que to limit the functionality to Whole Foods only. Psst: One of our interviewees was an ex-Whole Food manager who swore by the accuracy of the company's database.
Whiteboarding
Armed with all the research, we began toying with various ideas.
User Flows
We began detailing all possible user flows. This one highlights a path taken by a new user.
Personas
The primary persona encapsulated the user that we were focusing on and designing for.
Paper Prototypes
We tested paper prototypes with five users. Issues that we identified included:
1. Too much text for an app that was to be used on the fly
2. No ability to include and mark allergens not included in the app.
3. There was no easy path from the product screens to the preferences.
Final Mockups
Allows the user to scan a product
Deliverable: Clickable prototype.
Once a product is scanned, and if an allergen was previously marked, the product page would highlight that allergen with a Frownie face (against the red background)
Preferences setup
An allergen can be added with a tap on a particular icon. The user can also search for an allergen.
Preferences: Confirmation
Modal that indicates all the items have been set as allergens. Users can set up a custom allergen such as Sodium Benzoate.
Search
Auto fill functionality presents to the user products that they might have "faved" earlier (with a green smiley face), and also indicates ones that they have marked as allergens (with a red frownie face)
Next Steps
* Short term: Conduct several more rounds of user testing
* Long Term: We want to revisit the idea of creating an interface for smartwatches such as the Arrow. The Arrow watch is available but it's photo capture technology is not quite mainstream.