Prototyping is an incredibly important stage in design thinking. Here is where you put your ideas to paper (literally in my case) and see if your idea can actually exist in the real world.

I’m familiar with prototyping and even more familiar with the type of paper prototyping for an app. I created a fake dating app called Spark with paper prototyping, you can read about that process here, and you can actually play my paper prototype here. Even though I created that prototype about a year ago, it’s stuck with just how much fun I had creating it, prototyping is easily one of my favorite steps in the design thinking process.

Before I get any further in the process, let me explain what prototyping actually is.  According to the Interactive Design Foundation, the purpose of prototyping is,

“When designers want to determine and understand exactly how users will interact with a product, the most obvious method is to test how the users interact with the product. It would be foolhardy and pointless to produce a finished product for the users to test. Instead, designers can provide simple, scaled down versions of their products, which can then be used in order to observe, record, judge, and measure user performance levels based on specific elements, or the users’ general behaviour, interactions, and reactions to the overall design.”

That’s a great definition but in my opinion it’s a lot of words to say that a prototype is your user’s trial run. Here is where you put your ideas down and see if anybody can see what you’re trying to say. There’s a lot of different ways to prototype but for something like an app, which I’ve been in the process of creating and you can read about here, a paper prototype is a great way to lay out your thoughts.

Below you can see my paper prototype of my My Mountainside app. The images will be available as a PDF at the end of the post. Also, I will be adding commentary after each image to provide clarity.

Above are basic screens, the first phone shows the key which doesn’t have much on it, just notes that things highlighted in green means that they are clickable, an x in a square means an exit and kb in a square means keyboard. The second phone shows a notification, a way that people can access the app that notified them they have an event to attended in one day. The third phone is a loading screen for the app, looking back now it looks like a bolt of lightening but that’s actually the mountain logo for the town of Mountainside.

Above in the first phone is the log-in. There’s an option to create an account if you don’t already have one and an option to remember your log-in info. The log-in information is mostly for the forum posts and sign up options. The second phone represents the home/ landing page. This phone has some featured news and featured citizens, but mostly serves as a home to the hamburger menu. In the third phone the hamburger menu is selected and shows the different pages you can access. I’d like to note that I forgot to add the option to return to the home page on the other tabs but that will be included later.

As seen above once you access a page, the name of the page will appear at the top of the page. From there you can scroll down for more options to tap on or interact with things like the events tab. On the Community page you can see where the original notification came from to let the user know they have an event coming up.

All of the other pages follow the same format. There’s a backspace button that lets you return to the previous page and the hamburger menu is always visible to return you to the homepage or to switch to a different page. Certain pages have special features like the ability to sign up for events or to find more information about local shops but again, they all follow mostly the same format.

Prototyping really helped me to visualize my My Mountainside App. Putting myself in the shoes of the user helped me realize what I was missing and what was unnecessary in my original plans. For example, if I hadn’t prototyped I wouldn’t have realized that I wanted to put my events calendar on my Community page rather than on my homepage. I’ve always been a visual learner so this is definitely a technique that I can appreciate.

PDF of Prototype