Power Paper Prototyping

Project Overview
Carnegie Mellon University  |  Duration: 1 week  |  Project Type: Individual
This was the first step in building a To-do application for a beginner's programming class named 'Programming Usable Interfaces' at Carnegie Mellon University. Paper-Prototyping has the power to capture crucial feedback using rapid iterations of the paper-prototype from target users regarding an application's usefulness and usability before diving into the time-consuming and expensive implementation process. The rest of the project can be viewed here.

The Problem
Programming a mobile app is a task that demands substantial time commitment. Iterating on the interface through programming, while possible, is time consuming as well.

The Solution
Prototyping the interface with paper is a cheap, quick and easy way to test iterations with users. Paper prototypes were built to arrive at the final set of wireframes that would then be coded.
 
My Role
Interaction Designer
Tools: 
Card stock, Felt tip pen, Fine tip pen, Scissors and Duct tape


My Process
Draw  |  Cut  |  Assemble  |  Test  |  Repeat
Since the focus of the academic project was learning to code, I launched straight into paper wireframe design mode based on the mental information architecture that I had of my to-do app. The process was very straightforward. A mobile phone frame was first made using card stock followed by a long strip of wireframes which could be slid under the mobile phone frame to simulate screen transition. Labels were made to represent entered text and interactive elements. User testing was then done by simulating the workflow using the paper prototype. Based on insights gained, the cycle was repeated until the usability gaps were addressed. The final paper prototype formed the basis of the high fidelity Photoshop mockups which were then used as reference for programming the app.
Conclusion
Being someone who always goes through the wireframing phase hand in hand with Balsamiq Mockups, I was initially skeptical at the thought of manually making hand-drawn and hand-cut paper wireframes. However, I quickly saw the power of the medium. It enabled on the spot 'editing' by simply throwing away the bit of card paper bearing the button or icon that did not work for the user and replacing it with a brand new replacement created right in the middle of user testing. Also, I realized that this would be particularly helpful in the future for conducting users tests of non-traditional interfaces such as those belonging to the augmented and virtual reality domains. Paper, scissors and duct tape would be all that I needed to simulate the experience!

You may also like

IoT Scenarios for Business Jet Interiors
February, 2016
Leap: GPS Accuracy Enhancer App
August, 2014
Field Service Supervisor App
June, 2014
AR Workforce Management App Scenarios
January, 2017
Geospatial Data Manager App
December, 2015
The Art of Breathing Life Into Paper
July, 2013
BotBarbello: The Ruby + Slack Chatbot
January, 2017
HTML + CSS + JS Prototyping
October, 2016
Cube: Institutional Asset Management Portal
January, 2017
Live Mine Photo Capture App
July, 2015
Back to Top