Prototype Canvas

version
1.0
difficulty
time
90 minutes
people
3-5
license
Creative Commons CC BY-SA 4.0

Simply put, prototyping is the art and science of faking it before making it, where 'it' refers to an innovative product or service. Prototyping is used to make value propositions tangible and concrete. It helps you test a certain aspect of the product of service you have in mind. Needless to say that this is a perfect step to take after having filled in the Business Model Canvas and/or the Value Proposition Canvas.

Includes:

  • Regular size (A4) PDF

How To Use the Prototype Canvas

Prototyping can be used in many phases of the design journey, with different purposes. It can be used to find out if something is technically feasible (an 'engineering' prototype), if your design ideas look and feel good, and satisfies design criteria, or if your ideas resonate with customers (a 'validation' prototype). We focus on the validation prototype for this canvas.

The (Digital) Prototype design sprint is typically part of the Validation phase. It can be used in strategy work as well as in training. It is a very energetic design sprint to get participants from theory into practice, from thinking to doing. You can also use it within the Innovation phase, to make the concepts more real.

Use the Digital Prototype Sketchpad template with blank iphone screens for you to draw your app in if you are designing a paper prototype for an app.

Tool Overview

1
2
3
4
5
  1. Customer's job-to-be-done

    State here who is your customer and what is the job to be done for this customer? Which job to be done is most relevant to be solved by this app? Copy this information from the Value Proposition Designer.

  2. Customer benefits

    What does the customer get out of it? When will customer will have a big smile on his/her face?

  3. Customer promise

    What part of the customer promise (from the Value Proposition Designer) do you want to prototype with the app? What is your promise to your customer by using the app?

  4. Key features

    What are the key features and functionalities of the app? Maybe the app even works with additional hardware that can be attached to your mobile devise. But focus on the minimum required features, prevent featuritis.

  5. Steps

    What are the minimal steps the customer needs to go through to reach the job to be done and the benefits? Could there be an alternative for a step? What is the experience per step for the customer? Do they really need this step or would it slow them down in reaching the goal in mind?

Step by Step Guide

1 Before you start

Arrange for a comfortable environment. Definitely not a meeting room.

Bring relevant prior material such as experiment canvases, riskiest assumption canvas.

TIP! Make sure that per team at least one of the members (preferably the one most tech savvy) has pop app installed on his or her smartphone (or a similar app) to facilitate turning the prototype into a digital one

Checklist

  • Arrange a relaxed, positive and private environment
  • Have markers (fine tip) and paper for everybody
  • Print or draw the canvas on a big sheet of paper
  • Have plenty of sticky notes and markers ready
  • Allow yourself 90 minutes of undisturbed time

2 Value Proposition

Make sure that all teams have a clear formulated value proposition they want to test. Use the Value Proposition Canvas to do this first. The purpose of the Digital Prototype design sprint is to get the value proposition beyond post-it thinking. Prototyping reveals a lot of energy within the group because ‘it becomes real’, the theoretical exercises / canvases they have been talking about all come together in whatever prototype they are making.

TIP! Doing this exercise with your client in the design session will give you a great advantage. It is a very energetic and powerful exercise but also requires an open mindset, creativity and pro-activity from the participants.

3 Prototype Canvas (20 minutes)

You start on the right side of the canvas! It prevents back engineering your personal convictions to make it fit the customers job to be done. State here who is your customer and what is the job to be done for this customer? Which job to be done is most relevant to be solved by the app? Copy this information from the Value Proposition Canvas.

Next fill in the customer benefits. What does the customer get out of it? When will customer will have a big smile on his/her face?

Fill in the Customer promise. What part of the promise do you want to prototype with this app. What is your promise to your customer by using the app?

What are the key features and functionalities of the app? Maybe the app even works with additional hardware that can be attached to your mobile devise. But focus on the minimum required features, prevent featuritis.

Now you can determine the (minimal) steps the customer needs to go through to reach the job to be done and the benefits. If any, what is the alternative for a step (e.g. sign in by filling in your email address vs upload profile from LinkedIn). Also think through the customer experience per step, e.g. building a secure relationship, set up first level of trust, willingness to involve friends, being overwhelmed (by design, content, etc.), easiness, surprised, happy, etc.?

TIP! At every step, ask yourself: "Why can't we skip this step? Is it really necessary? Can we do it easier, faster, better?"

4 Start sketching screens (45 minutes)

Use the Prototype Sketchpad to start fleshing out screens. Make use of the steps from the prototype canvas to determine the screens needed. Decide on where navigation should be. What is the experience. What is the look and feel. Use as many sketchpads as necessary.

5 Design the final screens (20 minutes)

If you haven't done so already, use the Digital Prototype Screens template to visualize the screens you have defined in the previous step. You will now finalize them. These are the screens you will turn into the clickable version (using the POP app or a similar app).

6 Test with Customers

The only sensible way to test your assumptions is to have your target audience use your app. You get to see an immediate response! How cool is that.

TIP! Make sure you don’t put yourself in 'defense mode'. Just watch, listen and observe. and you’ll get plenty of free feedback that helps you sharpen your value proposition and find better ways to build your final service or product.

7 Additional Tips & Tricks

  • The teams need to have a concept in mind before doing this exercise. otherwise they will loose too much time creating the concept.
  • Make sure you are familiar with the pop app, so download it beforehand in the app store and play around with it.
  • Try to work as much with iphones as the screen formats are sized for iphone. if you are going to use other phones, please go to POP app for different formats.
  • Online you can find many examples, icons, wireframes, buttons, arrows. if you want to facilitate teams have some of those printed so they can be used to cut and paste screens together.
  • If you do not use these templates you can always draw (or print) sketch pads from the website above. please make sure that you stick to the right proportions as used by the app for your type of phone.

8 Next Steps

Checklist

  • Iterate on your design
  • Check the results of your validation with your point of view
  • Update your design criteria

Additional Resources

2 day DBB masterclass by the authors and designers!


October 10/11 2018 at Hotel Zoku Amsterdam