5.1. Paper Prototypes

You’ve defined your Minimum Viable Product (MVP), focusing on the core features of your app idea. Before you jump into coding those features in Thunkable or App Inventor, there’s a crucial, fun, and incredibly useful step: Paper Prototyping.

Think of it as creating the first rough sketch or blueprint of your app using simple paper and pens. It’s a fast, cheap, and powerful way to visualize your ideas and get feedback early!

Lesson Topic: 5.1. Paper Prototypes

Part 1: Why Draw Before You Code? (The Power of Paper Prototypes)

What exactly is a Paper Prototype? It’s a set of simple, hand-drawn sketches representing the different screens of your mobile app. You draw the buttons, the text, the images – how you imagine the app will look and function.

Why bother with paper when you have computers? Because it offers huge advantages, especially at this stage:

• Super Fast & Cheap: All you need is paper, pens, maybe scissors. No computer, no internet, no expensive software needed! Perfect for quick brainstorming anywhere.
• Easy Collaboration: Everyone on the team can easily sketch ideas, compare designs, and contribute without needing special technical skills.
• Visualize Your Flow: Drawing the screens helps you see how a user will move through your app from one step to the next.
• Find Problems Early: When you test your paper sketches with users (we’ll get to that!), you’ll quickly spot confusing layouts or awkward steps before you waste hours coding them.
• Get Honest Feedback: People often feel more comfortable giving critical feedback on simple sketches than on something that looks finished. This honest feedback is gold!
• Confirm Designs: Make key layout decisions before committing to code, saving time and effort later.

As the mentor tip suggests, think of paper prototypes as the first draft. They let you explore and test ideas easily and cheaply before building the final version.

(The lesson links to videos showing examples – be sure to check those out for visual inspiration!)

Part 2: Thinking About Your User (Basic UI/UX Principles)

When sketching your prototype, always keep your target user in mind. The goal is to make the app easy and pleasant for them to use. Here are a few principles:

• Keep it Simple & Intuitive: Users shouldn’t have to guess how to use your app. Make navigation clear and actions obvious.
• Consistency is Key: Try to keep the layout similar across different screens. Place common buttons (like ‘Back’ or ‘Home’) in the same spot so users know what to expect.
• Use Standard Elements: While creativity is good, users are already familiar with standard mobile app elements. Using common icons (like a magnifying glass for search) or familiar navigation patterns (like tabs at the bottom or a side menu) makes your app easier to learn. The lesson shows examples of:
  • Navigation: Tabs, Side Menu/Drawer, Cards.
  • Input: Text Fields, Dropdowns, Checkboxes, Sliders.
  • Information: Labels (text), Images, Lists.
  • Container: Ways to group related items on the screen.
  • (Think about apps popular in Uganda like WhatsApp, MTN MoMo, SafeBoda – what standard elements do they use?)
• Accessibility: Briefly consider how people with disabilities might use your app. Are fonts large enough? Is there good colour contrast? (You can dive deeper into this later, but it’s good to start thinking about it).
• UI vs. UX:
  • User Interface (UI): This is what the user sees and interacts with – the buttons, screens, text, images. Your paper prototype focuses heavily on designing the UI.
  • User Experience (UX): This is how the user feels while using your app – are they happy, confused, frustrated? Testing your paper prototype gives you early clues about the UX.

(The lesson links to another video about sketching and paper prototyping – watch it for more tips!)

Part 3: Let’s Draw! (Activity 1 – Paper Prototype)

Time to get creative! Grab some paper and pens.

Your Mission: Sketch the main screens for your app based on the MVP features you prioritized in Unit 4.

Materials: Paper (maybe cut into phone screen shapes), pens/pencils, perhaps markers for emphasis, maybe scissors and tape if you want to make interactive elements (like pop-ups).

Task Steps:

1. Review your MVP: Look at the 2-3 core features you decided on. What screens are needed for a user to complete tasks related to those features?
2. Sketch Each Screen: For each key screen, draw the layout. Include:
   • Buttons (just draw a box and label it)
   • Text labels
   • Image placeholders (a box with an ‘X’ or a simple sketch)
   • Input fields (lines or boxes where users would type)
   • Navigation elements (tabs at the bottom? a menu icon?)
3. Think About the Flow: How does a user get from Screen A to Screen B? Draw arrows or make notes. If tapping a button opens a pop-up, maybe draw that pop-up on a separate small piece of paper you can place on top.
4. Consider:
   • How will users navigate between the main sections?
   • How will they input information (typing, selecting from a list)?
   • Is the information displayed clearly? Is the layout neat?
5. Don’t Aim for Art: These are sketches. Focus on clarity, layout, and flow, not perfect drawing skills! Simple shapes and clear labels are key.

Work together as a team, sketch different ideas, and choose the layouts that seem clearest and best meet your MVP goals.

Part 4: Test Drive Your Paper App! (Activity 2 – Getting Feedback)

Your paper prototype isn’t just for your team – its real power comes from testing it with potential users!

Your Mission: Get feedback on your paper prototype from 2-3 people who represent your target audience.

Goal: Find out what’s confusing or difficult before you code it.

Setup & Roles:

1. Find Testers: Ask friends, family members, or people in your community who fit your target user profile if they can spare 10-15 minutes to look at an early app idea. Explain it’s just paper sketches. Get their permission!
2. Prepare Tasks: Write down 2-3 simple tasks you want the user to try and accomplish using your paper prototype. (e.g., “Imagine you need to report a leaking water pipe. Show me the steps you would take using these screens.”)
3. Assign Team Roles:
   • The “Computer”: One team member holds the stack of paper screens. When the user “taps” (points to) a button or link on the current screen, the “Computer” listens and swaps to the next appropriate paper screen.
   • The Observer(s)/Note-taker(s): One or two team members watch the user silently. They take detailed notes: What does the user tap? What do they say (even if muttering)? Where do they pause or look confused? Do they smile? Do they sigh? Write it all down objectively. (Get permission if you want to audio/video record).

During the Test:

1. Introduce: Briefly explain you’re testing a very early paper version of an app idea and their honest feedback is valuable. Emphasize there are no right or wrong answers.
2. Give the First Task.
3. WATCH & LISTEN (Resist Helping!): Let the user try to figure it out themselves. Don’t explain what buttons do or correct them if they go the wrong way. Your goal is to see where the design fails, not to guide them to success.
4. “Computer” Reacts: The “Computer” swaps screens based only on where the user indicates they are “tapping”.
5. Observer Takes Notes: Capture everything.
6. Ask Questions After: Once they complete a task (or give up), you can ask open-ended questions like: “What were you thinking when you tapped on that part?”, “Was anything unclear on that screen?”, “What did you expect to happen?”.
7. Thank Them: Appreciate their time and feedback sincerely.

(The lesson links to a video example of user testing – definitely watch that!)

Part 5: Learning from Feedback

After testing with a few users, gather your team and discuss the notes:

• What patterns did you see? Did multiple users get stuck in the same place?
• What parts of the design seemed clear and easy?
• What parts were confusing or caused problems?
• What suggestions did the users have?
• Based on this feedback, what specific changes should you make to your paper prototype design before you move to digital design or coding?

This feedback loop is incredibly valuable!

Part 6: Quick Review (Key Terms)

• Prototype: An early model or version of a product.
• Paper Prototype: A simple, hand-drawn version of an app’s screens and flow.
• User Interface (UI): The visual elements and controls a user interacts with on the screen.
• User Experience (UX): The overall feeling and ease-of-use a person has when interacting with the app.

Part 7: Beyond Paper (Optional Next Steps)

While paper is the recommended first step, later you might explore digital prototyping tools like Google Slides (free!), Figma (popular, free tier available), InvisionApp, or POP by Marvel to create more polished, clickable mockups. But always start simple!

Conclusion

Webale emirimu! (Thank you for the work!) Paper prototyping is a fantastic, low-cost, high-impact way to design and test your app ideas quickly. By sketching your MVP and getting real user feedback now, you save yourselves massive amounts of time and effort later by avoiding coding features that are confusing or unnecessary.

Complete Activities 1 and 2 thoroughly – create those prototypes and test them! This will give you a much stronger foundation for building your actual app. Mwerebere! (Take care!)

PROTOTYPING

Now that you have a clear idea for your minimum viable product, it’s time to start visualizing what your project will look like and draft some initial concepts. A prototype serves as an early version of your app. Developers often begin by creating a paper prototype—this is a simple, hand-drawn version of the app’s user interface. It usually includes sketches of each screen, showing how the app might look and function in different states.

WHY PROTOTYPE?

• You can quickly communicate your ideas visually.
• It’s collaborative!
• When you work on paper, it’s more casual and conversations spring out of experimentation.
• It’s inexpensive!
• You don’t have to spend a lot of time and money
• 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.
• Design decisions can be confirmed before you spend time developing and coding your app.

Learn how other ICT Club teams created paper and digital prototypes in this video!

Mentor Tip

Best practices:  When introducing students to paper and cardboard prototypes, highlight the value of beginning with basic, inexpensive models to explore and test their ideas. For example, you might say, “Paper and cardboard prototypes are like the first draft of your design. They help you visualize and understand how your idea might function before creating the final version. These simple models make it easy to adjust and improve your concept.”

Students can also use their paper prototypes to gather feedback from others such as family members, mentors, friends, or people in the community. This input can be included as part of the feedback in their final project submission.

The following videos will show an example of prototyping project with accompanying hardware (on the left) and the process of testing with a paper prototype (on the right).

Guiding Questions 

1. Why is it helpful to build a basic prototype using paper or cardboard before creating the final product?
2. How can making a paper or cardboard prototype help you make your design better?
3. What are some things you might discover by testing a paper prototype that you wouldn’t realize otherwise?

PROTOTYPE ELEMENTS

Keep the user at the forefront of your design! The app should be simple, and easy to use.

How will your app look on an iPhone vs Android?
Phone vs tablet?

Keep accessibility in mind for the 15% of the world’s population who have some sort of disability. Click here to learn more.

Make your screen layouts the same so your user knows what to expect between screens.

USER INTERFACE

Creating your prototype focuses on how the user will interact with your app. This is known as the User Interface, or UI. The UI includes everything the user touches or uses such as buttons, text fields, sliders, and other controls that help them navigate and operate the app.

Another term for designing digital products is User Experience or UX.  Each one is explained below.

USER INTERFACE FEATURES

Below are some of the key parts of a user interface for a mobile app

NAVIGATION

Navigation is how users find what they are looking for in an app. Here are a few examples of navigation options.

CONTAINER

These components allow you to group content together. It helps when laying out parts of the screen, and hiding and showing parts.

INPUT

Input components allow the user to input information into the app. Below are a few examples.

INFORMATION

These components allow the app to share information with users.

USE STANDARD ELEMENTS

While you may want your app to have a unique look to stand out from the competition, using standard design elements can actually make it easier for users to navigate your app.

For example, most people know how to use a dropdown menu. You could create a completely new style of menu, but it might confuse users. It’s better to stick with familiar components so users can quickly understand how to interact with your app.

Check out this short video with Melissa Powel and Mariam Shaikh from Google on sketching and paper prototyping

ACTIVITY 1: PAPER PROTOTYPE

Sketch out the screens for your app

Design the features from your MVP worksheet from Unit 4. Remember to consider:

• How will users navigate from screen to screen?
• How will they input information needed for the app?
• How will information be displayed?
• How will it be laid out in an aesthetically pleasing way?
• Think about colour scheme, font, logo

GET FEEDBACK

Now that you have something physical to represent your solution, it’s time to get some user feedback!

Potential users need to try it out and give you some honest feedback.

What do you want to learn from testing with users? 

One method:

• Give the users a set of tasks to do with your app and see if they can do it without your intervention. 
• One team member can act as the “computer”
  • changes screens or parts of screens based on the user interactions
• Another team member is the note taker
  • writes down what the user does and their comments and reactions.
• With permission, you could also record the testing session. 

Remember, your testers are there to help you! Do not judge or intervene in their interactions (other than the “computer” responding/updating the prototype based on actions).

Just receive their feedback with appreciation.

Here is a great example of user testing for a bike repair shop app.

ACTIVITY 2: GETTING FEEDBACK

Test your paper prototype with 2-3 users

1. Show the prototype to the users.
2. Ask the users to perform a task with the prototype.
3. Let them try to do the task without help.
4. A team member can act as the “computer” and react to their actions.
5. Another team member (or two) takes notes of what the users do, their comments and reactions.

REVIEW OF KEY TERMS

• Prototype – an early model of a product
• Paper Prototype –  a hand-drawn representation of what your app will look like
• User Interface (UI) –  how the user physically interacts with a mobile app
• User Experience (UX) – how the user feels about a mobile app, before, during, and after they use it

ADDITIONAL RESOURCES

While paper is the preferred method for prototyping, especially as a first step, you can also use digital tools to prototype your app.

Many tools exist at a price, but there usually is a free version you can use with limited features or projects. Here are a few possibilities.

• Google slides (easy and free!)
• InvisionApp
• Figma
• POP by Marvel