TL;DR

This was a lot of fun to work on! I collaborated with Khonok Lee to create this Kiosk prototype, of course using ProtoPie 🥧 🙋‍♀️ Continue reading to learn about all of the steps we took to create this Kiosk prototype.

Step 1: Figma to ProtoPie

First things first, we created all of the UI in Figma and exported it to ProtoPie Studio using the Plugin. We talked about the user journey on Slack/Zoom and planned all of the interactions ahead of time. Typically, the first steps of the product design process involve a lot of research; however, because we wanted to create a showcase product, we skipped the wireframe and user validation stages.

Step 2: Making the interactions

This prototype combines very simple interactions, but when they are combined, the result is highly realistic. For this we used mostly Chain Trigger combined with Scale and Opacity Responses.

We used ProtoPie Connect to achieve our goal of making this prototype indistinguishable from a real product. ProtoPie Connect can bridge the gap between prototypes and any hardware, API, or app. As you can see on the laptop screen when each item is selected the information is shared to ProtoPie Connect, which is where the information can be used across multiple integrations.

Step 3: Payment

Micro-interactions and other animations are also easily doable, here we made a simple receipt animation using a Start Trigger with a Scale Response, and a Detect Trigger with Move and Rotate Responses.

Interaction Recording

If you work with a team, you can share your Pies using the ProtoPie Cloud and record the interactions for a smooth handoff to the development team free of any guess-work. If you’re looking for precision and a detail-oriented design development you might want to check this out.

Thank you for watching

Feel free to contact if you have any questions about the process, working with ProtoPie or just to chat about Design 😃 See you on the next project!