ProtoPie Prototyping

ProtoPie stands out as an excellent advanced interactive prototyping tool, empowering User Interface designers to provide clients with a realistic experience of the product. It proves particularly effective for presenting and gaining buy-in from stakeholders and investors. Key benefits of using ProtoPie include:

  1. Low-Fidelity Interactions
    Not only is ProtoPie great for realistic looking prototypes, it is ideal for faster prototyping and iterating in low-fidelity. This encourages designers to concentrate on the overall structure, flow, and user experience without getting bogged down by visual detail.
  2. High-Fidelity Interactions
    ProtoPie is great for creating highly interactive and realistic prototypes with complex interactions. It allows designers to create advanced animations, gestures, and responses that closely resemble the final product.
  3. Sensor-Based Interactions
    ProtoPie allows designers to incorporate sensor-based interactions, such as tilt, sound, camera, QR code scanning and proximity, providing a more immersive and realistic user experience. 
  4. Advanced Animation Capabilities
    ProtoPie offers advanced animation features, enabling designers to create intricate animations and transitions between states. This is particularly beneficial for prototyping complex user interfaces and micro-interactions.
  5. Real-Time Preview on Devices
    ProtoPie allows designers to preview and test prototypes in real-time directly on the target devices. This feature ensures a more accurate representation of the user experience and helps identify any potential issues early in the design process before hand-off to the development team. 
 
ProtoPie is one of the tools in my toolbox, along with Figma and the Adobe Creative Suite. It has an excellent plugin for Figma to pull designs directly into scenes, and if anything is subsequently modified can be reflected directly in ProtoPie.
 
I am a ProtoPie expert and a ProtoPie Ambassador and help others within the ProtoPie community to help them with their Pies. This is a selection of some of the Pies that I can share. Most are best viewed on a mobile device:

Website App Prototype

  • Variables
  • Conditions
  • 3D Rotate
  • Chain
  • Scroll Offset
  • Scrollable Containers
  • Components
  • Haptics

This prototype app is a copy of my website and showcase the above features, amongst others.

https://cloud.protopie.io/p/d397ef2abcefc7465daad4c2

Holewise App

  • Variables
  • Conditions
  • Send/Receive
  • Camera
  • Detect
  • Text Input
  • Components

Created for a company that creates hole covers for building sites, this prototype features the use of the camera.

If you see a screen that says scanning just tap on the screen to move forward. Likewise, if you see a screen that says scan QR code then tap the screen. Although Protopie now features QR code scanning this prototype was created before its implementation.

If you view this prototype on a laptop/desktop, use your standard keyboard, rather than the one that appears on the screen. Also, if you visit a camera page on a laptop you will just see the image of a camera and not an actual camera view. This is however viewable on a phone, as ProtoPie kooks into the native features of the phone.

https://cloud.protopie.io/p/c847cfc2fc17a7248a321047

ParseJson Login

  • Variables
  • Conditions
  • Send/Receive
  • ParseJson
  • Detect
  • Text Input

This prototype was created to test the new parseJson feature when it was introduced in ProtoPie.

If you view this prototype on a laptop/desktop, use your standard keyboard, rather than the one that appears on the screen.

https://cloud.protopie.io/p/94cbe1265f2434bdf5f4fc4c

Knight's Journey Game [WIP]

  • Variables
  • Conditions
  • Send/Receive
  • Components
  • Detect
  • Text Input
  • ParseJSON

This prototype game is a work in progress and was a winner in ProtoPie’s Game Prototyping Challenge. (I hope at the moment you don’t manage to travel to all of the tiles, as I need to design the win scenario)!

https://cloud.protopie.io/p/63338a4e4572b29050bd0690

Draggable/Deletable Folders

  • Variables
  • Conditions
  • Send/Receive
  • Components
  • Detect
  • TouchDown/Up
  • Drag

I designed this as a test to see how I could get ProtoPie to detect my mouse over positions, as it is not built into ProtoPie natively.

You can drag the folders to the bin, drag and select multiple folders and then drag the selected folders to the bin.

Double-click the bin to reset the scene.

https://cloud.protopie.io/p/315d4aa93f