Dieter Brehm

BOW Appétit

BOW appetit prototypes, showing the main screen with next up meals, settings menu, and a specific meal station's dishes.

BOW appétit—a play on words combining the common phrase Bon Appétit and BOW, a cross college cooperative between Babson, Olin, and Wellesley colleges—is a quick new way for students to make decisions about their meal plans.

Current technology that lets students view upcoming meal schedules is cumbersome and architected on rigid systems without options or with huge scrolling web pages.

This design offers an alternative by providing a simple notification of what meal options are up next, and options for selecting what meal stations are of interest. If, as a student, you always cook your own breakfast, it isn't helpful to scroll past it every day when you check the menu.

A value proposition chart, showing the solution and customer needs related to BOW appetite.

This design concept arose from frustrations with meal systems at the BOW collaborative of colleges, and in a cohort of 5 people I helped conduct a series of user studies and research to validate the value proposition of the concept.

Our first mid-fidelity prototype of the application mistakingly placed on emphasis on interaction with the app through complex rating systems and crowdsourcing meal information.

The first app prototype, with rating system for each dish and a visual map of dining hall locations.

We found a few helpful insights in what students were looking for in a menu application. Though Olin College does not use a "Meal Swipe" system that limits entry to dining halls, other colleges do. With that in place, timely notifications and easy viewing of upcoming menus could help students optimize their swipe usage to their dietary restrictions and preferences.

Given that, we found that students cared more about timely notifications of the next meals, and if those meals met their criteria.

To reiterate, the two main criteria here were:

  1. Does a given dish meet my dietary restrictions?
  2. Is something that I liked before being offered again?

After a break from this concept, I redesigned the application to focus on these new priorities identified by the team as a whole.

process sketches of the bow appetit app, working on the layout of the app. Process sketches

The information architecture in the design is divided up better, with specific terms that are familiar to common users of dining halls.

  • At a high level, stations are physical areas in dining halls that contain 5-6 dishes on average. These stations are ordered by the type of tool used to cook the dishes or by the meal type, e.g. entrees or sandwiches.
  • Then, we have dishes, which are individual self-serve plates of food. This level of organization is where we have information that students care about, want to favorite, and want to be notified about.
  • Temporally, there's also a variable of what day of the week it is. It's necessary to display this to let users look ahead of time, and many dining halls use a rotational cycle to their dishes, e.g. Taco Tuesday or Fish Friday. This prototype has placeholder text, but dishes themselves change day to day.

A screenshot of design components I made in Figma, including cards for each station color and of the dish calendar view.

The design tool of choice for the rework was Figma, and I made extensive use of components I created, color styles, and variant tooling to make exploration and complex flows efficient to model. Auto Layout features also made laying out card-based interfaces pleasant and enjoyable.

Combining these features with the use of overrides to specify and separate content from style made for an efficient organization of the app that mirrored how it would be handed off for development.

©2021 Dieter Brehm. All rights reserved.