Professional Documents
Culture Documents
Prototying Quick Introduction 2012
Prototying Quick Introduction 2012
DATE: 05/11/12
Regardless of its scope and fidelity to a final product, your prototype is an opportunity to
increase confidence in your concept and reduce its market risk. An oft-heard aphorism among
innovators is to fail cheaply and fail quickly so you can accelerate your development process
toward a usable product. Prototypes enable you to do that.
PROTOTYPING BASICS
Prototyping is an iterative process. A single prototype is not likely to carry you from concept
inception to execution. Rather, youre more likely to make and employ a series of prototypes that
help you evolve your concept.
Arar Han (MBA 09) and Haim Mendelson, The Kleiner Perkins Caufield & Byers Professor of Electronic Business
and Commerce, and Management, prepared this case as the basis for class discussion rather than to illustrate either
effective or ineffective handling of an administrative situation.
Copyright 2012 by the Board of Trustees of the Leland Stanford Junior University. Publically available cases are
distributed through Harvard Business Publishing at hbsp.harvard.edu and European Case Clearing House at
ecch.com, please contact them to order copies and request permission to reproduce materials. No part of this
publication may be reproduced, stored in a retrieval system, used in a spreadsheet, or transmitted in any form or by
any means electronic, mechanical, photocopying, recording, or otherwise without the permission of the
Stanford Graduate School of Business. Every effort has been made to respect copyright and to contact copyright
holders as appropriate. If you are a copyright holder and have concerns, please contact the Case Writing Office at
cwo@gsb.stanford.edu or write to Case Writing Office, Stanford Graduate School of Business, Knight Management
Center, 655 Knight Way, Stanford University, Stanford, CA 94305-5015.
p. 2
Scope: Prototypes range from full-featured representations to those that are homed in on one
or a few features.
Resolution: They can be very detailed, like a high-resolution photograph, or crude and rough
like a grainy print.
Risk Factor: Some prototypes test technical risks endemic to the product. Some help
mitigate market risk, or the possibility of rejection by the target user base.
Rapid Prototyping
Many development organizations practice what is called rapid prototyping.iii While the
particulars vary, all allow you to test, clarify, and evaluate an early version of your product
concept quickly and at low cost. Thus, they enable you to determine, before you committed
substantial human, financial and emotional resources, that you may have a solution to a problem
thats worth solving. Most also share the following features:
p. 3
Broad scope and low resolution: Early, or rapid, prototypes tend to go broad but not deep.
Market validation: They often focus on whether your product creates value for its intended
users rather that working out its technical challenges.
Quick and cheap: Development organizations are constrained by time and money. So
crucially, early prototypes are made with little time and preferably with very few resources.
p. 4
For the first iteration of her prototype, Dysert was primarily interested in developing a reusable
replacement for the mopping pad only. She used a piece of terry cloth attached to a larger piece
of fabric that would hold the terry cloth in place (Exhibit 1).
Dysert then tested this prototype on her own floors and machine washed it. She was dissatisfied
with its cleaning performance, yet pleased with its durability in the wash. As noted in her blog
post about the experience: After I finished this and the experiment, I had another brilliant idea
for the scrubby... back to the drawing board for some minor adjustments!v
The brilliant idea was to improve the performance of the mopping pad by combining it with
her popular existing reusable dry sweeping sheets. The final product, as shown in Exhibit 2, has
a terry cloth cleaning surface on one side, and a dry sweeping sheet on the other side. Between
the two sides is a crucial layer of batting that bolsters both surfaces. Users can sweep with the
dry side, then flip over the reusable pad to the wet side to wash their floors.
DetroitKnitter operates a small Etsy shop with an admirable zest for iterating her prototypes. If at
first you dont succeed, go back to the drawing board with your lessons from testing.
Would You Name Your own Price? Priceline
Priceline, one of todays leading global online travel agencies, became well known for its opaque
Name-Your-Own-Price (NYOP) concept wherein a buyer specifies a price for a desired
service (e.g., air travel, hotel stay, or car rental) for a given day and asks sellers to match that
combination. NYOP is opaque because the buyer does not know the name of the service provider
(airline, hotel or car rental company) nor the detailed schedule until after he or she has already
made the nonrefundable purchase.
For an airline ticket purchase, for example, NYOP was designed as follows:vi
1. The customer logs on to Priceline.com.
2. The customer provides his or her email address.
3. The customer enters the requested flight origin and destination airports.
4. The customer enters the travel dates.
5. The customer enters the price her or she is willing to pay for a ticket. This is a firm bid.
6. The customer enters his or her credit card information and pre-authorizes payment.
7. Priceline displays the probability that the bid will be accepted.
8. Priceline has three days to find a qualifying fight.
9. If Priceline does not find a qualifying flight, the bid is rejected.
10. If Priceline finds a qualifying flight, Priceline buys a non-refundable ticket, charging it to the
customers credit card.
11. The customer is notified and receives an airline ticket.
The idea was interesting and novel. If it worked, it would create value for both consumers
looking for deals and travel suppliers with excess inventory. Its success, however, was far from
certain. A few airline partners had already signed on to provide flights, but a central question
remained:
p. 5
Start Building. Even if youre not sure where exactly you are going, the act of building a
prototype will get you going. If you do know where you want to go, identify key
uncertainties and try to resolve them through testing.
Build with the user in mind. What do you hope to test with the user? What sorts of behaviors
do you expect? Answering these questions will help focus on key issues and help you receive
meaningful feedback in the testing phase.
Dont spend too much time and resources on one prototype.
Treat your prototype as a disposable model. Move on before you find yourself getting
emotionally attached to it.
Its OK if you dont know what exactly youre looking for. Early on, hardly anyone does. Youre
looking to fill in your blind spots, so keep an open mind and listen to what your tests tell you.
Thats the beauty of prototyping.
Using Wireframes: RippleQ
RippleQ is a social learning platform that companies and other organizations can use to foster
long-term training initiatives and reinforce cultural behaviors. Users within organizations that
use RippleQ have profile pages that are structurally similar to Facebook profile pages.
p. 6
Founder Lloyd Nimetz (Stanford MBA 08) first prototyped RippleQ by creating a sketch of the
first page users would see after logging in. Exhibit 3 shows an early prototype. After Nimetz had
iterated through many sketches, he wanted to create a more polished prototype that could be
shown to potential advisors and investors. He first used PowerPoint (Exhibit 4), then switched to
Balsamiq (Exhibit 5), a user-friendly wireframing tool that allowed him to create a more
sophisticated version of his PowerPoint prototype (also see Appendix A).
As Nimetz iterated from prototype to prototype, he was able to refine his audience. Early on, he
targeted individuals that wanted to track socially good behaviors like recycling, carpooling, and
other earth-friendly acts. Visualizing his concept in the form of a more detailed, PowerPoint
prototype allowed Nimetz to seek the advice of advisors, who challenged him to structure his
business around organizations, rather than individuals. This required multiple linked pages and
the ability for Nimetz to collaborate with his new partner both of which Balsamiq easily
provided.
You dont have to use the most full-functioned wireframing tool from the start. As Nimetzs
experience shows, starting with a rudimentary form of prototyping and moving towards greater
functionality can allow your prototypes to mature along with your concept and your intended
market.
LATER PROTOTYPES
Early prototypes are usually quick and dirty, designed to test the marketability of a product
concept and to elicit key issues. Later prototypes respond to and incorporate the feedback
gathered from earlier prototypes. They often examine specific aspects of the product and use
more intricate tools than early prototypes do. These prototypes generally fall into one of four
buckets:
1. Technical: A prototype testing a technical issue tends to be narrow in scope and high
resolution. They might take longer to develop, and require more resources to execute.
2. Work flow or integration: Some later prototypes are as broad in scope as the initial
prototype, but tend to go deeper into how the specific functions work together. This can help
plan future development of the product.
3. Layouts, displays, and placement: Another later prototype can be as broad in scope as the
first prototype, going deeper on the physical or visual placement of the products features and
parts.
4. Difficult, controversial, and critical parts: In the interest of reducing uncertainty and
raising the odds of success, a prototype in this bin would extract certain key aspects that can
derail a product in the marketplace.
Any of these prototypes might take the form of a looks-like or works-like type.ix Looks-like
prototypes have the appearance of a final product but do not perform its essential functions. One
example is a sports car that cannot run but approximates the visual appearance in order to test
customer feedback on the cars aerodynamics. Works-like prototypes have the essential functions
but do not have the appearance of the final product. An example of this is an online workflow
simulation of a factory line management system.
p. 7
And Beyond
Theres a place further down in the development process for other comprehensive prototypes
perhaps ones with more complexity and depth than your initial prototype. Such prototypes can
expose unrelated and incidental problems, and restructure task dependencies. They can allow
teams to reconceptualize and streamline, or optimize the work flow.
In all your prototyping endeavors, remember that prototypes early, later, and beyond help
you figure out what you dont know so you can increase your products odds of success in the
market. As Carolyn Snyder, author of Paper Prototyping reminds us: Its not the rattlesnake
you see that will bite you. Its inherently difficult to know where your own blind spots are
testing helps you find them.x
p. 8
Exhibit 1
Prototype of Dyserts Washable Swiffer Mopping Pad
Exhibit 2
Dyserts Final Double-Sided Swiffer Pad
Source: 3 Swiffer-Style Pads Double Sided, DetroitKnitter Etsy Shop <http://www.etsy.com/listing/70003325/2reusable-wet-jet-style-pads-tan-scroll?ref=pr_shop > (accessed July 16, 2011). Used with permission.
p. 9
Exhibit 3
RippleQ Sketch Prototype
Exhibit 4
RippleQ PowerPoint Prototype
p. 10
Exhibit 5
RippleQ Balsamiq Prototype
p. 11
Appendix A
Wireframing Made Simple
The advent of web- and smartphone-based applications and services has spurred rapid
development in powerful, yet simple-to-use wireframing tools. Below is a sampling of tools you
may find useful, and a brief description of how they are used.
Microsoft PowerPoint and Apple Keynote: Both are primarily used for presentations, but they
can be repurposed to create wireframes. They dont offer the customized functionality that
wireframing software does, so it could be tedious to use these to wireframe. But on the upside,
they are easy to use, you are most likely familiar with them already, and theyll do if you dont
need to get very detailed.
Balsamiq is useful for prototyping websites as well as smartphone and tablet applications. It
allows teams of users to quickly iterate through prototype versions. You may download a oneweek free trial version at http://builds.balsamiq.com/b/mockups-web-demo/ and quickly learn
how to use it by following the video tutorials at http://www.youtube.com/user/Balsamiq.
Balsamiq is widely used among both professionals and amateurs. Another tool, Napkee, enables
you to quickly convert your Balsamiq mockups into functional websites. A disadvantage of
Balsamiq is that it needs to be installed on your PC (a web-based version is in beta). An
alternative web-based tool is Mockingbird <https://gomockingbird.com/>.
If you wish to develop an application for Apples iOS, you may consider the following:
Mockabilly (iPhone): lite version is free; full version available for purchase. For all users.
MockApp (iPhone and iPad): free to those who help publicize it (honor system). For all
users.
Blueprint (iPhone and iPad): $15. Visit http://www.groosoft.com/2010/12/blueprint-videotutorial.html for video tutorials. For all users.
OmniGraffle (Mac and iPad): Mac version is $100; iPad version is $50. For advanced users.
An important caveat on the use of mockup tools is that while the appearance and functionality of
individual web pages are important, the way the user progresses from one to another (called the
user flow) is even more important. Thus, before creating mockups of individual pages or screens,
it is useful to build a flow diagram of the application that shows how the user goes from one
screen to the next to perform a given task. The next step is to identify the most important screens
and to create mockups of those.
p. 12