Snack Attack

As an exchange student at ITU Copenhagen, I was part of a course called Designing Digital Play. In this course, we focused on how play experiences could be implemented when designing digital environments and discussed how play is used in the development of interactive services and games. It wasn’t a game design class, but more of a way to use play to create more engaging interactive design and experiences.

For this course, I worked with 5 other teammates who were also in the course: Sophie Rinnerthaler from Austria, Alexander Dacre from Australia, Lian Feng from the USA, Daniel Boel from Denmark, and Frederik Betting from Denmark and UAE. We were tasked with the vague guideline of “redesign an everyday service to make it playful.” We could interpret it anyway we wanted, but our prototype had to accurately represent the playful interaction and experience the user would have.

Concept

We decided to focus on the service of using a vending machine. The process of getting snacks from the vending machine is usually simple and at times frustrating, but the user’s interaction with the machine is function-oriented and uneventful. Shooting objects is especially exciting to people because there’s an element of risk and skill, making it challenging. When the challenges are ultimately achieved, it’s much more rewarding.

Our final idea, to make the vending machine experience more playful, is to turn the vending machine into a shooting gallery. With a laser gun, users would have to shoot down moving animal-shaped containers that contained the desired snacks. This would be similar to a hunting range or a carnival game. Users would pay for the number of shots rather than the price of the snack.

This concept proposes that by adding danger, skill, animal imagery, and some randomness to the vending machine, the consumer will be invited to play and ultimately have a more meaningful and fun experience in consuming their hunted/vended snack.

Process

We decided to create two different prototypes to make our vision come alive: a physical prototype and a digital prototype. The physical prototype’s aim was to mimic the physical interactions and experience a user would have using a laser gun to shoot animal containers. The digital prototype’s aim was to simulate how the visual experience of using the vending machine would be.

Physical Prototype

The first part of developing the initial sketch of the design was to find the most suitable size for the vending machine. The challenge was finding a size that was big enough to have the vending machine mechanisms work, while also being small enough so that the project was still feasible. Before we got to building the prototype, we drew out how the physical prototype would look like and created a storyboard to show how the interaction would go.

Darts were used instead of laser guns to shoot, and balloons were used instead of animal containers to hold the snacks because we did not have have the resources to access laser guns or other technical materials needed to fully develop the product. This was the chosen alternative because darts still required skill for aiming targets just like laser guns did, and when the darts hit the balloons, they made a large bang, similar to how a gun would sound when shooting.

Building

First, the base of the machine was created with two 40cm x 60cm plywood boards attached to one another. This is a smaller scale than most vending machines, but this size was chosen given the materials available and the time constraints for completing the prototype. In addition, a smaller-sized vending machine was easier to move around when conducting testing by other people and presenting for feedback. For the mechanical construction of creating a mechanism that makes the balloons move, the first decision was that it would be powered manually so a motor would not need to be involved. In order to get the person moving the balloons in a position where he/she wouldn’t be in danger of getting hit by a dart, a horizontal stick went from the back to the front of the prototype where the person could turn it. This horizontal stick then had to be connected with a vertical stick that would move and rotate the balloons.

Balloons that were blown up and filled with snacks would be attached to an elastic band that would be rotated by the friction from the moving gears. At the end, we cut out pictures of cows were attached to the front of the balloons. The pictures of cows were included on the balloons to personify them and give the user a better understanding of the concept of “hunting” for one’s own food. A panel of plywood that is 1 meter by 1.5 meters is propped up by a person behind the entire machine. This was implemented as a safety measure to catch any stray darts thrown by the user that missed the entire vending machine.

Digital Prototype The digital prototype was created using Adobe Illustrator and Adobe XD. First, all the components of the vending machine like the machine itself, the food, and the animal (cow) containers were drawn using the pen tool in Illustrator. The hand holding the gun was created to give users the first person visual experience of how that interaction would look like, especially because the physical prototype uses darts instead of guns. The components were drawn in a flat design because it would be the most aesthetically pleasing to look at and easy to understand. The vending machine was filled in as a bright red color to draw attention to it. Because red is also a bright warm color, it creates a sense of energy to it, making it feel more playful. The cows were drawn with cooler colors so they would stand out against the warm colored vending machine. The hand is a pale peach color to stand out even more from the rest of the vending machine and give the flat design more dimension. After all the parts were drawn in Illustrator, they were brought into Adobe XD to animate and imitate the interactions. A variety of different art boards was created, each showcasing a different part of the interaction, like picking up the gun, shooting a target, or collecting candy. Each of those art boards were then connected sequentially, and a transition between the art boards was chosen.

Final Prototypes

Physical Prototype

In the final physical prototype, one person must hold up the 1 meter by 1.5 meter board by standing behind it, so that they do not get hit. Another person turns the balloons on the elastic band with the handle near the front of the vending machine while standing to the side, so they are also not hit by darts. These two people essentially become parts of the vending machine to make it function. Then, the user is given 3 darts to throw at the balloons and must stand 1.5 meters away from the vending machine. When the dart misses, tit sticks into the plywood backing of the machine of into the board held up by the person. When the dart hits the balloon, the balloon pops with a big sound and the candy that is inside rolls down the ramp in the vending machine into the box that catches it below. The user can then retrieve the candy from this box.

User testing of the physical prototype

Digital Prototype

In the final product of the animated prototype, the user first clicks on the box with the pre-planned number of shots available. Then, they are able to click on the gun to shoot down the food. The hand is shown clutching the gun and the user is now able to “shoot” any of the cows. All the cows are drawn with red dots on their heads showing that they haven’t been shot yet, and this is the target the user must aim for to get the candy. Once the user selects the cow they want, the dot on the cow’s head turns green to indicate the shooting has succeeded. The animation of the chocolate falling from the cow container shows the goal has been achieved and the vending machine shakes to imitate the sound of a gunshot and make it seem more realistic. When it reaches the bottom, the compartment changes from a grey to a bright yellow to draw the user’s attention for them to retrieve the candy. The user clicks the compartment and the hand with the candy bar appears, indicating the user has succeeded in retrieving their food. The user can then start the process all over again to retrieve another candy by pressing the digital box where the number of shots were originally displayed.

Video of the interactive digital prototype

Reflection

This project was received well and was an opportunity for me to get again in touch with physical prototyping. It also gave me the opportunity to geht in touch with play and how play could be used in an everyday’s life activity. Together as a group, we had to plan our what materials would be the best for the prototype and how to connect our digital and physical prototypes to be understood as the same product and experience.

Lessons Learned

Designing for physical experiences is different from designing for digital experiences. If the interaction is physical, it’s important to have a physical prototype to give an idea of how it would work in the physical space. The experience of the interactions is different, and to have the most accurate representation of the user experience, a physical prototype with the interaction you want is crucial for testing.