Rapid Prototyping
— Jeremy Jackson Lead Technologist
Prototyping: The Wright Way to Fail
Fearing failure stifles creativity and progress. Instead, embrace failure and learn from it early on. Rapid prototyping can help you do just that.
Lo o k f o r F ai lu re an d Ite ra te f ro m P ro to ty p es Embracing Failure
On the morning of December 17, 1903, Orville and Wilbur Wright eyed another chance at getting their flying machine off the ground. The brothers and five other men humped their 600-pound machine over a quarter mile uphill and placed it on a 60-foot monorail. They had done the same thing three days earlier but crashed, breaking several parts in their flying prototype.
This day was different. Undeterred by their failure a mere 72 hours ago, the flying machine made its way down the monorail and picked up speed. Wilbur ran along the side of the plane, steadying the wing. As the machine left the ground, a camera shutter opened, capturing one of the most inspiring moments in human history. Twelve seconds and 120 feet later, what was previously impossible was now a reality.
That day, the Wright brothers finally arrived at an ultimate suc- cess, but the path was filled with disappointing detours and a daunting string of failures. Innovation and failure go hand in hand.
Fearing failure stifles creativity and progress. If you’re not failing, you’re not going to innovate. Do your product or service a favor: embrace failure and blueprint a plan that affords you the oppor- tunity to do it early and often. Rapid prototyping can help you do just that.
01 02 03 04 05
01
Communicate ideas more clearly with prototyping
02
Low fidelity prototypes, such as pen and paper sketches, help get ideas across
03
Prototyping, like design, is a cyclical and iterative process. Test and refine the prototype
04
Look for weaknesses and remedy failures early on
05
Iteration of the process leads to a successful, innovative solution
Get Your Point Across
Let’s face it: in the world of interface design, image exports and slide decks are not the most effective way to convey an idea. Even for a system with just a modest amount of complexity, static visual renderings represent a decidedly small sampling of the entire solution. Instead, adapting the design process to include rapid prototyping will not only help communicate your ideas, but allow you to harness one of the virtues of creating something truly innovative: failure.
Rapid prototyping is the process of quickly building the main feature paths of an interface. One of the largest benefits of prototypes is that they provide an easy way to get your idea in front of potential end-users and key client stakeholders. Getting the idea out of the designer’s head and into a demonstrable format is an effective process for eliminating initial short-comings and misplaced design assumptions.
In tandem with design explorations, rapid prototyping is a cyclical and iterative process. The basic cycle allows for testing and refinement of the product or service early and often: ideate, prototype, test, analyze, refine, and repeat. The key under- standing in adapting a design process into an iterative one is that failure must be expected and embraced. This process also creates opportunity to remedy those failures early on – and more efficiently.
The Good News
Prototyping can occur at any phase in the design process and doesn’t necessarily require specialized development knowledge. Deciding what and how to prototype depends on what the product or service’s needs are, the questions to be answered, and the level of technical resources available. That said, effective results can be garnered from various levels of fidelity level that can be chosen to prototype in.
Low-Fidelity Prototyping
Starting the prototyping process at the pencil and paper level is the least expensive and fastest way to visualize and iterate on design ideas. It requires no specialized technical knowledge, but allows for translation of an idea out of a designer’s head and into the physical world almost immediately.
Good low-fidelity prototypes can be far more valuable for conveying interfaces than simply showing general content placement and page structure. Hand drawn screens can be very effective for communicating page flow and missing UI elements.
When designing the NCAA March Madness On Demand iPhone app, Method designers used a series of simple interface sketches to create an application walk-through. These sketches were then imported to a slide deck in Keynote, which provided a clear demonstration of important parts of the system screen flow to key stakeholders. Failures in the form of missing states, and interface elements were uncovered and easily remedied during this process.
“I have not failed,
I’ve just found
10,000 ways that
won’
t work”
— Thomas Edison
Inventor
Medium-Fidelity Prototyping
Often executed as wireframes, medium-fidelity prototypes are intended to highlight only the most macro-aesthetic details of an interface’s content and design. Usually executed in black and white or grayscale only, prototyping at this level can provide meaningful insights on the information architecture, screen flows, and high-level interaction points. Additionally, when showing a working wireframe prototype to an end-user or stakeholder, a design team can effectively evaluate how efficiently the design allows users to achieve their goals.
Medium-fidelity prototyping can be effective in conveying a visual representation of an idea to stakeholders in the very early stages of the product lifecycle. When creating prototypes at this level, know exactly what you want to test. Then, develop just enough interface detail to gather meaningful results, which will inform necessary refinements.
Perhaps the most beneficial aspect of prototyping at this level is that it provides a quick entry point to baseline user-testing. We recently used a wireframe-level prototype at Method to validate navigation structures and taxonomy for a very brand-centric e-commerce system. With just a few hours of commit- ment, we were able to gather meaningful data from real users. Medium-fidelity prototypes are perfect for high-level testing in areas such as navigational elements, screen flows and basic content presentation.
High-Fidelity Prototyping
High-fidelity prototypes are intended to portray the end-vision for the interface and usually include realistic content, refined interactions, transitions, and animated effects. Prototyping in high-fidelity is clearly the most time consuming way to proto- type, but goes a long way in usability testing and design presentations.
Because they show design directions as well as the interactive interface experience, high-fidelity prototypes have an important role in defining a vision for a product or service that executives can clearly visualize.
Working prototypes with a high level of finish can easily be mistaken for the final product. When creating the prototype, resist the urge to pack in as many features as possible. Remain focused and ensure that the general idea for your product is being clearly conveyed. Gear your efforts toward the most used features. Try to demonstrate one third of the interface, at most. High-fidelity prototypes can take a variety of forms. They can be coded as working HTML, CSS and Javascript interfaces, or they can manifest themselves as non-interactive motion studies. Choose the technique that best tells your solution’s story and allows to you test any weaknesses in the system.
Thumbplay, a cloud-based streaming music service, partnered with Method to design their next generation app for web-enabled televisions. Working in close collaboration, Method’s designers and technologists create a fully animated, true-to-life prototype which allowed exploration of key service features and history states. The prototype was easily shared and demon- strated through a web browser, which was used for user testing and for Thumbplay’s stakeholders to see the service come to life. This demonstration proved instrumental in validating a number of visual and user experience design decisions that were made throughout the design process, and in creating a successful service.
Factors to consider when prototyping
01 02 03
Be selective. Don’t prototype every feature. In most systems, focusing your prototypes on the 20-30% of the application where the user will spend the majority of the time is generally sufficient to thoroughly test your idea.
Rapid prototyping should be, well, rapid. Work quickly and don’t necessarily worry about getting everything just exactly perfect. The faster you can express your ideas, the more time you’ll have to identify failures and rework them.
Prototypes don’t need to live on.
Don’t waste time creating production-level code. The goal is to express an idea, no more. Ideally, not all of the ideas you test will work. That’s the point. Prototyping gives you the opportunity to validate the good ideas and move on quickly from the bad ones.
Maintain Focus
Successful prototyping requires restraint and a deep under- standing of the requirements, technical specifications, and how to process feedback. Core to this is an acknowledgement that, in order to be nimble, prototypes often only need to focus on the portions of the interface where the user will spend the majority of their time. It must be accepted that the prototype will not be exact or perfect because it is not the end product. The prototype is simply the expression of an idea and the means by which to test and validate that idea.
A technical understanding of the system’s limitations is critical to creating a successful product. While the desktop or mobile browser is a really great way to show prototypes, it does not always reflect the reality of the end platform the product was intended and designed for. If a product prototype is for a web enabled TV or set-top box software, the limitations of the product’s platform must not be forgotten. A mobile browser’s processing capabilities may be superior to today’s web-TV or set-top box, and therefore not an accurate system to prototype on.
Once a successful prototype has been created, the compelling process to evolving the product or service can begin. At this point, the idea can be tested, quickly allowing for bad ideas to be killed off and the good ideas to be iterated on. It’s natural selection for interface design. Feedback must be interpreted and implemented with precision and focus. Not all feedback is good. Like any design presentation, seeking feedback on a
prototype is best kept in small groups. As feedback comes in, the scope of the project must be monitored to maintain focus on parsing the feedback within the areas that were set out to test. Creating something innovative is indeed a risky undertaking. To do it, you have to crash often before you are able to fly. Famed inventor of the Dyson vacuum, James Dyson crashed frequently over the 15 years it took for him to craft 5,127 prototypes of his bagless vacuum cleaner. Although he eventually got it right, there was no singular defining “ah-ha” moment.
Dyson’s is an extreme example to be sure, but his feelings on failure ring true to any healthy, iterative design process: “On the road to invention, failures are just problems that have yet
to be solved.”1 Rather than shy away from failure, prototype and use what you learn to your product’s advantage.
the opportunity to remedy them.”
1
No Innovator’s Dilemma Here: In Praise of Failure
by James Dyson http://www.wired.com/epicenter/2011/04/in-praise-of-failure
Int er p re t F ee db ac k and V al id at e Id ea s
Cable’s Lost Generation Unlocking the Infinite Library Entertain Me Now
Place, Space and the Mobile Interface
Mind the Gap
Parenting 101
The Consumer as King(pin) Wrap It, Pack It, and Stack It Power to the People Welcome to the Metaverse
About the Author
need text
About 10x10
2010 marks Method’s 10 year anniver-sary, and we are only looking forward. Written by our own industry leaders, we are launching the 10x10 series, which will focus on game changing topics that will fundamentally impact today’s brands and their search for new revenue streams.
1 2 3 4 5 6 7 8 9 10 This is the Tenth Issue
next
M
or
e to
com
e
Brands as Patter ns Lead TechnologistAbout the Author
Jeremy is a Lead Technologist at Method. His areas of expertise are in front-end tech- nologies, where he crafts lean, accessible, and refined custom interfaces. With nearly a decade of experience, he has created many prototypes and successful products for a variety of brands, most recently for Comcast and Time Warner Cable.
About 10x10
2010 marks Method’s 10 year anniversary, and we are only looking forward. Written by our own industry leaders, we are launching the 10x10 series, which will focus on game- changing topics that will fundamentally impact today’s brands and their search for new revenue streams.
10
1 2 3 4 5 6 7 8 9 10 11Cable’s Lost Generation Unlocking the Infinite Library Entertain Me Now
Place, Space and the Mobile Interface Gaming for Behavior Change
Changing Retail Currency Let’s Get Physical (with Services)
Innovation: Wrapped, Packed and Stacked What’s So Funny About Innovation?
Rapid Prototyping
Z Y
X
Method
Method is a brand experience agency with offices based in San Francisco, New York and London. Our clients are best described as owners of progressive, era-defining brands, and include Google, Comcast, Nordstrom, Sony, Samsung, Nokia, Microsoft, Time Warner, Intel, and BBC. Collaboratively, we help them create products, services and businesses that are smart, beautiful and extendable.
For more information visit www.method.com.
Locations San Francisco New York London Contact Lindsay Liu Marketing Manager [email protected] 646.825.5242
