Introduction to prototyping

1. Media Design course
Autumn 2016
Producing Design Solutions
Prototyping

2. INDEX
1. Introduction
2. Early visualizations
3. Prototyping
4. Low-fi prototyping
5. Medium-high fidelity prototyping
6. Key ideas about prototyping

3. 1. INTRODUCTION
A prototype is an early embodiment of a design concept.
Definition
Yang and Epstein, 2005

4. 1. INTRODUCTION
• Proof-of concept prototype: helps to better understand what approach to take in
designing a product a the early stages of the design process
• Proof-of-product prototype: clarifies a design’s physical embodiment and production
feasibility.
Prototype purposes (Ullman, 2003)
• Proof-of-process prototype: shows that the production methods and materials can
successfully result in the desired product.
• Proof-of-production prototype: demonstrates that the complete manufacturing process
is effective.

5. 1. INTRODUCTION
EARLYVISUALIZATIONS
• Sketches
LOW-FIDELITY PROTOTYPES
• Wireframes
• Paper prototypes
• Storyboards
MEDIUM – HIGH FIDELITY PROTOTYPES
• Clickthrough prototypes
• Mock-ups
Prototypes level of fidelity

6. 1. INTRODUCTION
• Parallel design is a method/technique in which several people create an initial design
from the same set of requirements.
Parallel design
• The aim is to assess the different ideas before settling on a single concept for
continued development.
Benefits:!
• Several ideas can be generated quickly and cost effectively
• Allows compressing the concept development schedule
• The concepts generated can often be combined so that the final solution
benefits from all ideas proposed.

7. 2. EARLYVISUALIZATIONS
Sketches show early ideas.The main objective is to explore different
design possibilities.
Sketches Feeler prototype
Sketches

8. 3. PROTOTYPING
According to Sanders and Stappers (2008), prototypes:
• Are physical manifestations of ideas or concepts.They range from rough (giving the
overall idea only) to finished (resembling the actual end result).
• Give form to an idea, and to explore technical and social feasibility.
• Prototypes can be made from a very wide array of materials including clay, foam,
wood, plastic, simple digital and electronic elements.
• Help to envision their ideas and to display and to get feedback on these ideas from
other stakeholders.
• Serve as design tools. End-users may use the prototypes during evaluative research
events.

9. Ach So! app wireframe
A wireframe is a basic and low
quality sketch of the Information
Architecture of a user interface
design. It is used to show a fast
design/sketch and allow
communication between the team
members, as well as users and
clients.
Wireframes
4. LOW-FI PROTOTYPING

10. Advantages (Snyder, 2003):
• Fast and inexpensive
• Identifies problems before they are coded
• Evokes more and better feedback from the users
• Helps developers think creatively
• Gets users and other stakeholders involved in the process
• Fosters team work and communication
Paper prototyping
4. LOW-FI PROTOTYPING

11. Reflex app paper prototype Feeler paper prototype
4. LOW-FI PROTOTYPING
Paper prototyping

12. https://www.youtube.com/watch?v=GrV2SZuRPv0
When preparing a test with a paper prototype it’s necessary to take into account:
• Objectives (what needs to be tested?)
• Tasks (what would be the user asked to do?)
• Organization (facilitation, documentation…)
4. LOW-FI PROTOTYPING
Paper prototyping

13. Social Augmented Reality app storyboard
A storyboard is a representation of the user interface in which a set of behaviors are
implemented. Storyboard are more conceptual than paper prototypes and retain most
of the information flow.
Storyboards
4. LOW-FI PROTOTYPING

14. Prototype image from Sketching user experiences (Buxton, 2010).
Storyboards
4. LOW-FI PROTOTYPING

15. Clickthrough prototypes
5. MEDIUM – HIGH FIDELITY PROTOTYPING
Screen capture of Feeler clickthrough prototype

16. Screen capture of Feeler clickthrough prototype
Clickthrough prototypes
5. MEDIUM – HIGH FIDELITY PROTOTYPING

17. Ach So! app mock-ups
Mock-ups
Static visualization that
aims to represent the
“final” prototype.
5. MEDIUM – HIGH FIDELITY PROTOTYPING

18. 6. KEY IDEAS ABOUT PROTOTYPING
Square 1, v.1 prototypes
Continuous iteration
Square 1, v.2

19. Testing solutions since the beginning
Development process of SoAR
6. KEY IDEAS ABOUT PROTOTYPING

20. Tests of Feeler prototypes
6. KEY IDEAS ABOUT PROTOTYPING
Testing solutions since the beginning

21. FURTHER READINGS
This material uses Creative Commons License
Recognition – Share alike.
Buxton, B. (2010). Sketching user experiences: getting the design right and the right design. Morgan Kaufmann.
Houde, S., & Hill, C. (1997).What do prototypes prototype. Handbook of human-computer interaction, 2, 367-381.
Nielsen, J., & Faber, J. M. (1996). Improving system usability through parallel design. Computer, 29(2), 29-35.
Sanders, E. B. N., & Stappers, P. J. (2008). Co-creation and the new landscapes of design. Co-design, 4(1), 5-18.
Snyder, C. (2003). Paper prototyping:The fast and easy way to design and refine user interfaces. Morgan Kaufmann.
Poldoja, H. (2015). User Interface PrototypingTechniques: Low Fidelity Prototyping.
http://www.slideshare.net/hanspoldoja/user-interface-prototyping-techniques-low-fidelity-prototyping
Ullman, D. G. (1992). The mechanical design process (Vol. 2). NewYork: McGraw-Hill.
Walker, M.,Takayama, L., & Landay, J.A. (2002, September). High-fidelity or low-fidelity, paper or computer? Choosing attributes
when testing web prototypes. In Proceedings of the human factors and ergonomics society annual meeting (Vol. 46, No. 5, pp.
661-665). SAGE Publications.

22. FURTHER READINGS
This material uses Creative Commons License
Recognition – Share alike.
Warfel,T. Z. (2009). Prototyping: a practitioner's guide. Rosenfeld Media.
Yang, M. C. (2005).A study of prototypes, design activity, and design outcome. Design Studies, 26(6), 649-669.