This week, my team began prototyping our app idea. But before doing that, we had some decisions to make regarding what materilas we’re using and who should have what roles.

What kind of prototype do you need?

When it comes to prototyping, there are 3 different types that you can create and each has a couple of subtypes. In the book The Sprint Handbook, Hastings goes into each one and explains what each type of prototype is best for and includes examples.

Physical Product Prototypes, which include proof-of-concept, form study, functional and manufactured prototypes.

Digital Product Prototypes such as wireframes, mockups, clickable and functional prototypes.

Service-Based Product Prototypes, like Role-Playing or Skits, Service Blueprints, Business Model Blueprints, and Minimum Viable Service prototypes.

For my team’s prototype, we are using a digital based prototype, and we decided to begin with wireframing.

Pick the right tools

This step is crucial to your prototyping process, as you finally get to choose which tools your team uses. There are all kinds of different ways to prototype, and it depends on what your end product is. For example, if you need a physical object, you could use paper or 3D printing to create it.

Since my team is designing an app, we need digitally based tools. The one we ended up using for the wireframing was Canva.

What is wireframing?

Wireframing is the skeleton of your app. It has just enough detail for your developers to know how to layout the app or website. However, there are no specific details besides the text. Where images are, there are just blocks meant to be filled in; if there’s a button, it’s just another greyed out block with some text. Within the wireframe, you can leave notes for the developers about where certain pages should be linked.

Creating a wireframe

The wireframe should be based on the storyboard that your team created for the final product, and should answer all of the sprint questions. 

For my specific wireframe, my team met and predetermined which pages should be expanded based on our sprint questions. I worked closely with our illustrator to discuss which kind of graphics and images we need for the final prototype based on the wireframe.

Using Canva for this process was interesting, as they have a prototyping feature on their site. I was able to choose a smartphone (since our prototype is an app) to plug the wireframe into. Doing this allows me to see what the user would see if they downloaded the app, and to understand the basic layout.

Canva also has user-generated templates available, some of which you have to pay for. But since most were color-based and had specific content already produced in them, they were just used for inspiration.

In conclusion, wireframing helps your prototyping process by bringing forth a tangible idea. Your team is able to see how their ideas are coming together in real-time and eventually are able to interact with it.