sketching for engineering_23oct2014

62
sketching for engineers megan williams - @hellomeganw 1

Upload: hellomegan

Post on 02-Jul-2015

210 views

Category:

Design


0 download

DESCRIPTION

Sketching for Engineers - Code Camp Silicon Valley session Oct 12th, 2014

TRANSCRIPT

Page 1: Sketching for engineering_23oct2014

sketching for engineersmegan williams - @hellomeganw

1

Page 2: Sketching for engineering_23oct2014

2

Page 3: Sketching for engineering_23oct2014

Agenda

Warm up: put pencil to paper

Intro: sketching at work

Sketching as a tool: enhance communication

Methods of sketching: practical application

Resources: beyond this session

3

Page 4: Sketching for engineering_23oct2014

Warm up

Get into groups of 4

Sketch!

a place, a thing, a person, and a way to pay

Create a story

Share your story

4

Page 5: Sketching for engineering_23oct2014

5

Page 6: Sketching for engineering_23oct2014

6

Page 7: Sketching for engineering_23oct2014

7

Page 8: Sketching for engineering_23oct2014

Requirements

Design

Build

Q&A

Ship

Waterfall Design Process

8

Page 9: Sketching for engineering_23oct2014

Lean UX Process

Iteration 1 Iteration 2

9

Page 10: Sketching for engineering_23oct2014

10

Page 11: Sketching for engineering_23oct2014

11

Page 12: Sketching for engineering_23oct2014

12

Page 13: Sketching for engineering_23oct2014

13

Page 14: Sketching for engineering_23oct2014

14

Page 15: Sketching for engineering_23oct2014

Sketching at PayPal

15

Page 16: Sketching for engineering_23oct2014

16

Page 17: Sketching for engineering_23oct2014

17

Page 18: Sketching for engineering_23oct2014

Why sketch?

Better empathetic connection

1 picture = 1,000 words

Bridges communication with Designers

Establishes mutual understanding

18

Page 19: Sketching for engineering_23oct2014

19

Page 20: Sketching for engineering_23oct2014

20

Page 21: Sketching for engineering_23oct2014

Sketching as a

communication tool

21

Page 22: Sketching for engineering_23oct2014

Direct

High assertiveness

Low assertiveness

Tells

Asks

Low

expre

ssiv

eness

Hig

h e

xpre

ssiv

eness

Hid

es e

motions

Dis

pla

ys e

motio

ns

Spirited

ConsiderateSystematic

COMMUNICATION STYLES MATRIX BY DR. EILEEN RUSSO

22

Page 23: Sketching for engineering_23oct2014

Direct Spirited

ConsiderateSystematic

COMMUNICATION STYLES MATRIX BY DR. EILEEN RUSSO

“let’s get the

job done now”

“let’s talk about

big ideas”

“let’s talk about the

impact to our users”

“let’s do it right

the first time”

empathy drivenfacts driven

idea drivenresults driven

23

Page 24: Sketching for engineering_23oct2014

Collaboration with sketching

24

Page 25: Sketching for engineering_23oct2014

25

Page 26: Sketching for engineering_23oct2014

Lean UX Process

Iteration 1 Iteration 2

26

Page 27: Sketching for engineering_23oct2014

27

Page 28: Sketching for engineering_23oct2014

Problem statements

28

Page 29: Sketching for engineering_23oct2014

29

Page 30: Sketching for engineering_23oct2014

http://101fundraising.org/wp-content/uploads/2013/08/customer-journey.png30

Page 31: Sketching for engineering_23oct2014

Activity

Get into groups of 2

Sketch!

Take turns drawing an emotion

31

Page 32: Sketching for engineering_23oct2014

http://101fundraising.org/wp-content/uploads/2013/08/customer-journey.png32

Page 33: Sketching for engineering_23oct2014

33

Page 34: Sketching for engineering_23oct2014

34

Page 35: Sketching for engineering_23oct2014

35

Page 36: Sketching for engineering_23oct2014

36

Page 37: Sketching for engineering_23oct2014

Common UI elements

37

Page 38: Sketching for engineering_23oct2014

38

Page 39: Sketching for engineering_23oct2014

39

Page 40: Sketching for engineering_23oct2014

40

Page 41: Sketching for engineering_23oct2014

Flows and progress

41

Page 42: Sketching for engineering_23oct2014

42

Page 43: Sketching for engineering_23oct2014

Visual note taking

43

Page 44: Sketching for engineering_23oct2014

44

Page 45: Sketching for engineering_23oct2014

Paper prototyping

45

Page 46: Sketching for engineering_23oct2014

46

Page 47: Sketching for engineering_23oct2014

47

Page 48: Sketching for engineering_23oct2014

Mutual learning

48

Page 49: Sketching for engineering_23oct2014

49

http://appendto.com/2014/03/replacing-common-ui-icons-with-css-2/

Page 50: Sketching for engineering_23oct2014

50

Page 51: Sketching for engineering_23oct2014

Practice

51

Page 52: Sketching for engineering_23oct2014

52

Page 53: Sketching for engineering_23oct2014

thenounproject.com

53

Page 54: Sketching for engineering_23oct2014

54

Mail Chimp pattern library

Page 55: Sketching for engineering_23oct2014

55

Page 56: Sketching for engineering_23oct2014

56

Page 57: Sketching for engineering_23oct2014

57

Page 58: Sketching for engineering_23oct2014

58

Page 59: Sketching for engineering_23oct2014

Sketching + Engineers

Dive in with common UI elements

Use containers to organize

Connect with emotions

Use problem statements

Build your toolbox

Practice often!

59

Page 60: Sketching for engineering_23oct2014

60

Page 61: Sketching for engineering_23oct2014

thank you.

[email protected]

hellomeganw

61