Module 2 Activity Research

Weekly Activity Template

Marley Luna

Project 2

Module 2

Designing Interactions: Visualizing Data

Workshop 1 Guerilla Prototyping I

For this Workshop I wasn't able to show up for class, but I did discuss the completed tasks with my group partner to understand what was conducted and how it could help move us forward in the project 2.

Workshop 2 Guerilla Prototyping II

For the Workshop II Guerilla Prototyping, I assisted my group partner with the creation of the physical prototype with some of the drawings I have provided in activity 1.

Activity 1: My Research/Completed Tasks

This is the first ideation sketch I drew for the customer-side kiosk interface. The interface was very simple, it didn't contain too much, but this first drawing served as a good starting point to move forward with the project and how the kiosk interface might look later on in the project, which we did use to build off of. This is the first sketch for the kitchen-side kiosk, it is a bit simpler than the customer-side kiosk, though the kitchen-side didn't seem to require as many steps as the customer-side. These are the first sketches for the physical kiosk design, this drawing is much more designed for a lower/mid-fidelity cardboard prototype, as it's somewhat rough, and is just to get the physical layout going a bit further. With potential improvements to be made later on. These are some other sketches for the physical kiosk design, it shows a bit more on how the Makey-Makey might be incorporated into the physical kiosk combining the frame with the interactive Makey-Makey that we'd move forward with a little later on. These are the last batches of sketches for the physical kiosk design, they are extremely simple and left a bit vague on purpose. They are supposed to look more high-fidelity in a sense, potentially showing the direction we might want to go with for the final physical kiosk design.

Activity 2: My Research/Completed Tasks

This is the low-fidelity wireframe for the customer-side and kitchen-side kiosk interfaces. They are directly based on the first sketches I drew. I made wireframes pretty early on just to give a digital presence that we could later move forward with and build off of. This is a more mid-fidelity wireframe for the customer-side and kitchen-side kiosk interfaces. They are based on the low-fidelity wireframes I created earlier, but with more details and a bit more polished look, containing more defined visual aspects and adding things like titles and labels. These wireframes helped us move forward with the project as they were more refined. This is the high-fidelity wireframe for both interfaces, this and the mid-fidelity wireframes are a bit cut off, though the full wireframes are shown and explained more within the final project 2 documentation. This batch of wireframes are much closer to what the final designs digital interfaces might end up looking like, or at least in terms of the layout of things. This is what I brought into ProtoPie to add interactions and make it an actual working prototype rather than just stationary or static wireframes. This is the ProtoPie prototype for the customer-side kiosk interface. It contains simple but effective interactions that allow the user to navigate through the ordering process. This prototype was through directly transferring the high-fidelity wireframes I created earlier from Figma into ProtoPie. This step was a great help in assiting us in visualizing how the final interface could operate on a surface level, not going too deep into some of the specific functions or interactions, but rather being that effective digital prototype we needed for this project. This is the ProtoPie prototype for the kitchen-side kiosk interface. Similar to the customer-side kiosk prototype, it contains simple interactions that allow the user to navigate through the order management process. This prototype was also created by transferring the high-fidelity wireframes from Figma into ProtoPie. This step was crucial in helping us visualize how the kitchen-side interface could function in a real-world scenario, ensuring that it meets the needs of kitchen staff effectively. Both kiosk-sides were given interactions that would link the two prototypes. They were also given Makey-Makey configurations to add in that physical computing aspect we needed to incorporate, which we did successfully for the most part.

Additional Research or Workshops

With the research I conducted, much of it is within the final project 2 documentation, I did much of the food industry research as well as the kiosk interface research, which was explained more in the final pdf.

Project 2

Project 2 Prototype

This is the final prototype we created for project 2, it is a combination of both the physical kiosk prototype as well as the digital ProtoPie prototypes for both kiosk sides. The physical prototype was constructed using cardboard and other materials to create an early tangible representation of the kiosk design. The digital prototypes were integrated into the physical kiosk using the Makey-Makey and our mobile devices, which had some issues addressed within the final pdf, though that we do plan to fix and polish when creating the final design. The prototype allowed for interactive elements that roughly simulate real-world functionality. This prototype demonstrates the user experience and interaction flow for both customers and kitchen staff, moving us closer to our final project goals of creating an optimal two-way kiosk system that allows for more customization and personalization for safety and preference in consideration of the customers.

×

Powered by w3.css