Presentation at the St. Louis regional conference of the Association for Talent Development.

1. Pathways to a
Positive Learner Experience
Danielle Cooley @dgcooley 30 October 2015
1

2. We’ll talk about:
2
Defining the
damn thing
The power of
iteration
A design iteration
technique
An evaluation
iteration
technique
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

3. So – Learner Experience?
3
User
Experience
(UX)
Instructional
Design
(ID)
Learner
Experience
(LXD)
Modified from hOp://extensionengine.com/lxd-­‐‑10-­‐‑things-­‐‑to-­‐‑know-­‐‑about-­‐‑learner-­‐‑experience-­‐‑design
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

4. 4
WhatisUX?
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

5. 5
Google Image Search – 11 July 2015
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

6. ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
6

7. 7
ISO9241
Theeffectiveness,efficiency,and
satisfaction withwhichspecifiedusers
achievespecifiedgoalsinparticular
environments.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

8. 8
Visual
Design
Interaction
Design
Information
Architecture
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

9. 9
Visual
Design
Interaction
Design
Information
Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

10. ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
10
Visual
Design
Interaction
Design
Information
Architecture
Content Strategy
User Research
• Who will use the product?
• Any disabilities?
• What incomes, ages, and education levels?
• What are their pain points? End goals?

11. 11
Visual
Design
Interaction
Design
Information
Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• What features and functions are necessary?
• What pages do we need?
• Any photos? Videos? Copy? Product reviews?
• Who will create this content? Govern it?

12. 12
Visual
Design
Interaction
Design
Information
Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• What is the best navigation structure?
• How should individual screens be laid out?

13. 13
Visual
Design
Interaction
Design
Information
Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• Which controls should be used for navigation?
Selections? Actions?
• Dropdowns vs. checkboxes?
• What about microinteractions?

14. 14
Visual
Design
Interaction
Design
Information
Architecture
Content Strategy
User Research
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
• What color scheme is most appropriate?
• What about typography?
• Will there be any iconography? What style?

15. Visual
Design
Interaction
Design
Information
Architecture
Content Strategy
User Research
15
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

16. ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
16

17. Iteration
17
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

18. 18
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

19. 19
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

20. Design Studio:
Peregrine Edition
Peregrine falcon image via flickr user mikebaird
20
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

21. Iterative = good.
Fast = good.
Iterative AND fast?
21
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

22. Design Studio
• 6-8 drawings
• 5 minutes to draw
• 2 minutes to present
• 3 minutes to critique
• Then team up. As pairs, do it again.
(Add an extra minute or so to presentation & critique
for each iteration.)
• Lather, rinse, repeat, until you can’t pair up anymore.
22
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

23. Design Studio
• 6-8 4-6 drawings
• 5 4 minutes to draw
• 2 1 minutes to present
• 3 2 minutes to critique
• Then team up. As pairs, do it again.
(Add an extra minute 30 seconds or so to
presentation & critique for each iteration.)
• Lather, rinse, repeat, until you can’t pair up anymore.
23
Peregrine Edition
NOTE! We’ve shortened the process only because our time
today is so short. In real life, do the full version.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

24. The Rules
Sketching
• Always start with the persona &
requirements.
• Strive for quantity.
• Use only enough detail to convey
the idea.
• Defer judgment.
• Use your imagination.
• Seek new combinations.
• Have FUN!
Critiquing
• Focus on how the design does or
does not fit the scenario or
persona. (Your own likes/dislikes
don’t matter.)
• Ask clarifying questions as
needed.
• Presenters, try to clarify without
being defensive.
• Save suggestions for your next
sketching cycle.
24
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

25. Warmup
25
Straight
Line
Circle Triangle Square
Arrow Cloud Rectangle Face
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

26. Mom’s Recipes
26
Mom is in her 60s and is a great baker – and she has
dozens of recipes that she has perfected over the years
that wants to pass on to her grandsons.
A recent flood in the basement almost destroyed her
cherished recipe book. After carefully drying out each
page, she can still read them but no one else could
decipher it. She needs to rewrite them all down.
Can you help my Mom?
Mom’s Pain Points:
-­ She doesn’t like typing
-­ Intimidated by “technology stuff”
-­ Too many instructions for things
Mom Likes:
-­ Keeping things easy
-­ Following recipes exactly
-­ Having things printed if she can
-­ Telling stories about baking
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

27. 27
GO!Sack race starting line image via flickr user jiggot
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

28. Review
28
IMPORTANT: Were this
‘real’ we would need
to leave today with
specific marching
orders on what we
need to build.
ü Identify and discuss
common themes,
patterns, components
that emerged.
ü Prioritize features
ü Discuss / document
open questions and
assumptions.
ü Note and collect
these along with
sketches generated.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley

29. So we have a design…
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
29

30. Evaluate it!
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
30
(There are lots of ways to do this!)

31. About the 3x3 Method
• ~ 2-­‐‑3 low-­‐‑fidelity prototypes (clickable wireframes,
typically), each expressing a unique approach to the
solution, are created.
• Each prototype is ~ 3 screens deep and reflects the same
key tasks.
• The prototypes are then iteratively usability tested and
refined.
• The result is a single high-­‐‑level conceptual model of the
solution’s UI.
• Directly observing end users in this ma=er helps
ensure the final product will be accepted and adopted.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
31

32. ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
32
Pre-­‐‑
testing
Day 1
Day 2
Day 3
Day 4
Day 5
Post-­‐‑
testing
Develop-­‐‑
ment of 2-­‐‑3
prototypes
Participant
recruiting
Logistics
planning
Three
represen-­‐‑
tative end
users
evaluate the
prototypes
Prototypes
are refined
and usually
narrowed to
fewer
versions
Three
represen-­‐‑
tative end
users
evaluate the
prototypes
Prototypes
are refined
and usually
narrowed to
fewer
versions
Three
represen-­‐‑
tative end
users
evaluate the
prototypes
Prototype is
refined a
final time to
add polish &
annotation



33. ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
33
Pre-­‐‑
testing
Day 1
Day 2
Day 3
Day 4
Day 5
Post-­‐‑
testing
Develop-­‐‑
ment of 2-­‐‑3
prototypes
Participant
recruiting
Logistics
planning
Three
represen-­‐‑
tative end
users
evaluate the
prototypes
Prototypes
are refined
and usually
narrowed to
fewer
versions
Three
represen-­‐‑
tative end
users
evaluate the
prototypes
Prototypes
are refined
and usually
narrowed to
fewer
versions
Three
represen-­‐‑
tative end
users
evaluate the
prototypes
Prototype is
refined a
final time to
add polish &
annotation



34. Be quiet!
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
34

35. ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
35

36. Check your
biases.
36

37. Practice.
Practice.
Practice.
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
37

38. ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
38

39. About Me
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley
39
danielle@dgcooley.com
@dgcooley
15 years as a UX Specialist
BE, Biomedical & Electrical Engineering
Vanderbilt University
MS, Human Factors in Information Design
Bentley University
hOp://linkedin.com/in/dgcooley
Selected Work

40. 40
ATD Learn STL 2015 Pathways to a Positive Learner Experience @dgcooley