Square Meal

Prototyping demoTry the Prototype

Case Study

I created the Square Meal prototype to demonstrate the unique capabilities of InVision and Pixate (as well as how the two can be used together) at a meetup about prototyping tools for interaction design.

The challenge to myself was to demonstrate the entire process of designing an app, from rough sketches to a complete prototype with complex interactions, all within the 15 minutes allotted for my presentation.

When in doubt, draw more cats

To demonstrate everything I wanted to cover (taps, swipes, transitions and custom interactions) I dug through my sketchbooks and found a goofy brilliant concept that involved QR codes on receipts that could be scanned to access quality food photos you could pretend you took - saving yourself time and ridicule on Instagram.

As an app that seemed a natural fit for Square, I created my parody project in their signature style, complete with illustrations remixed from those by the enormously talented, Tamer Koseli.

The final mockups

The final presentation was a whirlwind tour that demonstrated how to upload and update screens in InVision, create tap and swipe hotspots with various transitions, build a custom parallax interaction in Pixate, save that as an animated gif and incorporate it back into the complete app prototype.