The document discusses visual communication in UX research and design. It provides examples of different types of visualizations used at various stages of the design process, including workflows from contextual inquiries, personas to represent user research findings, process maps of user journeys, concept maps to illustrate design concepts, and charts and graphs to report evaluation findings from user surveys. The document also discusses principles for effective visualization based on Gestalt laws and provides resources for visualization inspiration and tools.

1. VISUAL COMMUNICATION
IN UX RESEARCH & DESIGN
MAY 2013
UXPA
MENG YANG | DORY A.AZAR
KRONOS

2. SETTING THE STAGE
We are Interaction Designers,
we apply visualization
research findings
MAY 2013
:)
Basically, we leave the
brain-teasing work to
researchers
xkcd.com

3. SETTING THE STAGE
Today, we shed light on research findings that helped us effectively
communicate our UX deliverables
MAY 2013
xkcd.com

4. SETTING THE STAGE
MAY 2013
VISUAL COMMUNICATION
VISUALIZATION
:s
?
!#!
!#!

5. SETTING THE STAGE
MAY 2013
COMMUNICATION
EXPRESSED
Transfer of information
from a human being to
another

6. SETTING THE STAGE
MAY 2013
VISUAL COMMUNICATION
REPRESENTED
VISUALS
Transfer of information
through visuals from a
human being to an-
other

7. SETTING THE STAGE
MAY 2013
VISUAL COMMUNICATION
VISUALIZATION
REPRESENTED
VISUALS
Transfer of information
through visuals from a
human being to
another. The transfor-
mation of information
into visuals is visual-
ization

8. MAY 2013
WHY VISUALIZATION?
VISUAL
COMMUNICATION

9. MAY 2013
WHY VISUALIZATION?
VISUAL
COMMUNICATION

10. MAY 2013
WHY VISUALIZATION?
REVEAL INFORMATION

11. MAY 2013
WHY VISUALIZATION?
REVEAL INFORMATION

12. MAY 2013
ART & INSPIRATION
WHY VISUALIZATION?

13. MAY 2013
ART & INSPIRATION
WHY VISUALIZATION?

14. VISUALIZATION FOR COMMUNICATION
MAY 2013
WHAT
WHERE & WHEN WHY
WHO HOW
WHAT IS THE INFORMATION THAT
YOU ARE TRYING TO COMMUNICATE?
(Relationships, Comparisons, Distributions,
Compositions, Descriptions)
NOT SURE?
VISUALIZATION CAN HELP YOU
REVEAL PATTERNS. SKETCH IT OUT, USE
TOOLS AND LOOK AT THE SHAPE OF YOUR DATA
CREATIVITY
VISUAL COMMUNICATION
FRAMEWORK

15. VISUALIZATION FOR COMMUNICATION
MAY 2013
WHAT
WHERE & WHEN WHY
WHO HOW
WHERE AND WHEN DID THIS
INFORMATION TAKE PLACE?
(In what context)
CREATIVITY
VISUAL COMMUNICATION
FRAMEWORK

16. VISUALIZATION FOR COMMUNICATION
MAY 2013
WHAT
WHERE & WHEN WHY
WHO HOW
CREATIVITY
VISUAL COMMUNICATION
FRAMEWORK
WHY DO I WANT TO COMMUNICATE
THIS INFORMATION?
(Informational/Reporting, Proposal,
Request, Feedback, Justification,
Convincing, etc.)
KIM REES

17. VISUALIZATION FOR COMMUNICATION
MAY 2013
WHAT
WHERE & WHEN WHY
WHO HOW
CREATIVITY
VISUAL COMMUNICATION
FRAMEWORK
WHO IS THE AUDIENCE
WHO IS THE INFORMATION ABOUT
KNOW YOUR TARGET AUDIENCE
(Interests, Expectations, Physical/Mental
charateristics, Age etc.)
IS THE INFORMATION ABOUT LIVING
AND BREATHING BEINGS?
KNOW YOUR SUBJECT
(Interests, Expectations, Physical/Mental
charateristics, Age, Feelings, etc.)
KIM REES

18. VISUALIZATION FOR COMMUNICATION
MAY 2013
WHAT
WHERE & WHEN WHY
WHO HOW
CREATIVITY
VISUAL COMMUNICATION
FRAMEWORK
HOW DO I REPRESENT
THE INFORMATION APPROPRIATELY?
GREAT!
CAN I DO BETTER?
KNOW THE DESIGN PRINCIPLES,
BEST PRACTICES, DOs & DONTs
SELECT THE APPROPRIATE
VISUAL REPRESENTATION
USE THE TOOL OF YOUR CHOICE

19. YOU HAVE THE 5Ws
USE WHAT YOU LEARNED
FROM THEM
VISUALIZATION FOR COMMUNICATION
MAY 2013
WHAT
WHERE & WHEN WHY
WHO HOW
CREATIVITY
VISUAL COMMUNICATION
FRAMEWORK
HOW DO I MAKE THE VISUALIZATION
MORE INTERESTING?
USE PERTINENT METAPHORS
(i.e. The Polar Bear)
USE DESIGN TOOLS: AI, PS etc.
SEARCH FOR INSPIRATIONS
CREATIVITY CAN BE LEARNED

20. SELECTING THE VISUAL REPRESENTATION
MAY 2013
A THOUGHT STARTER - A. ABELA

21. SELECTING THE VISUAL REPRESENTATION
MAY 2013
A THOUGHT STARTER
What would you
like to show?
COMPARISONS
RELATIONSHIPS
DESCRIPTIONS & STORY TELLING
DISTRIBUTIONS
TREES
PROCESS
MAPS
CONCEPT
MAPS
WORK-
FLOWS
STORY-
BOARDING
PROCESS
MAPS
EXPERIENCE
MAPS
TIMELINES
GEO MAPS
WORD
CLOUDS
SEMANTIC
NETWORKS
BUBBLE
CHARTS
RADIAL
VIS.
ZONE
MAPS
over time
over
geolocation
Any 2
dimensions
Text
1 Dimension
1 Dimension N Dimensions
Hierarchies and composition
Logical sequence
Connections
Non-overlapping tasks
Meaning oriented
Abstraction
of Details
Logical
Sequence
One User
Story

22. EXAMPLES
MAY 2013
EXAMPLES OF UX DELIVERABLES
DISCOVER
DESIGNEVALUATE
CONTEXTUAL INQUIRIES [Workflows]
PERSONAS [Trees, Geo Maps, Rad Vis, Bar Charts, Word Cloud]
NARRATIVES [Storyboarding]
USER EVALUATIONS
[Storyboarding]
USER JOURNEY [Process map]
UX STRATEGY [Zone maps]
UX CONCEPT [Concept map]
EXPERIENCE MAP
USER SURVEY REPORT
[Bubble Chart, Bar Chart]

23. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
Customers observed in their
context of work (CI)
Describe how customers
use Kronos in their env.
Audience: Designers
Subject: 46 customers
WorkflowsUnderstand the relation-
ships between Kronos & env
DISCOVER
x 46

24. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
Aggregated feedback from
observed customers (CI)
Reveal the common main
tasks that users perform
Audience: Designers
Subject: Capabilities
WorkflowsCompare the frequency of
use of Kronos capabilities
DISCOVER

25. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
After contextual inquiries
with users from different ind.
Reduce the number of perso-
nas
Audience: All stakeholders
Subject: Personas
TreesUnderstand the relationships
between persona of diff. ind.
DISCOVER
PERSONA FAMILIES
• Michael Martin, the Department
Manager
• X-Vertical
• Ryan Martin, the
Retail Store
Manager
• Retail
• Robert Martin, the
Retail
Communications
Specialist (a.k.a
Gatekeeper)
• Retail
• Nancy Martin, the
Nurse Manager
• Healthcare
• Cindy Martin, the
Central Staffing
Manager
• Healthcare & Retail
Primary persona
Secondary
personas
• Polly Martin, the
Promotional
Merchandising Mgr.
• Retail
• Manny Martin, the
Manufacturing
Manager
• Manufacturing
x 7

26. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
Based on CI and user
research for Retail customers
We want designers and
stakeholders to use them
Audience: PM & Designers
Subject: Michael (Persona)
Tree, Geo Maps, Rad Vis, Bar
Charts, Word Cloud
Reveal the primary character-
istics of a Persona
Customer & Employee Satisfaction
Monitor attendance
Legal compliance
Ensure Coverage Stay within Budget
Job GoalsExperience & Skill
Job Experience:
Familiarity with WFC:
Technical Skill:
Use of Mobile WFM:
Low HighModerate
Michael Martin Department Manager
Herb Peterson
Howard Edwards
Peter Edwards
Organizational Structure
Age
yrs yrs %
42 WFC Experience
Hobbies
Frequency of Use12 30
*
Manager
Michael Martin
Headquarters
San Francisco
Michael’s Workforce Distribution Tasks
Workforce
< 50 50 - 100 >100
DefineYearly
Budget
CreateSchedule
M
onitor
W
orkload
Record
Worked Hours
ManageAttendance
Analyze
Perform
ance
Develop
ActionPlan
100% 75% 50% 25% 0 25% 50% 75% 100%
50min
45min
120
m
in
45
min
60min
120m
in
60
min

27. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
Customer interviews with
Retail employees
Identify (justify) opportuni-
ties design improvements
Audience: Designers
Subject: Retail Employees
Process mapsReveal the Retail Employee
experience with Kronos tasks
DISCOVER - EXPERIENCE MAP

28. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
Litterature review and own
learnings after 3 releases
Justification for selecting
platforms for templates
Audience: Stakeholders
Subject: Kronos platforms
Zone MapsCompare the effort needed
to adapt design on diff. plat.
DESIGN - UX STRATEGY: PLATFORM SELECTION
PC BROWSER (WIDESCREEN)TABLET (Land.)
LAYOUTADAPTATION
INTERACTION ADAPTATIONMINIMUM
MAXIMUM
MAXIMUM
BB & Reg.
Smartphones (Portrait)
(iOS and And.)
Smartphones (Land.)
(iOS and And.)
TABLET (Portrait)
EASIER TRANSITION HARDER TRANSITION DESIGN FOR

29. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
After capabilities and need
assessment
Describe a high-level infor-
mation flow and architecture
Audience: Designers
Subject: Persona Intentions
Workflow, Concept mapsReveal user intentions and
implied connections
RESPOND
TRACK & MONITOR PLAN
COMMUNITY
COLLABORATE
NOTIFICATIONS
PROACTIVE RECOMMENDATIONS
REMINDERS
PLAN WORKT&M WORK AND PEOPLE
MY PROFILE
OTHER PROFILES
POSTS ON TASKS
COMMENT ON POSTS
LIKE POSTS
MESSAGES
FIND PEOPLE
REQUESTS
REQUESTS (OS, Swap, TO etc.)
DESIGN - UX CONCEPT

30. EXAMPLES
MAY 2013
PLAN
EFFECTIVELY
WORK
EFFICIENTLY
(Today)
COLLABORATE
INTELLIGENTLY
BELONG TO A
COMMUNITY
WHYWHEREWHO
IN OFFICE
ON THE MOVE
HOWARD
KRONOS MAKES
YOU MORE PRODUCTIVE
RESPOND
QUICKLY
WHYWHEREWHO
IN OFFICE
ON THE MOVE
HOWARD
KRONOS MAKES
YOU MORE PRODUCTIVE
scheduled?
accepted?
need cover?
WHAT
Monitor available
shifts
Sign-up for shift
Shifts swappedSend request
Check on schedule if
shifts can be taken
Check peers
to swap with
PLAN
EFFECTIVELY
Want shifts
Schedule updated
Want “Off”
Ask for time-off
decide when
& where
check weather,
schedule etc.
Submit time-off
Find peer to cover Send request
accepted?
Want to change my
availability on day
Check the availability
on record
Change availability
accepted?
Send request
What to do on day Check schedule Check Tasks Check details
on task
Who is
working on day
Check group
schedule
See peer
schedule
yes
no
yes
no
yes
yes
yes
WHAT WHERE & WHEN WHY WHO HOW
Outcome of analysis after
Contextual Inquiries
Proposal for a new way of
performing a task
Audience: Designers
Subject: Howard (Persona)
Process MapsDescribe the sequence of
main tasks
DESIGN - USER JOURNEY

31. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
More than 20% of cust. use
regular phones
Suggest a solution for regu-
lar phone users
Audience: All stakeholders
Subject: Manufacturing emp
Storyboarding and illustra-
tions
Describe transactional text
messaging flow
DESIGN - SOLUTION DEFINITION

32. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
one-on-one customer inter-
views
Suggest the integration of
social features into Kronos
Audience: Customers
Subject: Social features
Storyboarding and illustra-
tions
Get feedback on the useful-
ness of social features
EVALUATE - DESIGN PROBLEM STATEMENT

33. EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOW
Survey for customers from
different ind.
Identify opportunities to
improve “Search”
Audience: PM & Designers
Subject: Search engines
Bubble chart, Bar ChartsReveal “Search” usage on
the Web
EVALUATE - USAGE SURVEY RESULTS (fake data)
Desktop
70%
E-Commerce
sites
Email
60% 45%
Calendar
30%
Using search frequently
70%
50%
Likelihood to search
Novice users
Expert users
Easiness to search in WFC
UC3 UC4 UC5 UC7 UC2 UC8 UC1 UC6
100%
75%
50%
25%
0%
80%
75%
70%
65%
55%
55%
45%
27%

34. LESSONS LEARNED
MAY 2013
DESIGN the visualization as you design any product
KNOW THE MESSAGE you want to convey and why you want to
communicate it
KNOW YOUR TARGET AUDIENCE and tailor the visuals to their needs
KNOW WHO/WHAT THE MESSAGE IS ABOUT and use related metaphors
and visual language
TEST & ITERATE...You never get it right the first time
KEEP IT SIMPLE, you can always show more information effectively
FOLLOW THE VISUALIZATION GUIDELINES, they are widely tested
CREATIVITY CAN BE LEARNED, search and log your inspirations
USE TEMPLATES, the Web is full of them or create your own

35. REFERENCES
MAY 2013
DESIGN PRINCIPLES
Bhowmick,T. (2006). Building an Exploratory Visual Analysis Tool for Qualitative
Researchers. Proceedings of AutoCarto 2006.
Retrieved from: http://www.cartogis.org/docs/proceedings/2006/bhowmick.pdf
Few, S. (2004). Show me the Numbers: Designing Tables and Graphs to Enlighten.
Oakland, CA:Analytics Press.
Few, S. (2009). Now You See It: Simple Visualization Techniques for Quantitative
Analysis. Oakland, CA: Analytics Press.
Slone, D. (2009).Visualizing Qualitative Information.
The Qualitative Report, 14(3). 489-497.
Tufte, E. (2006). The Visual Display of Quantitative Information.
Cheshire, CT: Graphics Press.
Yau, N. (2011). Visualize This:The FlowingData Guide to Design,Visualization,
and Statistics. Indianapolis, IN:Wiley.

36. REFERENCES
MAY 2013
Visual.ly - http://visual.ly/
PLACES TO GET INSPIRED
Flowing Data - http://flowingdata.com/
Information is beautiful award - http://www.informationisbeautifulawards.com/
Periscopic - http://www.periscopic.com/ - Kim Rees
New York Times - Keywords: “new york times visualization”,
“new york times infographics”
Hint - http://hint.fm/
Fernanda Viegas, Martin Wattenberg
Junk Chart (for bad examples)- http://junkcharts.typepad.com/

37. REFERENCES
MAY 2013
Visual.ly - http://visual.ly/
TOOLS AND TEMPLATES
Free infographics templates
http://tailevents.com/technology/10-free-psd-infographics-templates/
Good infographics templates (not free)
http://piktochart.com/
Many Eyes - http://www-958.ibm.com/software/analytics/manyeyes/

38. QUESTIONS?
THANK YOU
MAY 2013
dory.azar@kronos.com | meng.yang@kronos.com

39. APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF PROXIMITY

40. APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF SIMILARITY
COLOR SHAPE
INTENSITY AREA

41. APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF CLOSURE

42. APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT
LAW OF CONTINUITY
& COMMON FATE
LAW OF SYMMETRY
[ ]{ }[ ]

43. APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF PAST EXPERIENCE

44. APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF PAST EXPERIENCE

45. APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GRAPHICAL VOCABULARY
NOMINAL (CATEGORIES)
Households, Individuals, Family
etc...
LOW ACCURACY HIGH
ORDINAL (RANKING) QUANTITATIVE (NUMBERS)
Color Shape