How Health Care Professionals Can Design an App

This article published with permission from iMedicalApps.com.

Creating apps — or any user interface for that matter — starts with nothing but pencil and paper.

That’s the process that was taught to me at the University of California, Berkeley. UC-Berkley is the launchpad of Mac OS X’s and the iPhone’s base operating system BSD, numerous graphics pioneers that have since moved on to Pixar and Sony Imageworks, and countless other computer innovations. Now, I bring this process to you.

Paper prototypes are a type of “low-fidelity prototype” that have many advantages:

1. They can be created quickly.

2. They can be changed quickly.

3. They tell whoever tests your prototype that it’s an unfinished product.

4. They allow you to nail down workflow issues early.

Don’t be taken aback by this very crude method. This method of prototyping is popular because it’s extremely easy to make changes on-the-fly and address interface workflow issues and layout problems. Designers want to make these workflows and layouts smooth before the final interface is created because it’s much more expensive and time-consuming to make changes at the end, to the final products.

Here’s what you need:

• Paper

• Thick pen

• Scanner or camera

• Preview (or an equivalent program, such as Adobe Acrobat)

• Android or iOS device that can open PDF files with links (e.g. Repligo, Adobe Reader)

Here are the steps we’ll use to create a pretend iMedicalApps lab values reference app:

1. Sketch on paper

2. Digitize the images (with a scanner or camera)

3. Create “hyperlinks” within the resulting PDF

4. Have a user test your “interface”

Step 1: Sketch on paper.

Sketch the many different scenarios that your user will see within your app. What will happen when they first launch it? What can they tap on? This might mean having 20 or 30 different screens with all the possibilities. Fortunately, if any particular elements of the screen repeat, you can potentially copy and paste them in an image program later.

In our case, we’ve decided to keep it simple, with a search box and a scrollable list of lab values. Our toolbar on the bottom will serve as “tabs” to let users thumb through the different categories, but we won’t activate this in our prototype.

Here’s our initial screen that will greet users. I’ve labeled the main content area, the search bar, and the toolbar on the bottom.

You want to particularly draw out any resulting screens that may appear whenever a user taps on a button, a slider, a menu, anything that can be tapped.

For inspiration, check out some other paper prototypes & wireframes from this website.

See how these pages turn into a prototype.