Miki Vizner & Ryan

User Interface – Wireframe

Tufts University, Engineering Psychology Dept.


Representing beer brewing as a process that happens over time allowed us to keep brewers well informed about tasks and the brew status, and close a learning loop with real time feedback. (This is just a wireframe concept)

Brewing beer is an art. Producing beer is an industry. How you support both the creative aspect of creating a recipe and the consistency for mass production is the essence of a human factors problem.

For my Advanced Engineering Psychology class Miki Vizner and I wanted to do a final project on something in which we both were genuinely interested. Enter: Brewing beer. There is a fundamental problem in the balance between supporting a creative process, such as inventing a beer recipe, and providing the infrastructure, automation and process control needed to mass produce a consistent product. We wanted to understand the brewer and build a system that was congruent with how they think about beer and supported the goals they wanted to accomplish, without limiting how they accomplished those goals.

We conducted background research on existing process control interfaces and systems, as well as literature regarding interfaces that support creativity and learning. Todd Charbonneau, head brewer at Harpoon Brewery in Boston MA, was kind enough to answer all of our questions about how he develops recipes and how he interacts with the brewing process control interfaces. We focused our research and design on a 10 barrel brewing system (roughly 350 gallons). It serves as the middle step in scaling a recipe up from home-brew size to full production (100 barrels at Harpoon Brewery). The problem is that the recipes can’t be scaled by simply multiplying the quantity of ingredients, so a lot of experimentation, experience and art goes into maintaining the flavor of the original brew.

The system we developed has three parts. Much of it follows the principles of ecological interface design, where the goal is to minimize the workload on operators during a given task. This usually translates into a hierarchical organization, where lower level displays provide greater detail. The interface itself also supports workload reduction. Another main goal of this project was to aid learning by supporting an understanding of inputs and resultant states. This is especially a challenge in the drawn out, open loop process of brewing beer — outputs (in this case, flavors) are just not available to brewers for immediate review.

Brewing concept map

The wireframe to the left represents the concept map of our system architecture. Each part of the brewing process is chunked on it’s own screen. The recipe creation interface maps closely with the recipe brewing interface. The part on the far right at the end of the process is a hypothetical part that serves to support learning about what different ingredients and brewing actions do. When you finish a brew, you fill out a form or write a response that is your take on the flavors. The system then parses your responses and tries to link what you did with what you tasted (the equations already exist for this kind of prediction. Beer Calculus is a common software used for predicting end results. This system would predict backwards). Then, the system would tag the ingredients and actions with their resultant flavors, to support understanding and recall the next time you go to brew.

Recipe builder canvas

This is the recipe builder canvas. Ingredient “tokens”, with their tagged descriptions, can be dragged into the “canvas”, which has time running along the bottom. By dragging and stretching ingredients, brewers can dictate times and temperatures in their recipe. A temperature scale runs vertically, so moving an ingredient up indicates it needs to be added and cooked at a higher temperature. Actions, such as dry hopping, can be stacked on top of ingredients. The recipe for each section then is a graphic representation of linked ingredients and actions.

Star chart feedback

An expandable star chart on the bottom right (expanded view shown below) provides immediate predictive feedback on recipe decisions. It predicts bitterness, color, original gravity and alcohol by volume along each axis, respectively. These are the 4 main parameters that describe any given beer. In this way, each beer has a unique and informative shape, and when expanded, one can see if a recipe for a beer falls within each defined range for a particular style of beer, or if and where it deviates.

Brewing interface

Finally, the brewing interface walks brewers through their recipe. It “plays” much like a video in a video editing software, where the scrubber (vertical line) represents the current time. Actions and states, as recorded by the brewer in the upper left, are plotted over a grayed out plot of the target recipe. The top bar prompts current and upcoming actions. This is congruent with ecological interface design principles, as it promotes a holistic, future oriented perspective by operators.

The project scope only allowed for paper prototyped screenshots of a narrow set of functions, but the principles described here could be expanded to the whole system. Hopefully, it could really improve the beer brewing process and spread the love of beer and beer brewing far and wide.

Related projects