Slides from a 3-hour workshop created to introduce Design Thinking to MBA students and demonstrate how to make design applicable to various aspects of a business.

1. make it better
Putting Design to Work
Design Thinking, from theory to practice

2. make it better
Quick Poll
putting design to work tweet @skotcarruth
prepared for the easton technology leadership program

3. make it better
Who’s this guy?
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
• Web design and development since 1996
• Founded Philosophie in 2008
• Worked on 200+ web/mobile projects
• UXD Instructor, UXDi Curriculum Fellow @ GA

4. make it better
Why should we care
about design?
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

5. make it better
What is Design?
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

6. make it better
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
What is UX?

7. make it better
What most people think UX Design is:
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
Field research
Face to face interviewing
Creation and administering of tests
Gathering, organizing, and presenting
statistics
Documentation of personas and
findings
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information Architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copy writing
Presentation and speaking
Working tightly with programmers
Brainstorm coordination
Company culture evangelism
Communication to stakeholders
via helloerik.com/ux-is-not-ui

8. make it better
What UX Designers think UX Design is:
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
Field research
Face to face interviewing
Creation and administering of tests
Gathering, organizing, and presenting
statistics
Documentation of personas and
findings
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information Architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copywriting
Presentation and speaking
Working tightly with programmers
Brainstorm coordination
Company culture evangelism
Communication to stakeholders
via helloerik.com/ux-is-not-ui

9. make it better
“User experience encompasses
all aspects of the end-user’s
interaction with the company,
its services, and its products.”
— Donald Norman
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

10. make it better
tweet @skotcarruth
Everything.
created by Information Architects Inc.
putting design to work
prepared for the easton technology leadership program

11. make it better
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

12. make it better
UX: aka “Design”
40s 50s 60s 80s70s
tweet @skotcarruth
90s 00s
Hum
an
Factors
Ergonom
ics
Hum
an-Com
puterInteraction
Cooperative
DesignDesign
Thinking
Interaction
DesignUX/CX
putting design to work
prepared for the easton technology leadership program

13. make it better
So, what is it?
tweet @skotcarruth
Design is:
1) a framework for problem solving
2) a set of tools for problem solving
putting design to work
prepared for the easton technology leadership program

14. make it better
…to be applied to almost anything
• MarComm
• Products
• Services
• Business Process
• Organizational Structures
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

15. make it better
…and at any level of detail
• Conceptual
• Prototype
• MVP
• Single Feature
• Microinteraction
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

16. make it better
Design Process
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

17. make it better
The Double-Diamond Pattern
Discover Define Design DeliverDevelop
diverge converge diverge converge
tweet @skotcarruth
via Design Council: http://www.designcouncil.org.uk/sites/default/files/asset/document/ElevenLessons_Design_Council%20%282%29.pdf
putting design to work
prepared for the easton technology leadership program

18. make it better
Design Thinking
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program

19. make it better
Design Thinking
Empathize Define Ideate TestPrototype
putting design to work tweet @skotcarruth
diverge converge diverge converge diverge
prepared for the easton technology leadership program

20. make it better
Empathize
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

21. make it better
I am not the user.
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

22. make it better
“It’s all about People,
their Activities, and the
Context of those activities.”
— Stephen P. Anderson
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

23. make it better
Internal Factors (“People”)
• Personal History
• Mood
• Culture
• Education
• Motivations
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

24. make it better
External Factors (“Context”)
• Location
• Distractions
• Devices
• Relationships (objects and people)
• Relationships (people and people)
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

25. make it better
Goals and Tasks (“Activities”)
• What does the user want to accomplish?
• What tasks must the user complete to do so?
• How do people accomplish it now?
• What are their pain points?
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

26. make it better
How do we obtain that information?
• Secondary research
• Contextual inquiry (field study)
• User interviews
• Focus groups
• Diary studies
• Card sorting
• Analytics
• A/B testing
• Eye tracking
• Surveys
• …and many, many more
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

27. make it better
Or, having a genuine
conversation with a human.
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

28. make it better
Problem Space: Food
Technology: Mobile App
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

29. make it better
Interview People
4 mins Find a person (not the one sitting next to you) and interview him/her
to learn about their issues with food.
1 min Jot down as many relevant points as you can, one per post-it.
4 mins Switch
9 mins Repeat
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

30. make it better
Analyze Data
tweet @skotcarruth
Affinity Mapping
prepared for the easton technology leadership program
putting design to work

31. make it better
Analyze Data
5 mins Arrange your post-its together, grouping similar items
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

32. make it better
Personas
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

33. make it better
via http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

34. make it better
Basic Format
Demographic Info,
Sketch
Details, Psychographics,
Backstory
Activities, Habits Pain Points
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

35. make it better
Create a Persona
3 mins Sketch one persona each
1 mins Describe your persona to your partner
1 mins Switch
2 mins Combine or kill to create a final persona
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

36. make it better
Presentations
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

37. make it better
Define
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

38. make it better
Problem Statements
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

39. make it better
Problem statement
tweet @skotcarruth
_________________________ needs a way to
______________________________________
Surprisingly/because/but…
_____________________________________.
TYPE OF USER
USER’S NEED
INSIGHT
prepared for the easton technology leadership program
putting design to work

40. make it better
Create a problem statement
2 mins Write out one or two problem statements for your persona
1 min Decide on which you want to design for
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

41. make it better
Problem hypothesis
tweet @skotcarruth
We believe that ________________________
needs ________________________________.
We will know this is true if
_____________________________________.
TYPE OF USER
USER’S NEED
EVALUATION CRITERIA
prepared for the easton technology leadership program
putting design to work

42. make it better
Ideate
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

43. make it better
How To Sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

44. make it better
Good news
tweet @skotcarruth
• Everyone can sketch
• A sketch can look terrible and still be effective
prepared for the easton technology leadership program
putting design to work

45. make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

46. make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

47. make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

48. make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

49. make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

50. make it better
6-ups
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

51. make it better
Example: Product Design
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

52. make it better
Example: Interface
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

53. make it better
Example: Poster
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

54. make it better
Example: Storyboard
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

55. make it better
Design Studio
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

56. make it better
Design Studio: Diverge
5 mins Sketch 4–6 radically different ideas
2 mins Describe each idea to your partner
1 mins Obtain feedback from your partner (focus on the positive)
3 mins Switch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

57. make it better
Design Studio: Converge
5 mins Sketch 2–3 versions of your favorite concept
1 min Describe each idea to your partner
1 min Obtain feedback from your partner (focus on the positive)
2 mins Switch
1 min Decide on the idea you want to prototype for your persona
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

58. make it better
Prototype
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

59. make it better
Many ways to prototype
• Paper (static)
• Paper (interactive)
• Static comps
• Click-through comps
• Functional wires
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

60. make it better
Task Analysis
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

61. make it better
Hierarchical Task Analysis
1. Obtain beans
2. Are they ground?
1. If No, grind
3. Put ground beans in coffee maker
4. Turn on
5. Wait 7 minutes
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

62. make it better
Hierarchical Task Analysis
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

63. make it better
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

64. make it better
Perform a task analysis
1 min Choose a task associated with the problem you are solving
5 mins Break it down, thinking about all of the logical branches
5 mins Sketch rough interfaces associated with each step of the workflow
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

65. make it better
Paper Prototyping
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

66. make it better
Paper Prototyping
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

67. make it better
Create a prototype
10 mins Refine your UI sketches for the task so they are all mobile app size
5 mins Cut them out and label the backs (with pencil)
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

68. make it better
Test
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

69. make it better
We test to gauge:
• Comprehension (do you understand this?)
• Perception and opinions (how does this make you feel?)
• Usability (can you use this effectively?)
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

70. make it better
What is usability testing?
“Watching people try to use what
you’re creating…with the intention of
(a) making it easier for people to use or
(b) proving that it is easy to use.”
— Steve Krug
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

71. make it better
Conducting a usability test
1. Decide what you want to know
2. Carefully craft your questions
3. Make sure your prototype is in order
4. Ensure the participant knows that you aren’t testing them
5. Listen and observe; prod gently
6. Take notes (and record!)
7. Analyze results
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

72. make it better
Run a usability test
5 mins Come up with your questions
1 min Find another group
5 mins Run through one test
5 mins Switch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

73. make it better
Summary
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

74. make it better
Patterns to employ design
• Talk Listen to users
• Immerse yourself in qualitative data
• Timeboxing
• Diverge-converge
• Think visually
• Encourage diverse voices and opinions, and be positive
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

75. make it better
Further reading/watching
• Rocket Surgery Made Easy, Steve Krug.
• A Closer Look At Personas: What They Are And How They Work
• Todd Zaki Warfel on Design Studio
• Design of Everyday Things, Don Norman
• About Face 3, Alan Cooper
• Lean UX, Jeff Gothelf
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work

76. make it better
Questions?
prepared for the easton technology leadership program
putting design to work tweet @skotcarruth