BestB4
BestB4 is a mobile app I developed from concept, name, and brand identity through UX design, prototyping, and user testing. It was designed as a service for a national grocery chain to counter the “vegetable graveyard” we all often find in our refrigerator’s crisper drawer. I created this concept as an independent project during my tenure at Insidesign.
BestB4 is a mobile app concept I designed, branded, and developed to counter the “vegetable graveyard” we all often find in our refrigerator’s crisper drawer.
The app has three main jobs: Remind users when produce nears its expiration date, suggest recipes that include foods about to expire, and assist with building a shopping list based on past purchases and consumption.
To make the name sticky, I leveraged the mnemonic opportunities of BestB4 and designed a bee mascot. Social creatures that work for the benefit of their community, bees are highly organized and industrious at collecting and storing food. A friendly-looking bee seemed a natural fit for an app dealing with food management. With the bee as part of the user experience, I created a bee brigade, a variety of looks and expressions, including a rear view for those occasions he buzzes off screen to indicate a task is complete.
The BestB4 logotype was adapted from a casual script reminiscent of the hand-painted vernacular of grocery store signs. A fresh palette of exuberant colors represents the fruits and vegetables that inspired the app. Gotham Rounded——the kinder, gentler Gotham——serves as a sturdy, clear, and eminently readable typeface for primary use throughout the app. The word cloud served as a proof of concept exercise as I tested and finalized the brand’s typographic and color standards.
The information architecture, or “app map,” shows where natural overlaps occur in BestB4’s three main functions: MyList, MyFood, and MyRecipes. Photos represent personas that were developed during initial research and whose primary needs are mapped to one or more of the app’s main functions.
Multiple rounds of wireframes were produced to test functionality and user flow, first as hand-drawn screens loaded into InVision. After incorporating user feedback, low-fi black-and-white screens were produced and tested before creating the final version. After additional user testing, revisions were made to render the experience more natural and intuitive based on users’ other app habits, before proceeding to final development.
In the final app, users are presented with their current food list, sorted by expiration date, after logging in. From there, they go to their recipes or grocery list, or add new food items to their MyFood list by tapping the plus sign. The app automatically suggests an expiration date based on a built-in database, which the user can opt to override. The camera function allows recognition of food items as well as scanning of barcodes. The MyRecipes list allows users to add a recipe’s ingredients to a MyList grocery list with one touch.
