The Drink Device

This rapid product design exercise was based on the idea of creating a product for small businesses that could help them in their day to day activities. From that baseline, I began sketching up ideas for what would eventually be called the Drink Device, an application on a tablet not too dissimilar from the mobile ordering kiosks you see now at McDonalds that could take drink orders at a local coffee shop. If there was a long line to talk to a barista, someone could simply use this app to get their order in and not worry about waiting in line. This also doubled up as a way to avoid person to person contact, keeping in mind COVID-19 more than anything.

Step 1: Sketching It Up

Before the Drink Device was brought over to Figma to make an interactive prototype, it was first created as a paper prototype then tested with two people. The main focus of this app was to keep it simple and easy to use, pleasant and light weight. This was supposed to be something anyone could easily pick up and operate without much trouble, and the user flow document was made to highlight this. With only three menus, each one connects to each other in different ways to not interrupt the flow in any manner.

The paper prototype built on this concept of three screens, each one organically moving into the next, allowing obvious ways to go back if the user wished to change something about their order. Once the screen were drawn up, it was time to move onto a simple usability test to ensure the logic of the application was solid enough to move on to a Figma prototype.

Step 2: Evaluating the Sketches

The procedure both individuals followed involved a few steps. First, they were to select a black coffee. Then, they were to modify that coffee to be a large drink, with one cream and two sugars. Finally, they were tasked to progress to the cart where they would say aloud the total of their order before placing the order. The idea behind this process was to have the two users move through each of the screens and interact with certain elements of note in order to ensure interactive elements were easy to see and make use of.

Overall, the testing process went smoothly. I was most happy to see that when both users got to the point where they needed to add two sugars, they did in fact tap on the addition symbol twice despite the fact that this is a paper prototype. Some of the comments indicated by the users included the desire to have the ability to add or subtract drinks from the Cart screen (in this instance to get two of the same drink for a loved one). Both were pleased by how simple the application was to use in this state. Tester #2 made it clear that such a system would be nice as sometimes when she goes to a coffee shop the baristas do not hear her order properly and get it wrong, so being able to select exactly what she wants would be great. 

With the short evaluation process completed and suggestions taken on how to improve the application, it was time to start designing in Figma.

Step 3: Developing in Figma

Some of the words that come to mind when people think of cafes and coffee shops are hip, easy going, cozy. For this reason, the Drink Device was designed to be an app that was easy on the eyes with pleasant colors and employed more “hip” elements such as its text, which shies away from standard fonts. By making use of these design philosophies, the Figma prototype is able to maintain a style that compliments the vibe found in cafes while still allowing the same user flow.

Step 4: Conclusions

While there was no time to evaluate the designs made in Figma during this rapid exercise, I feel confident in the finished product due to having a paper prototype looked at by potential users. Overall, this experience was great practice in helping me think as a designer, as I worked to create something both stylish and incredibly useful in a short amount of time. Thanks to user testing, I’m able to know that the baseline I created and the user flow associated with it where a right direction to move in, and it helped greatly when pushing the work forward into the next stages.

The Sketches of the Drink Device

The Paper Prototype for Drink Device

The Figma Prototype for Drink Device