Clickable Prototypes

What you have so far:

- A name
- A short explanation of your app
- A list of the problems your users are trying to solve
- Your reason for doing this
- A list of users that we will target
- A persona (based on user needs) for our first set of users
- A user journey map for our first users
- A list of assumptions and ways to de-risk those assumptions
- A short description of your MRP
- Feature Sets (v1, v2, icebox)
- A list of your competitors
- A list of keywords and searches your customers might use
- A chart showing which problems your competitors solve and how well they solve them
- A list of table stakes jobs
- Your USP 
- A list of User Groups
- A list of User Stories  (v1, v2, icebox)
- A list and screenshots of inspiration sites, screens and features (with notes)
- A list of all the pages/screens for your app
- A list of all the functionality that is required on each screen with importance values

Objectives

• have a clickable prototype that’s ready for testing with real users

Tasks

1. Add your sketch or figma document to InVision
2. Add the proper transitions for each button to make a working prototype.
3. Make a list of all additional screens that are required to have the prototype show benefit to the end user, and create those screens.

Tasks with Instructions

1. Add your Sketch document to InVision

We’ll use InVision to turn our mock-up into a clickable prototype.

Sign up for invision. Create a new project and upload your sketch document.

2. Add the proper transitions for each button to make a working prototype.

Hover over one of your screens and click on “view screen”.

Press B to enter build mode.

Create a box around any area that is actionable. Usually for the first few screens (on boarding) you will want to just make the whole screen actionable.

Link to: Select the next screen Gesture : I like to stick to “tap” to make it easy for the user Transition: for onboarding, use slide left.

Continue through your entire app, adding all actionable elements as buttons.

3. Make a list of all additional screens that are required to have the prototype show benefit to the end user.

Once you are done adding the actionable elements, run through the prototype. Is it obvious what to do at each step?

Is the benefit for the end user tangible? Remember, we want to use this to test with real users and get real feedback. So we need to have information and content that provides that value, so that we can get real feedback.

There are usually a few additional screens that would help demonstrate this value to our test users. Think about those additional screens, and go back and create them, and add them to the prototype.

Output

• Clickable prototype