Prototype

Overview of Prototype

The core purpose of the prototype, the assumptions you are trying to validate/invalidate or the knowledge gaps you are trying to fill should have all been discussed in Converge. During this phase you will build a quick and dirty prototype. Since you only have at most a day to build the prototype it should be as low-fi as you can get away with during Testing.

During this phase roles shift. Designers are typically the ones building the prototype unless it is low-fi enough for everyone to contribute (see: Keynote or Paper Prototype). Product Owners should be in charge of getting realistic information, data and copy into the prototype. It should be clear what everyone's role is before the phase starts. The team should check in with each other as much as possible to make sure everything is on the right track.

• Have a mindset of "Yes and"
• Constantly ask “How might we?”

Tools:

InVision (Recommended)

Invision is really great for being able to take mockups from Photoshop or Sketch and allow for users to click through to different states or pages. Invision allows for you to create a simple image map for your users. Because it takes mockups it allows for you to create designs that look more visually appealing or visually complete.

HTML & CSS

HTML & CSS prototypes tend to be the most time consuming but are best for heavier web interactions like filling out forms. Use Middleman Template for a starting point and quickly host on Netlify.

Paper Prototype

Paper prototyping is as low-fi as you can get for a prototype. It is especially useful when you are under a time crunch to produce a prototype. It also allows for the whole team to contribute. Because the prototype is sketches on paper you are relying much more on the imagination of the participant. It gives you the ability to prototype on the fly, even during the session with the participant. Tools like Marvel and POP can help present sketches on a mobile device or in the browser so that it seems more real.