The Project Story

Sketch (Collaborative Design Studios & Whiteboard Sessions)

We kicked off this project by facilitating a design studio that involved all the key stakeholders from the cross-functional client team. This session involved rapid time-boxed sketch iterations, team collaboration, and mutual critiques of proposed design ideas.

We continued to hold collaborative design whiteboard and sketch sessions each week following the initial design studio, in order to dive deeper into the details and interactions of each task flow or screen.

Prototype (Interactive Design)

Home Dashboard

The home dashboard allows users to monitor team activity, along with direct access to any recipes or ingredients that require their personal action, such as a review, approval, or request to complete. The dashboard also gives users a quick way to get back to any items they recently worked on, as well as items they are actively watching.

Global Navigation

For the global navigation in the app, we decided to use mega menus to allow users efficient, maximal access to recipes, ingredients, projects, and reports that they recently viewed, watch, or personally submit. Real-time, type-ahead search is provided to access any item in the system’s database, and there are also quick links on the mega menu to create new items on the fly.

In addition to these global mega menus, we provided a collapsible sidebar that can be accessed from anywhere in the application to quickly jump back and forth between items currently being worked on or items that require action.

Quick Add Recipe

We wanted to give users an easy way to create a new skeleton recipe or ingredient, just by filling in some very basic information, so that they can avoid becoming overwhelmed by the entire set of detailed options and fields. This is especially important when someone from marketing needs to simply get an item started so they can then make a request for formulators to research, experiment, and further flesh it out based on the core set of specifications or requirements they provided.

Building a New Recipe

When building a new recipe, users can add various ingredients while viewing the impact in real time on the label and overall nutrient profile. The details of any single ingredient can be analyzed without leaving the page. Formulators can also create variations off of the base recipe, such as a cheeseburger that builds upon a basic burger. Images, tags, and other metadata can be added to the recipe, as necessary. Team members can also have ongoing, inline conversations about the recipe, leveraging annotations and comments.

The system uses artificial intelligence to support formulators by suggesting alternative ingredients that will help them reach their defined nutritional and cost targets for the recipe.

Nutritional targets and subsequent claims can be defined for each recipe. Based on the current makeup of the recipe, the app will also intelligently suggest additional claims that currently could be made or that the recipe is close to supporting following some minor tweaks.

Multiple preparations for the recipe can be generated, indicating prep time, cook time, and detailed instructional steps.

Editing the Package Labels

Every aspect of the nutrition facts, ingredient statement, and allergen statement can be configured, including the form factor, dimensions, country, and more. Multiple labels can be created so that they can be mixed and matched for use on various package sizes, geographies, etc.

Compare and Version History

Versions and variations of any recipe can be compared side-by-side, analyzing the ingredients lists, labels, or claims/targets. Users can easily visualize the changes made across versions by reviewing the color-coded indicators (diffs) of what has been added, removed, and changed. Any version can also be cloned or restored with the click of a button.

Adding a New Ingredient to the Database

When adding an ingredient to the database, the nutrient profile, allergens, and subingredients (ingredient statement label format), can easily be imported or manually entered. Any lab results, supplier statements, or other important certification documents can also be attached to the record. Then the ingredient can be sent to supervisors for official approval before being used in recipes.

Notifications and Watched Items

All system notifications and watched items can easily be accessed from any page in the app via a dedicated sidebar by clicking the bell icon in the global header.

Usability Testing (Validation)

After working through multiple design iterations, I used my richly interactive Axure prototype to conduct usability tests with over 20 participants. I created the test plan, facilitated the sessions, analyzed the results, and wrote up a comprehensive findings report.

I identified which usability issues had the highest frequency of occurrence in order to prioritize post-study modifications to the design, and also captured the things that users got most excited about. In addition, I looked at trends in the post-test question responses that measured things such as subjective satisfaction with the newly designed app.

I then walked through each screen of the prototype, documenting all key usability issues, confusions, ideas, and insights, along with my recommended design changes.