PROTOTYPING? WHY BOTHER?

Updated: May 11

Prototyping is a term that most designers and non-designers alike would be familiar with. Here I explore prototyping for UX, what it is, and why prototyping matters in the design process.


This blogpost is extracted from my recently published booklet (free low res version)

A BRIEF GUIDE TO PROTOTYPING FOR UX





THIS GUIDE COVERS:

  • Prototyping for UX fundamentals.

  • Using prototypes to solve UX problems.

  • The basic principles by which prototypes are generated and tested for their effectiveness.

This blog post is not meant as an in-depth manual, but rather as an indicator of prototyping methodologies, with each section (pointing to an area of further investigation.


TOPICS:

  • WHAT ARE THE BENEFITS OF PROTOTYPING?

  • CREATIVE EXPLORATION AND PROTOTYPING

  • PROTOTYPES AND COLLABORATION

  • ARE PROTOTYPES THE SAME AS WIREFRAMES?

  • PROTOTYPING FOR UX

  • CAN EMOTION BE MEASURED?

  • RAPID PROTOTYPING

  • FIDELITY

  • LOW FIDELITY

  • HIGH FIDELITY

  • SKETCHING BEFORE PROTOTYPING

  • ADDING STRUCTURE TO SKETCHING

  • DIGITAL RAPID PROTOTYPING TOOLS

  • PROTOTYPE TESTING PROCESS

  • FOAM-BOARD SMARTPHONE MOCKUPS


_______________________________________________________


WHAT IS A PROTOTYPE?

The term draws its origin from Greek PROTOTYPES meaning FIRST OF ITS KIND. Most creative processes that eventually lead to the design of commercial products start as:

  • Rough sketches

  • Evolving into more detailed design iterations through user testing

  • Before they became fully-fledged final products


A prototype is a first or pilot version of a design from which other forms are developed. It is a working model of a finished product built to test a concept, and crucially, a process that can be learned from. Its purpose is to emulate not just the functionality of a product but also its look and feel.


“Prototype is a quick, preliminary version of an idea. It can be a draft version that can be thrown together in a flash, or a more finished and detailed version of a proposed solution. The idea is that one can use the prototype to imagine possible futures.”

Runa Sabroe, Project Manager, Danish Design Centre



______________________________________________________


PROTOTYPE EXAMPLES



WHAT DOES A PROTOTYPE DO?

  • It simulates specific aspects of how a product is meant to function.

  • It makes user testing possible before full production can take place.

  • It is an integral part of evidence-based design methodology.


WHAT DOES IT NOT DO?

  • Due to its limited construction, it cannot offer the look and feel of a finished product.


_______________________________________________________



WHAT ARE THE BENEFITS?

SOLVING DESIGN PROBLEMS

Prototypes can be an efficient way to work through design problems before getting deep into costly and time-consuming coding.


EVALUATION OF DESIGN IDEAS

Prototypes are often used to evaluate design ideas – concepts, flows and interactions, before investing in development time.


COMMUNICATE DESIGN IDEAS

Prototypes take ideas out of the designer’s head, onto the page and into a format that feels closer to the real thing, closer to the real user. These may be presented within a company, shared with coders, and used to draw feedback from users.






_______________________________________________________


CREATIVE EXPLORATION AND PROTOTYPING

Prototyping can add a whole new area of creative exploration to design thinking as it gives an early understanding of complex challenges in the design process of problem-solving. It offers:

  • Tangibility, experiencing and testing of results and essential basics of design thinking.

  • Aids ideation

  • It allows users to participate early in the innovation process.


WHO BENEFITS FROM PROTOTYPING?

  • Designers

  • Users

  • Stakeholders


EARLY USER FEEDBACK

Prototypes are the best way to generate early user feedback, essential to effective design. It allows the design team to:

  • Explore and try out design ideas

  • Validate design requirements and assumptions

  • Communicate ideas to cross-disciplinary groups

  • Reduce the high risk and costs of developing ineffective designs.


“Thinking with our hands, or prototyping is a powerful strategy for design thinkers as it can generate better results faster. By actually building an idea (with materials, rather than with only our minds), we quickly learn its limitations and see the many possible directions we can take it. Thus prototyping shouldn’t come at the end of the process but the beginning!”


Tim Brown, CEO of IDEO.com


_______________________________________________________



PROTOTYPES AND COLLABORATION


Prototyping stimulates collaboration more than any other stage in the design process. Collaboration, however, cannot be taken lightly as clear channels of communication must be in place.

Productive discussions are essential. Strategy is all too often set and dictated by discussion leading to prototype production and analysis for its effectiveness. This strategy must address the following questions:


  • Are lines of communication clearly established?

  • Do all members of the design team know their roles?

  • Do prototypes allow the physical testing of the concept?

  • Can a test give accurate and useful user feedback before investing in costly coding?



_______________________________________________________


ARE PROTOTYPES THE SAME AS WIREFRAMES?


Prototypes are something we can hold in our hand - touch, feel and interact with.


Wireframes, also known as visual mockups, show a single state and cannot be considered prototypes.


Because of their static nature, wireframes are not best suited to defining dynamic on-page interactions.


Wireframes can often slow down the design process as they tend to spur burdensome documentation. Creating and annotating detailed wireframes takes time and effort to be better used to iterate and improve designs rather than endlessly specifying them.



_____________________________________________________


PROTOTYPING FOR UX


User Experience is the person's overall experience using a product, such as a website or apps. It’s about how easy or pleasing it is to use a product.


UX asks a simple question:

How does the user feel using a product?

  • Happy to use the product

  • Not sure if the product addresses my needs

  • Unimpressed

  • Not happy to use the product

Prototyping is about finding out as early as possible in the design process if a product triggers a positive emotion. The product relevance to the user, the clarity of content and navigation can lead to positive emotional responses.


CAN EMOTION BE MEASURED?

Andrew Meyer of Stanford University argues that emotion is an inherently complex subject to study. We humans find it difficult to describe how we feel and distinguish between different emotions accurately. It is also difficult to pinpoint the exact cause of the emotion, partially because emotions can change instantly and can be triggered by a variety of unrelated factors. In an attempt to meet these challenges, researchers have created many different emotion measurement tools such as psychological, verbal or non-verbal.



_______________________________________________________


RAPID PROTOTYPING


Rapid prototyping doesn’t refer to any specific tools used in the prototyping process. It is a design methodology that facilitates fast prototype generation, reliable testing and quality iterations based on prototype testing outcomes.


With rapid prototyping, designers can build UX earlier in a product’s lifecycle as they can now receive more reliable feedback following prototype testing.


The traditional pen & paper, with scalpel and masking tape added to the mix, is a great way to start the process and explore initial ideas.

The below screen shows a typical high-fidelity digital desktop-based tool for rapid prototyping of mobile, web and desktop apps.


Most of the digital tools will facilitate interactions by simple drag-and-drop, with various useful collaboration features.


Designers tend to use both toolsets. Which of the two will be more prevalent in a designer’s toolbox is a matter of personal preference.


_______________________________________________________


FIDELITY

Fidelity refers to the level of visual detail within a prototype. At their outset, prototypes usually start as rough sketches before they are rendered into more polished versions.



LOW fidelity

Just a rough sketch outlining the content and basic navigation


MEDIUM

It will have some refinement to it compared to Low Fidelity.


HIGH fidelity

The visuals very closely resemble the final product.


_______________________________________________________


LOW FIDELITY


PROS:

  • FAST - instant capture of ideas

  • INEXPENSIVE - all that’s needed is pen & paper, and sometimes a little glue or masking tape

  • Technical skills not essential

  • UNIVERSAL - an