The concept of prototype in digital service and product design

How to select the right type and prototype effectively?

The word prototype comes from Greek prototypon and means a first, original or primitive form (Prototype, UXL Encyclopedia of Science). If you have ever been involved in service or product design, you may be familiar with the concept of a prototype. In the world of user-centred design, user experience and design thinking, prototyping is a very common practice. However, you may have also noticed that the concept is quite vague and may mean different things to different stakeholders in different situations. If you are a UX/UI designer or user researcher, you may have found your colleague developers or clients understand it in a different way at different stages of the process.

In my work as a user researcher, I need to be clear what it means to be able to use it in my research activities. In user-centred service or product design and development, user research, design and development are interrelated with each other and being precise and clear about the term we use is crucial to effective and fruitful collaboration and communication.

When talking about prototypes, probably the most often heard terms are “low-fidelity prototype” and “high-fidelity prototype”. However, it is best to define this term in a more systematic way to be able to select the right type of prototype. In this text I will present the definition of the prototype and then different types of prototypes, as well as focusing on the process of prototyping: how to select the right type, who should be involved in this activity and how practically to do it.

1. Definition of prototype

A prototype is a representation of a solution or idea, regardless of the medium. Prototyping is a ubiquitous and inherent aspect of the iterative, user-centred design process. There are several different taxonomies of prototypes:

• Different types of prototypes, grouped by what they represent or focus on — prototypes that model implementation considerations; prototypes that represent the role a system will play in the user’s life; prototypes that consider look and feel, and finally integration prototypes that consider all these aspects (Houde and Hill 1997);
• The spectrum of prototypes categorised by the level of their fidelity — from low fidelity to high fidelity prototypes; sometimes this categorisation refers to the technique used to create the prototype (sketch, wireframes, mockups and detailed prototypes);
• Prototypes differentiated on the basis of their purpose: research-driven prototypes, production-driven prototypes and provocation-driven prototypes (Ruecker 2015).

2. Selecting focus

Selecting the focus of the prototype can be the first step when considering creating prototypes for a product or system, as “Prototypes provide the means for examining design problems and evaluating solutions. Selecting the focus of a prototype is the art of identifying the most important open design questions” (Houde and Hill 1997:368).

There may be four main focuses:

• Implementation. This focus is used when the question is how to implement the design or new features in a new or redesigned product or system.
• Role. A new or redefined product or a system may play a new role in the lives of the users. The prototype may be used to answer the following questions: What is the role of a system/product? What role should it play and what characteristics and features are necessary to achieve this?
• Look and feel. In many cases the role of the system or product is well understood, but the prototype will implement the design in a novel way, so it will be used to understand how it looks and feels.
• Integration. This focus answers the questions of the previous three focuses. This prototype is the most complex and answers several questions, so its preparation and evaluation is relatively demanding.

Four principal categories of prototypes on the model
(Houde & Hill 1997: 369)

3. Fidelity level

Prototypes may represent different levels of fidelity, from low fidelity to high level fidelity.

Low fidelity prototypes (lo-fi prototypes)

Lo-fi paper prototype of iWatch app demonstrating different steps (photo courtesy of Dominika Dobrzeniecka)

Low-fidelity prototypes are very often made on paper, for example as hand-drawn sketches or simple wireframes. Lo-fi prototypes are based on initial research as a basis. These may be the draft requirements. When the requirements are becoming more precise, they can be used to create more detailed prototypes — mockups. Generally, paper prototypes do not allow user interaction. Lo-fi prototypes are used:

• To generate and visualise ideas;
• To experiment and discuss alternative design solutions;
• To structure the discussion over the proposed requirements and flows;
• To communicate the concepts and to help to communicate with stakeholders;
• To validate first ideas.

Making low-fidelity prototypes is cost and time efficient. Using lo-fi prototypes can make the discussion around requirements more specific. Prototyping can be a team activity used during workshops focused on functional requirements. Creating lo-fi prototypes does not require preparations.

Medium fidelity prototypes

Medium fidelity prototype of iWatch app demonstrates a detailed user journey and user interaction (photo courtesy of Dominika Dobrzeniecka)

Depending on the technique used, this type can be represented in the form of detailed, clickable wireframes or simple mockups. They allow for simple user interaction. These prototypes can be used:

• To document the design proposals;
• To discuss alternative design and interaction solutions;
• To define the requirements and flows;
• To design user journeys and service blueprints;
• To build information architecture;
• To validate, test and get feedback.

Preparing wireframes and mockups requires a better understanding of user requirements and journeys. Mockups can present the visual aspect of the proposed solution, so they can be used to demonstrate how the system will “look” and “feel”.

High fidelity prototypes (hi-fi prototypes)

An example of hight fidelity prototype (photo courtesy of Dominika Dobrzeniecka)

High-fidelity prototypes are the most complex representations of a system or a concept. They can be used to demonstrate the whole set of functionalities, interactions and user journeys, depending on the scope. Hi-fi prototypes are used:

• To demonstrate how certain designs or technologies can be implemented;
• To document a design;
• To demonstrate the complex requirements and flows;
• To design user journeys and service blueprint;
• To demonstrate how the system will “look” and “feel”;
• To validate design and technological proposal;
• To validate, test and get feedback from stakeholders;

Hi-fi prototypes can be advanced and detailed mockups or demos of the system. They require very detailed input and complex understanding of requirements and user interaction. Hi-fi prototypes and demo can be used to demonstrate the whole system and its complexity and to validate technological feasibility.

4. Purpose

There are three types of prototype depending on their purpose (Ruecker 2015):

• Research-driven prototypes. These prototypes are used “to produce a kind of generalized knowledge about an idea that the prototype embodies” (Ruecker 2015). Their purpose is not to create a defined system or product, but the outcomes may be used to create production-driven prototypes in the next stage.
• Production-driven prototypes. These prototypes are made to serve as the basis for a product or system. They go through a refinement process — from early, low-fidelity versions, through more detailed iterations to fully designed and complex versions.
• Provocation-driven prototypes. Drawing on Boer and Donovan (2012), Ruecker explains the goal of these prototypes as being “to challenge presuppositions, break down stereotypical understandings, and generally produce changes in the way people think about a particular topic or situation” (Ruecker 2015).

In the commercial context, production-driven prototypes and research-driven prototypes are the most often used. We regularly use research-driven prototypes during the Discovery stage and production-driven during the Alpha and Beta stages. The more detailed purposes depends on their focus and level of fidelity. Each prototype can be used for research purposes, regardless of its initial purpose.

5. Selecting right type of prototype

Illustration demonstrating the reation between the level of fidelity, focus and purpose of prototype

To select the right type of prototype, you need to:

• Discuss the objective of the prototype with the team, as its objective must be aligned to the overall objective of the project;
• Answer the question about its purpose, as it will influence design. If the purpose is research, you need to define the research question. If the purpose is production-driven, you need to understand the objective of the project and what is the expected outcome.
• In the research process, the prototypes may be used in formative evaluation intended to improve designs, or summative evaluations to verify whether the proposed solution is good enough (Dix 2009: 29);
• Define its focus: implementation, role, look and feel or integration;
• When you know the focus of the prototype, you know what is the best level of fidelity;
• When you start planning the prototype, discuss the way you plan to design in order to ensure that the prototype can be used by the whole team. For example researchers may need prototypes that can be easily accessed on different devices, while for developers it may be more important that you take into account the proposed technology.

6. How do we create prototypes?

• In one project there may be a need to create several prototypes;
• Several prototypes can be developed simultaneously;
• The first step is to identify the focus and purpose of the prototype and then select the right level of fidelity;
• Depending on the prototype type, it may take a couple of minutes or days to create the first iterations;
• The prototypes are used to communicate and enable the discussion, and it is important to facilitate the discussion (e.g. see for example Connor and Irizarry 2015);
• Managing the creative process is also important (like naming, documenting and versioning prototypes, as well as archiving);
• Prototypes can be made with graphic software (e.g. Adobe Illustrator, Adobe InDesign, Adobe Photoshop, CorelDraw Graphic Suite, etc.) and prototype tools (e.g. Adobe XD, Axure, GOV.UK prototype kit, InVision, Marvel App, UXPin, Sketch, etc.), as well as other kits and apps (e.g. GOV.UK prototype kit), depending on the prototype type.
• Prototypes can be made in different technologies and frameworks (such as HTML, CSS, JavaScript, Bootstrap, etc.).

7. Who is involved?

• Prototyping is a team activity and prototypes are created by different members of the multidisciplinary team during for example workshops or collaborative sessions;
• The process is led by designers or researchers, who together with the team members define the focus, purpose and level of fidelity;
• If the prototype is built to validate technical issues, as proof of concept, the role of architects or software engineers is crucial;
• The level of engagement of different team members may differ. For example the client may only review the prototype and the team members (PM, BA, software engineers, UR) contribute to the process, while designers and/or researchers lead the process.

8. Instead of conclusions: prototyping the future

Prototyping is a very powerful activity in product or service design, as it gives you a chance to verify your hypotheses, test a new solution or even co-create it with its potential users. There is also one important aspect that should be recognised: managing the expectations of people who are involved in this activity. Prototyping is about creating the future products and designs. It means that people who are involved in this activity may have different motivations and expectations when it comes to the final result. Some of the people involved may have been working on these ideas for a long time or the future solution may have a huge impact on their work or life. It is important to recognize it and clearly communicate with all the involved stakeholders about the purpose and potential outcomes of the prototyping activity to avoid misunderstandings or disappointments.

What I found is that it is relatively easy to engage people in this activity, so I encourage everyone to introduce prototyping into their everyday practice.

References

Boer, L., and Donovan, J.. (2012). Prototypes for participatory innovation. In Proceedings of the designing interactive systems conference (DIS ’12) (pp. 388–397). New York, NY: ACM.

Connor, A., and Irizarry, A. (2015). Discussing Design: Improving Communication and Collaboration Through Critique. O’Reilly Media, Inc..

Dix, A. (2009). Human-computer interaction. In Encyclopedia of database systems (pp. 1327–1331). Springer US.

Houde, S., and Hill, C. (1997). What do prototypes prototype. Handbook of human-computer interaction, 2, (pp. 367–381).

Prototype. UXL Encyclopedia of Science, edited by Amy Hackney Blackwell and Elizabeth Manar, 3rd ed., UXL, 2015. Science in Context, link.galegroup.com/apps/doc/ENKDZQ347975681/SCIC?u=dclib_main&xid=0c8f739d Accessed 26–03–2018.

Ruecker, S. (2015). A brief taxonomy of prototypes for the digital humanities. Scholarly and Research Communication, 6(2). http://www.src-online.ca/index.php/src/article/view/222/415 Accessed 26–03–2018.