UCLA Anderson Design Thinking Workshop

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


• 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?



make it better

What is Design?



make it better



What is UX?

make it better

What most people think UX Design is:



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

http://helloerik.com/ux-is-not-ui

make it better

What UX Designers think UX Design is:



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

http://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



make it better

tweet @skotcarruth

Everything.

created by Information Architects Inc.

putting design to work


make it better



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



make it better

So, what is it?

tweet @skotcarruth

Design is:

1) a framework for problem solving2) a set of tools for problem solving



make it better

…to be applied to almost anything

• MarComm

• Products

• Services

• Business Process

• Organizational Structures



make it better

…and at any level of detail

• Conceptual

• Prototype

• MVP

• Single Feature

• Microinteraction



make it better

Design Process



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



http://www.apple.com

http://www.designcouncil.org.uk/sites/default/files/asset/document/ElevenLessons_Design_Council%20%282%29.pdf

make it better

Design Thinking



make it better

Design Thinking

Empathize Define Ideate TestPrototype


diverge converge diverge converge diverge


make it better

Empathize

tweet @skotcarruth



make it better

I am not the user.

tweet @skotcarruth



make it better

“It’s all about People, their Activities, and the

Context of those activities.” — Stephen P. Anderson

tweet @skotcarruth



make it better

Internal Factors (“People”)

• Personal History

• Mood

• Culture

• Education

• Motivations

tweet @skotcarruth



make it better

External Factors (“Context”)

• Location

• Distractions

• Devices

• Relationships (objects and people)

• Relationships (people and people)

tweet @skotcarruth



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



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



make it better

Or, having a genuine conversation with a human.

tweet @skotcarruth



make it better

Problem Space: Food Technology: Mobile App

tweet @skotcarruth



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



make it better

Analyze Data

tweet @skotcarruth

Affinity Mapping



make it better

Analyze Data

5 mins Arrange your post-its together, grouping similar items

tweet @skotcarruth



make it better

Personas

tweet @skotcarruth



make it better

via http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience

tweet @skotcarruth



http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience

make it better

Basic Format

Demographic Info, Sketch

Details, Psychographics, Backstory

Activities, Habits Pain Points

tweet @skotcarruth



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



make it better

Presentations

tweet @skotcarruth



make it better

Define

tweet @skotcarruth



make it better

Problem Statements

tweet @skotcarruth



make it better

Problem statement

tweet @skotcarruth

_________________________ needs a way to

______________________________________

Surprisingly/because/but… _____________________________________.

TYPE OF USER

USER’S NEED

INSIGHT



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



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



make it better

Ideate

tweet @skotcarruth



make it better

How To Sketch

tweet @skotcarruth



make it better

Good news

tweet @skotcarruth

• Everyone can sketch

• A sketch can look terrible and still be effective



make it better

How to sketch

tweet @skotcarruth



make it better

6-ups

tweet @skotcarruth



make it better

Example: Product Design

tweet @skotcarruth



make it better

Example: Interface

tweet @skotcarruth



make it better

Example: Poster

tweet @skotcarruth



make it better

Example: Storyboard

tweet @skotcarruth



make it better

Design Studio

tweet @skotcarruth



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



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



make it better

Prototype

tweet @skotcarruth



make it better

Many ways to prototype

• Paper (static)

• Paper (interactive)

• Static comps

• Click-through comps

• Functional wires

tweet @skotcarruth



make it better

Task Analysis

tweet @skotcarruth



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



make it better

Hierarchical Task Analysis

tweet @skotcarruth



make it better

tweet @skotcarruth



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



make it better

Paper Prototyping

tweet @skotcarruth



make it better

Paper Prototyping

tweet @skotcarruth



https://www.youtube.com/watch?v=GrV2SZuRPv0

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



make it better

Test

tweet @skotcarruth



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



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



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



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



make it better

Summary

tweet @skotcarruth



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



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



http://www.smashingmagazine.com/2014/08/06/a-closer-look-at-personas-part-1/

https://vimeo.com/37861987

make it better

Questions?



UCLA Anderson Design Thinking Workshop

Design

Transcript of UCLA Anderson Design Thinking Workshop