How to Prototype a Mobile App with No Coding/Design Experience

by | Jul 15, 2019

Bringing your idea from concept to full fledged mobile app takes many steps, and one of the most important steps in this process is prototyping. Prototyping is the process of visualizing your final product by breaking it down to its core components, which includes the user flow, feature requirements and the overall look and feel. Developing a quality product starts with designing a comprehensive prototype. Within a design firm or organization with product resources, a designer or engineer typically handles prototyping, but it is 100% possible to prototype your dream product without the help of a coder or designer. Don’t underestimate the value the simplest of tools can play in helping you generate your idea.  Paper Prototyping is a simple tool to share your vision with your team and prepare for the next steps in the process of bringing your app to market.

Paper Prototyping is a simple but effective way to storyboard your software idea. By simply sketching your app elements on paper you can visually define  the apps key features. Once you’ve done that, you’ll be ready for a more robust prototyping tool and the learning curve for using it won’t be as steep. 

Here’s a quick guide to how to start the process. 

  1. Materials for your prototype

This process starts off as simple as possible. In some cases you can visualize the entirety of your project on sticky notes. Here are a few options you can use to get started: 

  • paper
  • whiteboard
  • poster
  • sticky notes
  • sketchbook
  • notebook
  • scissors
  • markers

Before you start paper prototyping, it’s important to define the goal of your prototype.  Is this a quick sketch to help explain your app vision to your team? Or are you doing something more detailed and attempting to gather user feedback on the experience? You want to choose the proper tools to create a prototype that fits your needs and delivers on the goals you’ve defined for your prototype.  

  1. Mentally prepare

You are about to embark on a creative exercise, so take a step back and attempt to relax. A paper prototype should be simple, and fast so don’t get too bogged down on the details. It is important to keep in mind that no matter how detailed and complex your paper prototype is, you won’t get the same effect as you would using prototyping software. So use this as a drafting tool in your process and strive for perfection in concept rather than perfection in design. A great exercise to begin is to make random shapes and doodles on a scrap of paper, it will help your creative energy flow and gives your eyes a chance to adjust to the medium you are choosing to help make your review process smoother.

  1. Start to sketch

Let the creativity flow as you put pen to paper and begin to sketch out your vision. It is best to not doubt any of your ideas or be too harsh on your drawing skills. You don’t want to block any potential design breakthroughs. There will be plenty of time for review and iteration  later in the process so use this time to put as many ideas to paper as possible. 

Here are some quick tips when you are embarking on the process of creating your paper prototype:

  • Define your app map 
      • What capabilities will a user have within the app? Sketch a screen for each major element. As you do this, you’ll naturally start to break down each major element into its component parts and your app map will start to take shape. 
  • Start with your mobile design first:
      • As a mobile phone screen has limited real estate, and your app likely will have many elements, consider how you’d like a user to navigate through the app. For example, if you have more than 4 or 5 menu items you should consider a hamburger navigation as opposed to a bottom navigation.Use basic UX/UI principles
      • Although this is a paper sketch of what a potential mobile or web platform will look like it is important to still base your sketches loosely on UI foundations. As a quick refresher here is our list of 5 quick steps you can take to get to an incredible UI and UX for your mobile or web app.
  • One Sketch Per Screen
    • One thing to keep in mind throughout the paper prototyping process is the implicit limits of the medium in use. When you are sketching out your design you may feel tempted to completely replicate a full digital experience, but sketches on paper should take a high level approach as opposed to a high fidelity design. To make sure that you are getting the most out of your paper prototype try to keep the design simple and don’t over overcrowd the screens. For every piece of paper you sketch on attempt to only highlight one key function. 
  1. Form your sketches

Now that you have all of your sketches finalized its time to organize them to create a cohesive story board you can present to colleagues or share with whomever will be developing your app. Here are a few of the most effective methods to help you bring your prototype to life.

Physical Visualization

One of the easiest and quickest ways to create your storyboard  is to lay out all of the sketches in order and physically move them around to demonstrate how these screens would function in an actual use case. You may consider taping the app screens to a whiteboard so you can draw arrows that will illustrate a user’s progression through the app. 

Digitize It

There are many tools online that you can upload your screens into, one of the best tools for this is POP by Marvel. This tool allows you to take photos of your sketches and create a more fluid digital version of your mobile prototype. Tools like this allow you to get a more detailed view of what your app could potentially look like.  

For more tools for helping you paper prototype to its fullest potential check out our list of resources at the end of this blog post.

What’s Next?

So you now have a presentable paper prototype. What happens next? Testing of course! User testing is one of the most important stages in your prototyping journey. Gathering initial feedback is vital to the prototyping stage of building out your product as it will enable you to further refine your idea and user flow prior to committing time and resources to a high fidelity prototype.

Developing a mobile prototype does not have to be limited to professionals. Using a paper prototype is a great way for anyone to create a working prototype with no coding or design experience needed. 

Additional Resource

Start Designing Your Custom App

Start Designing Your Custom App