This is the 5th (fifth) lecture of the "Designing Interactions / Experiences" module I’m teaching at Köln International School of Design of the Cologne University of Applied Sciences, which I’m honored to give by invitation of Professor Philipp Heidkamp. In this presentation we discuss the different design artifacts typically produced during the ideation stage

2. { Designing Interactions: The Design of Experiences }
Youareat: Introduction » Welcome
Designing Interactions:
Welcome!
My name is Itamar Medeiros
http://www.designative.info/
http://www.linkedin.com/in/designative/
medeiros.itamar@gmail.com
@designative

3. { Designing Interactions: The Design of Experiences }
Youareat: Introduction » Learning Objectives and Outline
Designing Interactions:
The Design of Experiences
Learning Outcomes
§ You will learn about the different design
artifacts typically produced during the
ideation stage
Class Outline
§ Bridge the Research and Design
§ The Language of Interactive Experiences
§ Conceptual Design Documents, Wireframes,
and Paper Prototypes
§ High Fidelity Mockups, Design Specifications

4. Introduction:
Collect / Create / Relate / Donate
Collect
Learn from previous
experiences
!
Relate
Consult with peers
and mentors
"
#
$
Create
Explore, compose,
and evaluate
possible solutions
Donate
Disseminating
results
Shneiderman, B. (February 1999), Creating Creativity for Everyone: User Interfaces for
Supporting Innovation, ACM Transactions on Computer-Human Interaction 7, 1 (March 2000),
114-138.
{ Designing Interactions: The Design of Experiences }
Youareat: Introduction » Collect / Create / Relate / Donate

5. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Course Outline
Design Thinking (1/3 of the course)
§ Week 01: Design “vs” Design Thinking
§ Week 02: Discovery “Mode”
§ Week 03: Interpretation “Mode”
§ Week 04: Reflection in Action
Course Outline

6. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Course Outline
Information Design (1/3 of the course)
§ Week 05: Visualizing Data / Processes
§ Week 06: Diagrams (Affinity / Swimlane /
System Boundaries) and Models (Mental /
Work / Artifact)
§ Week 07: Story Telling (Storyboarding /
Customer Journey Maps / Personas &
Scenarios)
§ Week 08: Reflection in Action
Course Outline

7. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Course Outline
User Experience Design (1/3 of the course)
§ Week 09: Turning Insights into Action
§ Week 10: Concept Design, Wireframing,
Prototyping
§ Week 11: User Validation
§ Week 12: Reflection in Action
Course Outline

8. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Course Outline
Bridge the Research and Design
After all the time we’ve spent gathering user
insights, framing and prioritizing design
opportunities, now is time to address the
design challenge with design solutions

9. The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved
September 1st , 2011 from http://www.designthinkingforeducators.com/

10. IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved
September 1st , 2011 from http://www.designthinkingforeducators.com/

12. “Design Thinking”
“Information Design”
“Interaction Design”

14. { Designing Interactions: The Design of Experiences }
Youareat: Collect » User Experience » Definitions
"User experience" encompasses all aspects of
the end-user's interaction with the company,
its services, and its products.
User Experience:
Definitions
Norman, D., Nielsen, J., (2014), The Definition of User Experience, retrieved January 9, 2014
from http://www.nngroup.com/articles/definition-user-experience/

15. We’re seeing the rise of the “experiential
industry”, in which people in the “future”,
would be willing to allocate high percentages
of their salaries to live amazing experiences.
User Experience:
Definitions
Pine, J.B, Gilmore, J.H, (1999),
The Experience Economy: Work Is Theater & Every Business a Stage, Harvard Business
School Press, Boston, 1999.
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » User Experience » Definitions

17. TheHuffingtonPost.com, (2014), The World’s Most Expensive Restaurant
is Where?, retrieved June 12th 2014 from
http://www.huffingtonpost.com/2014/04/24/most-expensive-
restaurant_n_5207199.html

18. TheHuffingtonPost.com, (2014), The World’s Most Expensive Restaurant
is Where?, retrieved June 12th 2014 from
http://www.huffingtonpost.com/2014/04/24/most-expensive-
restaurant_n_5207199.html

19. It is user experience that forms the customer’s
impression of the company’s offerings, it is
user experience that differentiates the
company from its competitors, and it is user
experience that determines whether your
customer will ever come back
User Experience:
Definitions
Garrett, J.J, (2010), The Elements of User Experience: User-Centered Design for
the Web, New Riders; 2 edition (December 26, 2010)
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » User Experience » Definitions

20. The sensation of interaction with a product,
service, or event, through all of our senses,
over time, and on both physical and cognitive
levels.
Experience:
Definitions
Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011,
http://www.nathan.com/thoughts/unified/19.html
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » Experience » Definitions

21. Since our objective is to create interactive
experiences, let’s try to understand the
difference between passive experiences -- like
watching television or reading a book -- and
interactive experiences.
Language of Experiences
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » Experience » Definitions

22. Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011,
http://www.nathan.com/thoughts/unified/19.html

23. Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011,
http://www.nathan.com/thoughts/unified/19.html

24. Passive
Interactive
Feedback
Control
Sophisticated Navigation, High Audience Control
Creativity
Creation Tools, Creation Help
Productivity
Productivity Tools, Living Information
Communications
Adaptivity
Artificial Intelligence, Agents, etc…
Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011,
http://www.nathan.com/thoughts/unified/19.html

25. Shedroff, N., 1994, “Unified Field of Theory of Design”, retrieved on July 30th, 2011,
http://www.nathan.com/thoughts/unified/19.html

26. Experience:
Control & Feedback
Aspects of interactivity defined by how much
control users have over the outcome or the
rate, sequence, or type of action, and how
much feedback exists in the interface.
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » Experience » Control & Feedback

27. Taito Corporation, (1980), Space Invaders. [CARTRIGDE] Atari 2600.
Tokyo: Taito Corporation.

28. Blizzard Entertainment, (2007), World of Warcraft: The Burning
Crusade. [DISC] PC / MAC. Irvine, Calif: Blizzard Entertainment..

29. Experience:
Productivity & Creativity
Type of interaction that allows the user to
make, do, or share something themselves:
users must participate by creating or
manipulating instead of merely watching and
consuming.
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » Experience » Productivity & Creativity

30. Autodesk, Inc., (2011), Autodesk AutoCAD. [DISC] PC/Mac. San
Rafael, Calif: Autodesk, Inc.

31. Apple, Inc. (2012), iMovie for iOS, Cupertino California.

32. Toca Boca (2012), Toca Band for iOS, Stockholm Sweden.

33. Toca Boca (2012), Toca Hair Salon for iOS, Stockholm Sweden.

34. Experience:
Communicative
Type of interaction that allow users to meet,
talk, share their personal stories and opinions
with other users of the system/product.
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » Experience » Communicative

35. Brian Solis and JESS3., (2010), Conversation Prism,
retrieved August 1st, 2011, http://www.theconversationprism.com/

36. Instagram, Inc. (2013), Instagram, iOS, San Francisco California.

37. Foodspotting, Inc. (2013), Foodspotting,iOS, San Francisco California.

38. Zynga, Inc. (2012), Draw Something Free, iOS, San Francisco California.

39. Zynga, Inc. (2012), Draw Something Free, iOS, San Francisco California.

40. Experience:
Adaptive
Type of interaction based on technologies that
changes the experience based on the behavior
of the user. These can include agents,
modifying behaviors, and artificial intelligence.
{ Designing Interactions: The Design of Experiences }
Youareat: Collect » Experience » Communicative

41. Activision, Inc., (2010), Call of Duty: Black Ops. [DISC] Xbox 360. Santa
Monica, Calif: Activision, Inc.

42. Amazon LLC., (1996-2011), Amazon.com. retrieved August 1st 2011,
http://www.amazon.com/

43. Foursquare Labs,, Inc. (2013), Foursquare, iOS, San Francisco California.

44. { Designing Interactions: The Design of Experiences }
Youareat: Collect » User Experience Design » Definitions
Experience design is the practice of designing
products, processes, services, events, and
environments with a focus placed on the
quality of the user experience and culturally
relevant solutions
User Experience Design:
Definitions
Aarts, Emile H. L.; Stefano Marzano (2003).
The New Everyday: Views on Ambient Intelligence. 010 Publishers. p. 46

45. Visua.ly (2013), Disciplines of User Experience Design,
retrieved May 16th, 2013 from
http://visual.ly/disciplines-user-experience-design

46. Psomas, S., (2007), The Five Competencies of User Experience Design in UX
Matters, retrieved May 16th, 2013 from
http://www.uxmatters.com/mt/archives/2007/11/the-five-competencies-of-
user-experience-design.php

47. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Use Experience Design » Walking towards Clarity
Since User Experience Design is such a
interdisciplinary and collaborative discipline,
the artifacts produced by experience designers
are vital for the discussions that happen along
the way through the product development
process.
User Experience Design:
Walking towards Clarity

48. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Use Experience Design » Walking towards Clarity
When design teams and other functional
groups have to collaborate with Product
Management to turn Marketing Requirements
into Product Requirement Documents, it’s only
natural that Product definition occurs at the
beginning of the project.
User Experience Design:
Walking towards Clarity
Medeiros, I. (2007), Political & Economical Issues in Distinction Award in the MA Design Practice,
retrieved on January 9th, 2014 from
http://designative.info/works/honors-awards/distinction-award-ma-design-practice/#Political

49. Medeiros, I. (2007), Political & Economical Issues in Distinction Award in the MA Design Practice,
retrieved on January 9th, 2014 from
http://www.designative.info/portfolio/honors-awards/distinction-award-ma-design-practice/

50. Paulson, B. (1976), Designing to Reduce Construction Costs in Journal of the Construction
Division, ASCE. Proceedings of the American Society of Civil engineers, Vol. 102, Dec: 587-594

51. Beck, K., (2004). Boehm’s Curve in Extreme Programming Explained: Embrace Change. Boston:
Addison-Wesley; 2nd edition (November 26, 2004)

52. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Use Experience Design » The Artifacts
Here are some examples of design artifacts
resulted throughout different phases of the
product development process
User Experience Design:
The Artifacts

53. { Designing Interactions: The Design of Experiences }
Youareat: Collect » Use Experience Design » The Artifacts
One should – of course – consider how
appropriate each artifact is based on a few
variables:
§ What information needs to be conveyed?
§ Who is the audience?
§ What phase of the product development?
User Experience Design:
The Artifacts

54. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Conceptual Design Documents
Conceptual design is a type of art which gives
precedence to hypothetical function, it is the
creation and exploration of new ideas.
The Artifacts:
Conceptual Design Documents
Wikipedia, (2014), Conceptual Design, retrieved January 23, 2014 from
http://en.wikipedia.org/wiki/Conceptual_design

55. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

56. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

57. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

58. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

59. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

60. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

61. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

62. Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

63. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Conceptual Design Documents
Conceptual design can be also of a more
abstract nature (and less detailed), specially if
you’re trying to cast a vision, or to validate an
idea in its early stages.
The Artifacts:
Conceptual Design Documents

64. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

65. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

66. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

67. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

68. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

69. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

70. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

71. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

72. Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

73. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Wireframes
Wireframes are diagrams based on the idea
that you can describe the interactions of
screen-based products by removing any
aspects of the design incidental to the
behavior
The Artifacts:
Wireframes
Brown, D., (2010),
Communicating Design: Developing Web Site Documentation for Design and Planning, New
Riders; 2 edition (September 25, 2010)

74. Brown, D., (2010), Wireframe Samples - IPhone App for Zoo Visitors in Communicating Design, retrieved January 23, 2014
from http://communicatingdesign.com/2010/08/10/wireframes-samples-iphone-app-for-zoo-visitors/

75. A Produle Systems Pvt. Ltd. (2008-2014), Print Dialog in Samples created with Mockflow, retrieved January 23, 2014 from
http://app.mockflow.com/view/E7BDE62D74C39BD59DCD75112B5F9126

76. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Prototypes
Prototyping is a great way to communicate
the intent of a design both clearly and
effectively. Prototypes help you to flesh out
design ideas, test assumptions, and gather
real-time feedback from users.
The Artifacts:
Prototypes
Warfel, T. Z., (2009), Prototyping: A Practitioner's Guide, Rosenfeld Media; 1st edition

77. Medeiros, I., (2014), Adding Basemaps from Consumer Map Services, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/adding-basemaps-consumer-map-services/

78. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Prototypes
A prototype […] captures the intend of a
design and simulates multiple states of that
design. Wireframes and storyboards are static
representations of a design that or their own
merit do not simulate multiple states of a
design, It’s the simulation and multiple states
part that creates the distinction.
The Artifacts:
Prototypes
Warfel, T. Z., (2009), Prototyping: A Practitioner's Guide, Rosenfeld Media; 1st edition

79. Medeiros, I., (2014), Project Collaboration & Tracking App, retrieved
January 9, 2014 from
http://designative.info/portfolio/user-experience/project-
collaboration-tracking-app/

80. Medeiros, I., (2014), Project Collaboration & Tracking App, retrieved
January 9, 2014 from
http://designative.info/portfolio/user-experience/project-
collaboration-tracking-app/

81. Medeiros, I., (2014), Project Collaboration & Tracking App, retrieved
January 9, 2014 from
http://designative.info/portfolio/user-experience/project-
collaboration-tracking-app/

82. ProtoIO Inc, (2014), Wack-A-Monster, retrieved June 12th, 2014 from
https://showcase.proto.io/share/?id=ea5c5bec-9589-465f-86bd-937b6d982d26&v=1

83. Warfel, T. Z., (2009), Sketching & Prototyping: Rapid Design Techniques, retrieved January 24, 2014 from
https://vimeo.com/5381949

84. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Paper Prototypes
High Fidelity Mockups are more useful for
refining the details of the design and are
thus more effective in the later stages[…] They
allow you to explore page layout and
arrangement as well as more thorough
investigations of color and palette choices.
The Artifacts:
High Fidelity Mockups
Brink, T., Gergle, D., Wood, S., (2001), Usability for the Web: Designing Web Sites that Work,
Morgan
Kaufmann;
1
edi1on
(October
29,
2001)

85. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Paper Prototypes
Moving into high fidelity visual-design assets,
you receive much more tactical feedback. Test
participants will be able to respond to
branding, aesthetics and visual hierarchy, as
well as aspects of figure/ground relationship,
grouping of elements, and the clarity of your
calls-to-action.
The Artifacts:
High Fidelity Mockups
Goethelf, J., Seiden, J., (2013),
Lean UX: Applying Lean Principles to Improve User Experience, O'Reilly Media (March 8,
2013)

86. Medeiros, I., (2014), Cruising & Navigation App for iOS,
retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/
cruising-navigation-app-ios/

87. Medeiros, I., (2014), Cruising & Navigation App for iOS,
retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/
cruising-navigation-app-ios/

88. Medeiros, I., (2014), Cruising & Navigation App for iOS,
retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/
cruising-navigation-app-ios/

89. Medeiros, I., (2014), Cruising & Navigation App for iOS,
retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/
cruising-navigation-app-ios/

90. Medeiros, I., (2014), Cruising & Navigation App for iOS,
retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/
cruising-navigation-app-ios/

91. { Designing Interactions: The Design of Experiences }
Youareat: Collect » The Artifacts » Paper Prototypes
A design specification provides explicit
information about the requirements for a
product and how the product is to be put
together. It also tells specific examples of how
the design of the project should be executed,
helping others work properly.
The Artifacts:
Design Specifications
Wikipedia (2013), Design Specification, retrieved January 24, 2014 from
http://en.wikipedia.org/wiki/Design_specification

92. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/

93. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/

94. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/

95. Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/

96. Based on the level of clarity you have on the
personas and scenarios derived from the user
research, what kind of artifacts should be
produced?
User Experience Design:
The Artifacts
{ Designing Interactions: The Design of Experiences }
Youareat: Relate » User Experience Design » The Artifacts

97. Choose 1 (one) design artifact you think is
more appropriate for the current phase of the
product development process your are in
{ Designing Interactions: The Design of Experiences }
Youareat: Create » The Artifacts » Exercise
The Artifacts:
Exercise

98. Go to our KISD Space for this course and share
the artifacts you created.
Itamar Medeiros
http://designative.info/
http://twitter.com/designative
itamar.medeiros@designative.info
{ Designing Interactions: The Design of Experiences }
Youareat: Donate » Disseminating Results
Donate:
Disseminating Results