At our fifth workshop in the NYC BigApps Ideation & Prototyping workshop series, we focused on deepening participants’ understanding of the prototyping process and why it is so important for design.
One of the biggest tips that designers Allie Mahler and Scott Weiss of Community x Design shared is that you can literally prototype anything, and that prototyping is a mindset to be leveraged throughout the entire design process. To prove that, we kicked off the workshop by asking participants to create a prototype that represents their life story or something important to them. In under 5 minutes, we saw elaborate play-doh models, string diagrams, and even a pop-up construction paper diagram. The whole point of the exercise was to get everyone thinking with their hands.
BUILDING TO THINK
Prototyping is one of the most important parts of the design process, as it allows us to show instead of tell. By creating even a rough version of a concept, we give people the ability to respond and react to what we put in front of them, giving us more information about what might work (and what might not work) when it comes to our target users. The prototyping stage always starts with a question or assumption that we would like to test.
For example, “Is a mobile app interface the best way for immigrants in NYC to communicate with each other?”. The next step would be for us to figure out what we can easily create to test this. In this example, we might draw out a quick wireframe of the app on paper and show it to a variety of people (immigrants and non-immigrants). We may immediately get feedback that instead of a mobile app interface, potential users would prefer to simply text message each other. This would be a clue for us that an app interface may not be the direction in which we want to go.
The above example points to why it is so important to rapidly prototype early in the product development process. Instead of creating a whole mobile app interface and investing in design, coding, and building before testing, prototyping allows us to quickly learn how users will respond and allow us to iterate long before putting something into the market. This highlights all three of our prototyping objectives mentioned in the diagram above – we built to think, learned fast by failing early, and explored behaviors of our users to understand how they communicate.
METHODS OF PROTOTYPING
There are several different methods or ways to prototype, especially at the early stages. The following are examples of ways to prototype quickly:
- Create a Model – build an example with legos, play-doh, or other art supplies to show what your concept might look like
- Role Play – have your team (or your users) role play an interaction to see how a user would respond to a specific scenario
- Storyboarding – write and draw out the story of how a user would interact with your product, app, or service. Create a new “window” or “story” for each interaction point
- Paper Prototypes – exactly how it sounds! Use paper to create or build out the concept
- Sketching – sketch out or wireframe your concept to show to your users
- Digital Wireframing – using an app like Marvel or InVision, you can create a medium to high-fi wireframe of your concept (take a look at our Tools section below for more ideas)
So many more methods!
THE FIVE STAGES OF PROTOTYPING
One of the important parts of prototyping is knowing when to use it as part of the design process. We recommend looking at these 5 different stages (diagram below) to know when to prototype. The prototyping we focused on in this workshop was Rapid Prototyping, which is about “building to learn” and helps us answer a question or multiple questions. In the next set of workshops, we will explore Live Prototyping with Users as well as Technical Prototyping, which will help determine what features are feasible and desirable for potential users. The Live Pilot stage is something that we will explore as a part of the civic accelerator program, which will kick-off after the BigApps competition.
WORKSHOP MATERIALS & PROTOTYPING TOOLS
Join us at the next workshop on Usability Testing on Wednesday, April 5! REGISTER HERE.
At this point in the product development process, we’ll learn the tools necessary to test our prototypes with our target users. We’ll go over best practices in usability testing, and outline the process for creating user journeys. This is the second to last workshop in our series, and it will lay the foundation for live prototype testing with youth, seniors, and immigrants at our final workshop on April 19.
We will continue to open source all of the materials from our workshops on this blog, so make sure to check back for new materials and tools.
- Check out our worksheets from this workshop on a Mash-Up Exercise, Prototyping Methods, and Determining What to Prototype
- Read more about prototyping in HBR’s The Future of Prototyping is Now Live
- Explore prototyping and wireframing tools: InVision App, Marvel, Ionic Framework, and Bootstrap.
- Build a landing page to test your prototype with Unbounce
- Use Keynote to animate an interactive prototype
- Survey users with SurveyMonkey or Typeform