make it better
Putting Design to WorkDesign Thinking, from theory to practice
make it better
Quick Poll
putting design to work tweet @skotcarruth
prepared for the easton technology leadership program
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
make it better
Why should we care about design?
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
make it better
What is Design?
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
make it better
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
What is UX?
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
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
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
make it better
tweet @skotcarruth
Everything.
created by Information Architects Inc.
putting design to work
prepared for the easton technology leadership program
make it better
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
make it better
UX: aka “Design”
40s 50s 60s 80s70s
tweet @skotcarruth
90s 00s
Human Factors
Ergonomics
Human-Computer In
teraction
Cooperative D
esign
Design Thinking
Interaction D
esign
UX/CX
putting design to work
prepared for the easton technology leadership program
make it better
So, what is it?
tweet @skotcarruth
Design is:
1) a framework for problem solving2) a set of tools for problem solving
putting design to work
prepared for the easton technology leadership program
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
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
make it better
Design Process
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
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
make it better
Design Thinking
tweet @skotcarruthputting design to work
prepared for the easton technology leadership program
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
make it better
Empathize
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
I am not the user.
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
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
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
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
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
make it better
Or, having a genuine conversation with a human.
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Problem Space: Food Technology: Mobile App
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
make it better
Analyze Data
tweet @skotcarruth
Affinity Mapping
prepared for the easton technology leadership program
putting design to work
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
make it better
Personas
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
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
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
make it better
Presentations
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Define
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Problem Statements
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
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
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
make it better
Ideate
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
How To Sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
How to sketch
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
6-ups
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Example: Product Design
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Example: Interface
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Example: Poster
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Example: Storyboard
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Design Studio
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
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
make it better
Prototype
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
make it better
Task Analysis
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
make it better
Hierarchical Task Analysis
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
make it better
Paper Prototyping
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
make it better
Paper Prototyping
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
make it better
Test
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
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
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
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
make it better
Summary
tweet @skotcarruth
prepared for the easton technology leadership program
putting design to work
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
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
make it better
Questions?
prepared for the easton technology leadership program
putting design to work tweet @skotcarruth
Top Related