Build your first Browser Extension

Second meeting - Prototype your idea

Introduction

This is the second activity for building a browser extension. Do you want to start from the beggining? Check out the first activity which will introduce you to browser extensions and idea generation.

In this meeting/activity participants will learn all about paper prototyping, a technique for communicating and sharing an idea early on by making it real and testing it early with your users.

This activity is inspired by the Paper prototype guide on Mozilla's Open Innovation Toolkit.

Getting ready

project name

Share a slide presentation

Use the following slide deck as is, or customize it to make it your own. We have included the information we think you will need to lead this activity with your club.

After you customize the slidedeck, use it during your Club's meeting to introduce your members to prototyping their ideas.

Prototyping ideas slidedeck

Plan - 5'

During the last meeting, your group identified an idea for building a browser add-on and submitted it for feedback on GitHub.

Now it's time to start to flesh out your add-on's product experience Within your group, ask the following questions:

  • What interactions would the user need to have with this add-on? Where does your product end and real life begin?
  • What are your assumptions about this? What questions do you have?

A paper prototype can help shape an idea, and it can also be a great way to test these early questions about how to design a product. Think about what you want to accomplish with your product before you start creating the prototype. Select one scenario that can help you achieve this goal and a few key tasks to focus on further developing the prototype.

Create - 35'

Use the paper and pen to draw out each interaction screen for the tasks/scenario you have chosen. If small things change, use cut outs to be able to move small changes in place. Continue to walk through your prototype until it makes sense to you and your team. Then, test these drawings with users. You can either present your paper prototype as is or you can make it easier to share by incorporating it with links in programs like invision or pop.

Share and Test your prototype - 10'

Congratulations! You are now ready to reap the benefits of early prototyping.

You can use your new prototype to test your solution with real users. Doing so will help you gain buy-in and understanding from relevant stakeholders.

  1. Spend two minutes to pair the groups together. Each group should randomly pair with another one
  2. Each group has 5’ to present its idea, gather feedback, and test their prototype with the other group

Review the feedback you received from the other teams and update/adjust your prototypes if necessary.

Update your proposal - 10'

We invite you to upload all of your digital resources (photos, files) into your idea submission on GitHub.

This way, all of your fellow Open Source Clubs and experts will be able to track your progress and see the amazing work you are doing!

You are now ready to take the next step and start building your browser add-on! Ask your Club Captain when the next meeting will be.

Update your idea on GitHub