Module 3 Final Prototype

Weekly Activity Template by Olivia Ho

Project 3


In Module 3, we brought everything together into a fully integrated prototype called Papa Bear’s Pantry. In this phase we moved from creating a cardboard prototype to a laser-cut and connected the ProtoPie interface with the Arduino dispensing mechanism.

Activity 1: User Interface / Product Design

Moving from the sketches, I wanted to quickly test layout and basic interaction ideas without committing to high fidelity wireframes. We used these to explore layout and plan out cardboard prototype. Also explored shape of vending machine, proportions, screen placements, and where physical components would go.

I started off to just showcase rough visual placeholders to help us decide what information we wanted on screen. Using the feedback I had received, I decided to go for a much more earthy and neutral palette. I moved away from bright, contrasting colours that felt artificial and chose muted tones to give off a more “whole foods, organic” look to the design. These early iterations explore the core flow of Papa Bear’s Pantry. The design aims to focus on helping users quickly browse snack options and view essential information, The nutrition facts are accessible by simply clicking on an option. In this iteration of the wireframes, I included a start screen that introduces Papa Bear and sets the tone of the vending machine as something more “health” and fresh. After you tap the start screen, you are shown the options with a text that says “Click on lunchbox to view its nutrition info”, the objective was to let users know that they could click on an option to view the nutrition info of it. Even if users don’t read the text, they will naturally click on an option just to see what the cards do and it’ll still show the information of it as shown in the third screen. The final screens uses a familiar vending machine interaction model while still showcasing the idea of emotional connection with our Papa Bear mascot. The experience hopes to support users in making quick yet thoughtful decisions while also prioritizing nutrition to make healthier food choices.

Activity 2: Arduino Coding / Circuit

For this final project Evan had already tested with both the stepper motor and the servo motors in Project 2. The question came down to if it was possible to run two of either on the motor shield. The motor shield we borrowed was the Arduino Motor shield rev3, the pins on it were relatively easy to set up for one of either motor type but setting up two proved challenging. Pictured below are working code snippets of both running a single motor.

Stepper Motor Stepper Motor Servo Motor Tutorial by Science Buddies. Servo motor and Arduino wiring

Activity 3: Laser Cut / Construction

Using a lasercut file from another vending machine project on Instructables, Evan created the lasercut mapping for the vending machine and we put the pieces together using wood glue borrowed from the Crafts and Design department.

Early cardboard prototype testing the dispensing opening and internal spacing. Interior layout experiment with cardboard dividers and spiral mechanisms. iPad integrated to test live camera feed and screen placement. Refined exterior build exploring structure, proportions, and access points. Final prototype interaction testing with the full UI flow on screen.

Activity 4: ProtoPie

While I handled porting the wireframes to ProtoPie along with the essential screen toggling features, Evan handled the complicated integrations of variables, conditions, and assign values to allow for more nuanced interactions in the prototype.

Building the onboarding screen in ProtoPie, setting up the start interaction and visual layout for Papa Bear’s Pantry. Prototyping the main browsing screen, testing tappable lunchbox cards and the flow for viewing nutrition information. Creating the cart and checkout interactions, including add-to-cart behavior and confirmation actions. Testing Arduino–ProtoPie communication, using serial logs to confirm button inputs and motor triggers were being received correctly. Live prototype testing on the physical machine, verifying that the UI interactions aligned with the real vending machine setup.

Activity 5: User Testing

Across multiple user testings, participants were generally able to complete the core task of purchasing items quickly, most of them being able to do it under 30 seconds. This helped validate that our vending machine flow worked well with what users were already familiar with.

User 1 Feedback: Cool atmosphere and look of vending machine, Used to vending machines having lots of options so thought you could scroll through to see more food options, Liked the live camera feed showing the items being dispensed User 2 Feedback: No visual feedback after adding item to cart, Turning the View cart from gray to green to let users know they can’t click when there’s nothing added to the cart, Possible animation to show item being added to cart, Easy to look through options and the cards signify that they can be clicked User 3 Feedback: Felt hesitant to click on stuff, At first didn’t understand that the text for “Click on a lunchbox” meant you could actually tap on the lunchbox cards to view more details, Not used to this layout since they already had a mental model of existing vending machines *Vending machine motor had a slight malfunction* User 4 Feedback: Wasn’t able to remove stuff from cart, Due to it being an early prototype, certain functions are limited, Layout of nutrition info was easy to read and breakdown User Testing takeaways and next steps for improvement.

Project 3: Final Prototype

Papa Bear's Pantry

In Module 3, we brought everything together into a fully integrated prototype called Papa Bear’s Pantry. In this phase we moved from creating a cardboard prototype to a laser-cut and connected the ProtoPie interface with the Arduino dispensing mechanism.

View photos and video here (Google Drive)
Papa Bear's Pantry front facing. Side view.

Powered by w3.css

×