Protopie: the gap between prototype and final product is narrowing

Original illustrations from Drawkit

A PROTOTYPE

Illustration of a prototype (a person building an interface)

What is a Prototype?

So that we have a common reference, let’s define the word “prototype”. According to Wikipedia, here is the definition of the word prototype:

Strengths of the most popular tools

If you are interested in Protopie, there is a good chance you have already made one (or more) prototypes using one of the well-known tools on the market (Sketch, Figma, Adobe XD, Invision Studio, Principle, Axure, …). These tools have the considerable advantage of being relatively simple to use, being more widespread (therefore more practical for collaborating), and of even having a free version for some of them.
Now that we’ve acknowledged their most important benefits, let’s move on to what sets Protopie apart from these tools.

PROTO WHAT?

Illustration of word Protopie (proto + pie = protopie)

What is a Static prototype?

By static, I want to describe any prototype which is scripted to the millisecond and which doesn’t leave the possibility to the person testing it to influence this script. Even if its owner creates a script with several branches, these branches will be isolated from each other. The result will remain the same: a prototype with a predictable end down to the pixel and the word. What is possible to emulate with this type of prototype is more limited.

What is a Dynamic prototype?

A dynamic prototype is a prototype which certainly has a script (in order to tell a story), but which lets the person testing it influence this script in different ways. This type of prototype has the potential to emulate with great fidelity what a finished product would feel like both visually and functionally.

How can Protopie create dynamic prototypes?

Protopie makes it possible to create dynamic prototypes using:

  • Formulas: instead of giving a fixed value to the x position of an object, you can use a formula. Example: position x of my square = position x of my status bar +100. Each time the status bar moves, the square will move to always be 100 pixels away from the latter.
  • Variables: a variable can be associated with a field to change its value over time. Example: when the user clicks on “add to cart”, add 100 to my variable (and therefore to my named field) “Total”
  • Conditions: it can trigger consequences when certain prerequisites are met. Example: When/If opacity of the layer named “square” = 0, then change the color of my status bar.
  • Smartphone sensors: with Protopie, you can use your smartphone’s sensors: proximity sensor, vibrator, gyroscope, camera, microphone, 3D touch, … in your prototypes.

EXAMPLES

Illustration of “Examples” (a person showing something on a board)

1. Upload

Concept: This prototype is a concept of a file upload page.

Prototype of a “Drag and Drop” interaction — made in Protopie

2. Netflix Assistant

Concept: This prototype is a concept of an app I called “Netflix Assistant”. This app would suggest series and movies to undecided Netflix users, by taking into account their tastes (based on their likes in the Netflix app), and the free time they have ( by logging into their calendar).

Prototype of a Netflix Assistant — made in Protopie

3. Chili’s Restaurant

Concept: This prototype is a concept of a restaurant’s order funnel. The user chooses dishes, delivery time and his order is confirmed.

  • Each time the user adds or removes a dish from the basket, this action sequence is triggered:
  • a formula makes it possible to add or remove the price of the dish from/to the “total” variable
  • the “add to cart” button disappears to make way for the “remove from cart” button or vice versa

PROTOPIE IS ALSO…

Illustration of list of features protopie has
  • Components: to avoid recreating all of your interactions. What is interesting to know here is that unlike Principle, for example, the information contained in the component is indeed the interaction (a chain of states triggered by an action on the part of the user) and not just a state. So when you drag your Tab component for example on a screen, you will only have to change the name of the tabs, you will not have to redo the functional side of the tabs (move the bar when the user touches one of the tabs).
  • Etc …

WHO SHOULD BE INTERESTED?

Illustration of people

SUMMARY AND PROJECTION

Illustration of the “Projection” (a woman looking far ahead with binoculars)

Today

I am not saying the software is perfect, of course it is perfectible, like everything made by humans.

Imagine tomorrow …

Using Protopie, I saw a bright future … close your eyes for a moment … no, actually don’t close your eyes, you won’t be able to read this article otherwise, but close an eye and imagine …

Product Researcher & Designer ⎜ Interested in human behavior, and many forms of expression (Painting, Music,...).