Paper Prototyping For Rapid App Development

Posted by David Ciccarelli

Now some might call me an Apple fanatic, but it’s for good reason.

In fact, I remember the first Apple store I ever visited was in County Fair Plaza in Thunder Bay Ontario, my hometown.

It was beside the barbershop that my Dad used to take me when I was a boy. Dad got no trouble from me for the monthly hair cut partially because I knew I’d have a chance to peer into the window of the Apple reseller, checking out the latest gadgets. The glowing rainbow Apple sign had me mesmerized.

So it’s completely understandable that when the iPhone launched, I was one of the many who stood in line to get their hands on the revolutionary product. As a company, it was really the advent of the iPhone that marked the beginning of the mobile era. But just what did that mean, and how were we to respond?

Since I knew enough HTML, the language of the web, to be dangerous, our first foray in the mobile space was a simple brochure style website that if someone were to visit m.voices.com, they’d see our mobile-optimized version site. It looked great and was sufficient for the first year or so, but our customers were asking for the ability to login and access the rest of their account. That level of programming was beyond me, so I began to explore the feasibility of creating an iPhone app.

Time passed and the data rolled into Google Analytics, web traffic tracking software that told us where people were coming to Voices.com from, how long they stayed and which devices they were using. Shockingly, one out of five people were now visiting the website from mobile devices.

That gave me enough of a push to take the plunge into building an iPhone app.  We posted a job online and recruited a talented mobile developer who created our iPhone app, followed by the iPad app and even an Android app.

The dedicated apps, those installed on iPhone and Android smartphones, didn’t address the people who were visiting Voices.com using the browser on their phones. 

With 85 percent of mobile site visitors skipping through to visit the full site it was evident that we needed to offer more mobile functionality. We’d previously created mobile apps, but eventually circled back to the mobile Web because we wanted to offer full functionality in a website that would meet the needs of our global audience.

As the site continued to scale, me and my team realized we wanted to focus on mobile because that’s where traffic was coming from. Our goal was to cost-effectively deliver consistent user experiences on all devices and platforms, as well as position the company to meet future demands. 

We knew that a successful redesign needed to keep the best of what Voices.com already had to offer.  To ensure this, we surveyed our customers and also deployed Crazy Egg, a heat map application that counted clicks on a page-by-page basis.  This data created a heat map which identified the areas where our users were clicking, likely the areas of the website that interested them most.  These formed the basis for deciding which features were kept and which were soon to be eliminated from a mobile version of our website.

With essential features in hand, we created a Mind Map diagram to visually outline information: in this case, the various screens in the application. Each branch in the mind map represented a screen within the application. The map served as checklist of which pages needed to be designed, developed and tested. It’s been our secret for ensuring a consistent user experience across our brand.

For that we embarked on a complete redesign of the website, using a new technique called “responsive design.”

As tech-savvy as I’d like to think I am, I’ve found that it’s often fastest to get ideas down on paper using a technique called paper prototyping.  Essentially, this means drawing in elements of your experience using a pencil. I even resort to using a Sharpie because they are big and thick and force me to mock-up the big elements and not focus too heavily on the details.  With a few screens drawn on paper, I then present the paper to a colleague and ask “Where would you touch to login?” or “You want to do a search, where would you touch?”  If they get it right, then present them with the next page which represents the next screen in the workflow.

Paper prototyping is like doing a storyboard for a movie, but it’s a storyboard for your app and it allows you to get very early feedback on the workflow without spending hours designing.

So for your next software development project, consider starting with the paper prototype. Get feedback early on by giving “paper demos” to your friends and colleagues.  

Sometimes, the low-tech solutions win out because of their low cost and their speed. It’s hard to argue against the costs of pen and paper, and the speed at which you can iterate your designs.

Try it. You may have just found the magic bullet to hit that next deadline.

Related Articles


blog comments powered by Disqus

David Ciccarelli

David Ciccarelli

David is the Chief Executive Officer of Voices.com where he oversees finance, operations and technology. David was nominated for the Young Entrepreneur of the Year Award by the Business Development Bank of Canada and has also presented Voices.com as a New Voices winner at DigiFest, an award recognizing Voices.com as an industry leader who provides digital media products and innovations that... more



Who's Hiring



Recent Comments

Powered by Disqus