Ideation 11: Paper and Cardboard Prototyping

Paper and Cardboard Prototyping

Ideation 11

This lesson can help you earn points in the technical portion of the Demo video in the rubric. It will also help with your Technovation Learning Journey.

In this lesson, you will...

  • Learn about common User Interface (UI) conventions
  • Create a paper prototype of your app, or 
  • Create a cardboard prototype of your AI invention

Key Terms

  • Prototype - an early model of a product
  • Paper Prototype -  a hand-drawn representation of what your app will look like
  • Cardboard prototype - a mockup of a physical invention or system using paper, cardboard, and other materials
  • Conventions -  is something that is common or is used a lot

Prototyping

Now that you have an idea for your minimum viable product, it’s time to sketch out some ideas and think about what your project will look like. If you are making a mobile app, you want to plan what your user  interface might look like. If you are making an AI project, you want to plan what the invention will look like physically, and how users will interact with it.

A prototype is an early model of something. There are different kinds of prototypes, but we will be focusing on paper prototypes in this lesson. A paper prototype is a hand-drawn representation of what your app will look like.  It typically looks like screenshots.

Hear how other Technovation Girls teams created paper and digital prototypes!

What are the benefits of prototyping?

  • You can quickly communicate your ideas in a visual way. For example, you can show what happens when you click on buttons in your app.
  • It’s collaborative! When you work on paper or with cardboard, it’s more casual and conversations spring out of experimentation.
  • It’s inexpensive! You don’t have to spend a lot of money and time to create a paper or cardboard prototype. You can use materials like cardboard, paper, magazine cut outs, post-its, markers, stickers, tape, popsicle sticks, pipe cleaners, and glue.
  • You don’t need access to a computer or the Internet.
  • You don’t have to be a technical expert for this part of the process.
  • You can see how your users react to your prototype to quickly learn what may or may not work in your design.
  • Prototypes can help to confirm design decisions before you spend more time building a device or developing and coding your app.

 

Paper Prototype for Mobile App

A paper prototype is a hand-drawn representation of what your mobile app will look like, if that is what your Technovation project is.  It typically looks like screenshots. If you are making an AI project, skip down to the Prototype for AI Project section below.

 

Conventions

Before you start, here are some basic UI conventions that you can use in your app. A convention is something that is common or is used a lot. Here are a couple of common user interface conventions. You don’t need to use all of these conventions, they are just suggestions for certain things you might want to include in your app.

Buttons

Buttons are used everywhere in mobile user interfaces.  They are used to prompt the user to take an important action such as “sign up” or “submit”. Be careful not to over use buttons, too many buttons can look cluttered and confusing, and the user won’t know which one to use.

Buttons

Buttons are used everywhere in mobile user interfaces.  They are used to prompt the user to take an important action such as “sign up” or “submit”. Be careful not to over use buttons, too many buttons can look cluttered and confusing, and the user won’t know which one to use.

Splash Screen

Many apps will use the full screen to display their logo when you first open it. This is called a splash screen. Sometimes they will put a navigation menu or buttons on this screen.

Logo and Header

Most apps have a place at the top for a logo on the main navigation menu.


 

Navigation Bar

A navigation bar helps users find what they are looking for in an app. Many apps put a navigation bar at the bottom of the screen containing icons. You should limit your navigation bar to five items or less so it doesn’t get cluttered.

 

   

Full Screen Menus

You can show your user a full screen menu to help them navigate your app. This can look like a list, or you can get creative and use blocks of color or images.

 

 

   

Hamburger menu

A hamburger menu looks like this:

It is used when a full navigation bar or menu can’t fit on the screen. When you click on it, it will bring a hidden menu out.

   


 

More options menu

A more options menu looks like this:

Similar to a hamburger menu, this menu will also bring out information that can’t fit on the screen.

   

Search Bar

Having a search bar is an extremely common way to help users navigate your app.

Adding a magnifying glass next to the search bar helps your users know it is a search bar.

Scrolling Feed

Most users are used to scrolling down to see more information.  A feed can be used to show more information than will fit on one screen.

 

 

Look through some of the apps that you have on your phone. What parts of the user interface do you see being used over and over again? What parts do you think look nice or make the app easy to use?

Although you might want your app to look really different to stand out from your competitors, using conventions can actually help your users understand how to use your app more quickly. For instance, most users are familiar with a hamburger menu, so including one in your app could help a user quickly understand what to do when they open your app. You could also design a new type of menu, but it might be confusing to users and they might not be able to figure out how to use your app. Of course, you should get creative with your app if you want to! In the additional resources section there are tips for how to test out different parts of your UI with your users. Later on in Entrepreneurship 5: Create a Logo, you will design a logo and choose a color scheme for your app.

  • Download a new app from the app store right now. Does it have any of the conventions mentioned above? Try using the app for around 5 minutes. How long did it take you to figure out how to use it?
  • Need some suggestions?
    • Try All Trails (iOS and Android) or Spotify (iOS and Android).

Before you start, you can learn more about paper prototyping, user flow, and color theory in this short video with Melissa Powell who is on the Google Developer Relations team, and Mariam Shaikh who is a Senior User Experience Designer at Google.

Ready to start? It’s time to create your own paper prototype. Sketching is a fundamental part of the design process and can help you make key decisions about what to design. Your paper prototype can be as simple as drawing on a piece of paper and is helpful when you are working with your initial ideas. You can show your basic app structure and experiment with how people will interact with your app. You can also test colors and where buttons will go. Spending time now to test your ideas on paper will help save you time later when you transfer your ideas to your digital prototype.

Prototype for AI Project

If your project uses AI and will be a physical three-dimensional invention, you want to use three-dimensional materials for your prototype. As a first step, it makes sense to sketch out what your invention will look like on paper. The next step will be to take your sketches and turn it into a physical model, so that you can get a sense of size, shape, how safe it will be, and how it will work. As with paper prototyping, you don’t really have to worry about making it “look good” at this stage. This is just a first step in your project!

This video from MIT shows the basics of why and how to build a physical prototype:

By starting simple, with basic materials like cardboard and paper, you will gain more information about what your final prototype will look like.

If you also have construction kits available to you like Legos, they can be helpful in building your prototype. Use whatever is easily available to you at this stage of your project.

You will want to show your prototype to your target users to get their reaction to it. Do they like the size, shape? Is it easy for them to use? Do they feel it will be safe for them to use?

Activity: Paper Prototyping for Mobile Apps

What you will need:

  • Plain paper
  • Markers

Optional:

  • Printouts of the worksheet
  • Stickers
  • Glue

 

  • Scissors
  • Tape
  • Magazines

What you will do:

  1. As a team, sketch each screen of your app. Put your ideas down as they come and try not to judge them yet. You can question them later! Remember to focus on creating features that are a part of your MVP from the last ideation lesson. Start designing the features that are included in your MVP first. As you do this, you may want to consider:
    • Will it have a logo?
      • What is the color scheme going to be?
      • What would the first screen look like?
      • You will spend more time working on your color scheme in Entrepreneurship 3 and creating your logo in Entrepreneurship 5.
    • Does your app need a menu for navigation? What will that menu look like? What will be on that menu?
    • Will a user log in to your app? What could the login screen look like? What about a profile page?
    • What happens if you click on a button to get to the next screen?
    • What will each screen look like?

paper prototype example

2. Check out the example of a paper prototype above. Notice the way the stickers are used to show where users can click on buttons. Also, in some cases there are sketches underneath, which would possibly be the next screen a user gets taken to once a button is clicked.

3. Once you have a working prototype, create a run through of how the user would navigate the app. You can take pictures as shown in the video above and create a .gif or video.

4. Another great option is to present the prototype to your target users. Since they will end up using your app, test it out with them first! Write down any feedback they have, or video them using the paper prototype. You can gain lots of useful information by having users test it out at this stage!

Activity: Physical Prototyping for AI Projects

What you will need:

  • Plain paper
  • Cardboard
  • Scissors

 

  • Tape
  • Markers
  • Glue (hot glue is best)

Optional: 

  • Other materials you have around (wood sticks, pipe cleaners, wire)
  • Lego blocks or other construction kits

What you will do:

  1. As a team, build a basic model of your invention.
    • What shape will it be?
    • Are there different parts or pieces?
    • How big will it be? You can start with a smaller scale model for this first prototype. 
  2. Test out how a user might use it. Check for ease of use, safety, durability.
  3. Another great option is to present the prototype to your target users. Since they will end up using your project, test it out with them first! Write down any feedback they have, or video them using the model. You can gain lots of useful information by having users test it out at this stage!

Reflection

You just created your prototype!  We recommend that you save your paper or cardboard prototype because you will need to refer back to it as you work through building your project. Make sure to leave it in a safe space so you don’t lose it, or ask one of your team members to be responsible for it. You should also take pictures of your prototype, especially if it’s a physical model.

  • If your project's design should be the “minimal viable product”, what features must be included and what features are you removing from your design?
  • Did you choose to follow any conventions, if so, which ones?

Additional Resources

Using digital tools to paper prototype 

If you are on a remote team, you might also wish to create a digital prototype of your app. You could try a tool like InvisionApp or even something simpler like Google Slides. Here’s an example of a digital paper prototype using Google Slides:

 

 

Physical Model Prototyping

Here is a great website with tips and tools for using various materials to build 3-D prototypes.

Design Modeling