This document provides an overview of a course on information design and interaction. The course covers design thinking, information design, and user experience design over 12 weeks. Key topics include visualizing data, dashboards, diagrams, storytelling techniques, and turning insights into prototypes. The document also discusses information design principles and how various visualization techniques can help communicate with stakeholders and facilitate decision making.

2. { Designing Interactions: Information Design & Interpretation }
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: Information Design & Interpretation }
Youareat: Introduction » Learning Objectives and Outline
Designing Interactions:
Information Design & Interpretation
Learning Outcomes
 You will learn how to use data visualization
techniques to facilitate decision making
Class Outline
 Visualizing Data / Processes
 Dashboards
 Diagrams (Swimlane / System Boundaries)
 Story Telling (Storyboarding / Customer
Journey Maps / Personas & Scenarios)
 Matrices (UXI, Insight Matrix)

4. Introduction:
Collect / Create / Relate / Donate
Collect
Learn from previous
experiences
i
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: Information Design & Interpretation }
Youareat: Introduction » Collect / Create / Relate / Donate

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

6. { Designing Interactions: Introduction }
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: Introduction }
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

9. “Design Thinking” “Information Design” “Interaction Design”

10. “Information Design”

11. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Information Design » Definitions
Information design is the defining, planning,
and shaping of the contents of a message and
the environments in which it is presented, with
the intention to satisfy the information needs
of the intended recipients.
Information Design:
Definitions
Information Design Institute (2014), “What is Information Design?” in in What is Information
Design, retrieved January 9, 2014 from http://designative.info/about/what-is-information-
design/

12. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Information Design » Facilitating Decision Making
Through various types of relationship,
interaction diagrams and other visualization
techniques, one can communicate with
different stakeholders to help:
 Unpack the results of […] User Research;
Information Design:
Facilitating Decision Making
Medeiros, I. (2007), Data Visualization, retrieved on January 9th, 2014 from
http://designative.info/works/design-management/data-visualization/

13. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Information Design » Facilitating Decision Making
Through various types of relationship,
interaction diagrams and other visualization
techniques, one can communicate with
different stakeholders to help:
 Visualize large sets of data to help
prioritization of requirements;
Information Design:
Facilitating Decision Making
Medeiros, I. (2007), Data Visualization, retrieved on January 9th, 2014 from
http://designative.info/works/design-management/data-visualization/

14. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Information Design » Facilitating Decision Making
Through various types of relationship,
interaction diagrams and other visualization
techniques, one can communicate with
different stakeholders to help:
 Support buy-in from Software Architects
and Tech leads;
Information Design:
Facilitating Decision Making
Medeiros, I. (2007), Data Visualization, retrieved on January 9th, 2014 from
http://designative.info/works/design-management/data-visualization/

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

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

17. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Information Design » Facilitating Decision Making
There are lots of different ways of
prioritizing features, And just like any other
type of method, the best way depends on lots
of different variables—such as how early in the
product development lifecycle a product is,
how mature a market is, or how well-known
the targeted personas are […]
Information Design:
Facilitating Decision Making
Medeiros, I. (2013), “What are the best ways to prioritize a product and feature list?” in
UXmatters, retrieved on January 9th, 2014 from
http://www.uxmatters.com/mt/archives/2013/12/the-best-ways-to-prioritize-products-and-
features.php

18. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Information Design » Infographics
Information graphics or infographics are
graphic visual representations of information,
data or knowledge intended to present
complex information quickly and clearly. They
can improve cognition by utilizing graphics
to enhance the human visual system’s ability
to see patterns and trends […]
Information Design:
Infographics
Wikipedia (2014), “Infographic”, retrieved on January 9th, 2014 from
http://en.wikipedia.org/wiki/Infographic

19. PBS (2013), The Art of Data Visualization, retrieved June 5th , 2014 from
http://video.pbs.org/video/2365039781/

20. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Facilitating Decision Making » Visualization Techniques
What follows is a series of examples of how
various types of relationship, interaction
diagrams and other data visualization
techniques – in no particular order – can help
communicate with different stakeholders
and facilitate decision making.
Facilitating Decision Making:
Visualization Techniques

21. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Dashboards
Dashboards offer a unique and powerful
solution to an organization’s need for
information […] and can be used to monitor
many types of data and to support almost any
set of objectives a business deems important.
Visualization Techniques:
Dashboards
Few, S., (2006), Information Design Dashboards, O'Reilly Media; 1 edition (January 1, 2006)

22. Medeiros, I. (2007-2013), Roamworks Fleet Management Dashboards in Data
Visualization, retrieved November 27th, 2013 from
http://designative.info/works/design-management/data-visualization/

23. Medeiros, I. (2007-2013), Roamworks Fleet Management Dashboards in Data
Visualization, retrieved November 27th, 2013 from
http://designative.info/works/design-management/data-visualization/

24. Medeiros, I. (2007-2013), Roamworks Fleet Management Dashboards in Data
Visualization, retrieved November 27th, 2013 from
http://designative.info/works/design-management/data-visualization/

25. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Dashboards
Presenting data in a visual form is not sufficient
to support customers make decisions.
Providing context is vital to the success of
dashboards, either by contrasting the data with
Targets (e.g.: 25% above monthly goal) or
comparing it with previous series (e.g.: 15%
above last month, 10% below best in class)
Visualization Techniques:
Dashboards

26. Medeiros, I. (2007-2013), Roamworks Fleet Management Dashboards in Data
Visualization, retrieved November 27th, 2013 from
http://designative.info/works/design-management/data-visualization/

27. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Swimlane Diagrams
A swim lane (or swimlane) is a visual element
used in process flow diagrams, or flowcharts,
that visually distinguishes responsibilities for
sub-processes of a business process.
Visualization Techniques:
Swimlane Diagrams
Wikipedia (2014), Swimlane Diagrams, retrieved January 9, 2014 from
http://en.wikipedia.org/wiki/Swim_lane

28. Medeiros, I. (2007-2013), Swimlane Diagrams in Data Visualization,
retrieved November 27th, 2013 from
http://designative.info/works/design-management/data-visualization/

29. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » System Boundaries Diagrams
A System Boundary (or Use Case) diagram is
notation used to define conceptual
boundaries of a system
Visualization Techniques:
System Boundaries Diagrams
Wiegers, K.E., 2006. System Boundary Diagram in More About Software Requirements: Thorny
Issues and Practical Advice . p 138-140. Redmond: Microsoft Press.

30. Wiegers, K.E., 2006. System Boundary Diagram in More About Software Requirements: Thorny
Issues and Practical Advice . p 138-140. Redmond: Microsoft Press.

31. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Storyboards
The storyboard is a tool derived from the
cinematographic tradition; it is the
representation of use cases through a series
of drawings or pictures, put together in a
narrative sequence.
Visualization Techniques:
Storyboards
Tassi, R., (2009), “Storyboards” in Service Design Tools, retrieved January 9, 2014 from
http://www.servicedesigntools.org/tools/13

32. Design for Service (2009), Thinkpublic Comic, retrieved January 9, 2014 from
http://designforservice.wordpress.com/2009/01/20/thinkpublic-comic/

33. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Customer Journey Maps
The customer journey map is an oriented graph
that describes the journey of a user by
representing the different touchpoints that
characterize his interaction with the service.
Visualization Techniques:
Customer Journey Maps
Tassi, R., (2009), “Customer Journey Maps” in Service Design Tools, retrieved January 9, 2014
from http://www.servicedesigntools.org/tools/8

34. Tassi, R., (2009), “Customer Journey Maps” in Service Design Tools, retrieved January 9, 2014
from http://www.servicedesigntools.org/tools/8

35. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Swimlane Diagrams
Personas are fictional characters created to
represent the different user types within a
targeted demographic, attitude and/or
behavior set that might use a site, brand or
product in a similar way.
Visualization Techniques:
Personas & Scenarios
Cooper A., (2007), About Face 3: The Essentials of Interaction Design, p. 97, Wiley; 3rd edition
(May 7, 2007)

36. Xavier Llusá
Architect
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

37. Xavier Llusá
Background
> 48 years-old, married,
male
> Received a BA at Escuela
Superior de Arquitetura de
Barcelona and a masters in
architecture at Universidad
de Bilbao
> Owns a 20-person
architecture studio in
Manhattan
> Intermediate Internet
user, has fast connection to
PC at work and average
cable connection on an IMac
at home
Costumer Needs
> Planning tools
> Proactive communication
> Monitor progress of
projects
> Validation of decisions
Scenario
Xavier just finished the
design of a new upscale
resort hotel to be
constructed in Dubai,
and he wants to be able
to manage the
construction of it
remotely.
Xavier wants to keep the
client informed and
happy about the
progress of construction
and keep the contractor
on track to
budgets/schedules
Since the project needs
the clients approval for
each stage, Xavier has to
confirm by each
milestone of the project
for a position to proceed
Needs
> Planning tools
> Proactive
communication
> Monitor
progress of
projects
> validation of
decision
> Proactive
communication
Features
> Create New Project
> Select files
> Add person to project
> Assign role to project
> Customize reports
> add milestone
> request approval
confirmation
Behavior
Xavier login to his Architecture
PROJECT TRAACKING account
and creates a new online
project.
He selects which files will be
associated with the project
from file browser.
Xavier then adds 2 (two)
people to the project:
Stephanie Powers and Malba
Tahir.
He assigns the role of CLIENT
to Stephanie and the role of
CONTRACTOR to Malba.
Xavier, then, limits Stephanie’s
reports to BUDGET/SCHEDULE
and sets Malba’s reports to
BUDGET/SCHEDULE/SPECIFIC
ATIONS
Xavier sets the milestones of
the project over the PROJECT
TIMELINE: Malba will only get
a permission to proceed to the
next step after Stephanie’s
approval of the previous one.
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

38. Stephanie Powers
Client
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

39. Stephanie Powers
Background
> 57 years-old, divorced,
female
> Received a MBA from
Wharton School of the
University of Pennsylvania
> Chief Executive Officer of a
major Hotel Chain with its
headquarters in San Francisco
> Advanced Internet user, has
fast connection to PC at work
and always online on a
smartphone
Costumer Needs
> Timely updates
> Fast navigation
> Detailed, but to the point
> Customizable
Scenario
Stephanie coordinates
the construction of
several projects and has
just approved another
with Xavier, for which
she wishes she can get
periodical updates on
the progress of
construction.
Stephanie wants to
share the status of
progress of construction
with different senior
officers of the
corporation, especially
Finance (which will audit
the budget/schedule of
the process) and
Marketing (who will take
care of advertising the
new resort once it’s
finished)
Stephanie wishes she
can approve the
milestones as soon as
they are finished, to
speed up construction
Needs
> Timely
> Detailed,
but to the point
> customizable
> Fast navigation
Features
> project list
> progress alerts
> Add person to project
> Customize reports
> mobile alerts
> approval confirmation
Behavior
Stephanie logs in to her
AUTOCAD SHARED
DESKTOP account and
select the DUBAI PROJECT
from the project list
She chooses to receive
WEEKLY UPDATES about
the project status.
Stephanie adds the two
officer to the project
Stephanie customizes the
report views according to
the needs of the managers:
Finance officer will have
VIEW ONLY access to the
BUDGET/SCHEDULE and
Marketing officer will have
VIEW ONLY access to
CONSTRUCTION PICTURES
Stephanie changes the
APPROVAL settings, so that
she can receive messages
on her mobile once each
milestone is complete, and
chooses also to be able to
confirm approval.
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

40. Malba Tahir
Contractor
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

41. Background
> 49 years-old, widow, male
> Received BS in Civil
Engineering from University
of Cairo
> Manages several
construction teams
(structural, heating,
electrical, plumbing, air
conditioning) in Dubai area
> Novice Internet user, has
fast connection to PC at
work and just started using
digital cameras
Costumer Needs
> easy to learn, easy to use
> Proactive communication
> Monitor progress of
projects
> Save money
Scenario
Malba won the bid to
construct a new hotel
for Stephanie in Dubai,
and now he must keep
the budget/schedule on
track, to keep the
contract.
Malba must keep
Stephanie and Xavier
informed of status of
progress of construction
Malba wants to keep his
costs low, yet keep the
quality of construction
within the specifications,
so he must constantly
check for prices/quality
of materials
Needs
> Monitor
progress of
projects
> proactive
communication
> easy to learn,
easy to use
> Save money
Features
> project list
> update cost
> update schedule
> timeline
> select milestone
> upload picture
> select specification
> compare price
Behavior
Malba logs in to his
Architecture Shared Desktop
account and select the DUBAI
PROJECT from the project list
Once he confers with his
teams, he inputs the data
about progress and costs, to
recalculate
BUDGET/SCHEDULE.
After seeing the budget and
schedule recalculated
automatically by the system,
he checks the new updated
PROJECT TIMELINE to find the
milestones of the
construction.
Since the excavation for the
foundation is almost finished,
He selects the milestone
FOUNDATION and uploads a
recent picture of the site.
He checks the project’s
SPECIFICATION; he selects
PLUMBING to see the
contracted cost, then ask the
system to compared the costs
with a DATABASE of suppliers
Malba TahirMedeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

42. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Use Case Documents
Use case is a list of steps, typically defining
interactions between a role and a system, to
achieve a goal. The actor can be a human or an
external system.
Visualization Techniques:
Use Case Documents
Wiegers, K.E., 2006. Use Case Documents in More About Software Requirements: Thorny Issues
and Practical Advice . p 138-140. Redmond: Microsoft Press.

43. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Swimlane Diagrams
Use Case Documents are very useful for:
 Visualizing the impact of implementation of
any give use case to the different personas;
 Helping in the decision making process by
providing a better sense of priorities;
 Communicating workflows without being
distracted by discussions about look-and-feel;
Visualization Techniques:
Use Case Documents
Medeiros, I., (2014), Use Case Documents, retrieved January 9, 2014 from
http://designative.info/works/user-experience/use-case-documents/

44. Medeiros, I., (2014), Use Case Documents, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/use-case-documents/

45. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » UXI Matrix
The UX Integration (UXI) Matrix is a simple, flexible,
tool that extends the concept of the product
backlog to include UX factors normally not tracked
by agile teams.
Visualization Techniques:
UXI Matrix
Innes, J., (2012), Integrating UX into the Product Backlog, in Boxes and Arrows, retrieved
January 9th, 2014 from http://boxesandarrows.com/integrating-ux-into-the-product-backlog/

46. Medeiros, I., (2014), Use Cases List in Product Definition and Requirements Prioritization,
retrieved January 9, 2014 from http://www.designative.info/portfolio/design-
management/product-definition-requirements-prioritization/

47. { Designing Interactions: Information Design & Interpretation }
Youareat: Collect » Visualization Techniques » Insights Clustering Matrix
This method allows us to take a list of insights
generated from research on people and context and
see how they are grouped together based on their
relations
Visualization Techniques:
Insight Clustering Matrix
Kumar, V., (2012), Insight Clustering Matrix in 101 Design Methods: A Structured Approach for
Driving Innovation in Your Organization. p 171. Wiley; 1 edition (October 9, 2012)

48. Medeiros, I., (2014), Insight Matrix in Data Visualization, retrieved January 9, 2014 from
http://www.designative.info/portfolio/design-management/data-visualization/

49. Based on the amount and kind of data you’ve
collected during the user research, what kind
of the visualization techniques mentioned
previously is most appropriate as a next
step of your project?
Information Design:
Visualization Techniques
{ Designing Interactions: Information Design & Interpretation }
Youareat: Relate » Information Design » Visualization Techniques

50. Choose 1 (one) of the visualization techniques
mentioned above, and process the data you’ve
produced during the Contextual Inquiry
interviews.
{ Designing Interactions: Information Design & Interpretation }
Youareat: Create » Information Design » Exercise
Information Design:
Exercise

51. Go to our KISD Space for this course and share
the artifact resulted from the visualization
technique you chose.
Itamar Medeiros
http://designative.info/
http://twitter.com/designative
itamar.medeiros@designative.info
{ Designing Interactions: Information Design & Interpretation }
Youareat: Donate » Disseminating Results
Donate:
Disseminating Results