How anybody can create a Demo App in less than one hour?

Prototyping Framework

I N T R O D U C T I O N

When I got my first iPhone in 2012, I decided I want to work in mobile product management and since then I have made it a habit of frequently talking to colleagues, friends or random strangers about app ideas. Over the years the feeling crept up on me that everybody has at least one good app idea. Some ideas are brilliant and no one has built them so far. Yet people are afraid to get started and make their vision become reality, primarily because they don’t know how to begin. Excuses (besides no time/other interests) often sound like:

These most common responses show the most typical problem spots: Design, Code, Organisation and Funding. Over the years, I’ve come to realise that people focus too much on the actual app production instead of thinking of the first and most elementary step: to create a demo app to showcase the idea before investing huge amounts of money and time. So, my typical response is like:

Still, many people I talk to can’t be convinced. But others keep asking me for details on how to create a demo app, what tools to use and how to bring that app — the magic seems to be that no coding is involved — on a real phone to showcase it.

As I saw myself sharing wireframe kits, templates, tips and other know-how more than once a week during the last months I felt it might be a good idea to create a little guideline so more people could have access to the idea of prototyping (and I save some of my time for creating more free ressources).

And here it is: Let’s start with the most important question: Why do I need a demo app?

  • Visualise your idea and understand your product in a better way
  • Pre-test your apps user’s flow & experience as well as design elements
  • Engage with people by presenting it on your smartphone like it would be a real app (e.g. to potential co-founders/employees/investors)

3 — P O I N T — P L A N

1) G O A L S

Start to define your app’s idea by writing down your app’s goals. What is the one thing you want the app to do? What are other secondary goals? As an example for this article I will create a travel app. The idea if this app is to let users discover travel destinations.

  • The primary goal of my app is to get each users contact information (which I need for later email/call conversion funnel)
  • Secondary goals include browsing travel destinations, chatting with travel agents, get special offers etc. (we wont focus on these secondary goals in our demo app)

2) A R C H I T E C T U R E

This task’s goal is to get an overview of the user’s flow in the app. You want to understand the structure of the different screens. This can be done by hand-written sketches with paper and pen or using software like PowerPoint or any graphic design tool. For our travel app example I used PowerPoint to create the flow-chart.

3) S C R E E N S

Before you ask yourself “what does a screen look like?” you focus on the question “what should a screen do?”.

You are going to draw the skeletal framework of your app design, screen by screen. Elements are arranged to best accomplish your app’s purpose. They are usually created as pencil drawings, (whiteboard) sketches or with the help of software. There is a bunch of web-based wireframing applications on the market which you can use. But my personal experience is that these tools don’t solve the problem (to create a demo app) in the best possible way. (I wrote an article about the pro’s & con’s in which I provided a Free App Wireframe Kit). The basic steps are:

→ This tutorial video shows the different steps of creation in detail:

Tutorial Video

R E S U L T

And this is the final demo app. You can try the demo app in the browser (like here) or send it via SMS (or link) to any mobile device.

R E S S O U R C E S

T O O L S


Feel free to join my infrequent newsletter, usually once a week.