sketching for engineering_23oct2014

Post on 02-Jul-2015

210 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

sketching for engineersmegan williams - @hellomeganw

1

2

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

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

5

6

7

Requirements

Design

Build

Q&A

Ship

Waterfall Design Process

8

Lean UX Process

Iteration 1 Iteration 2

9

10

11

12

13

14

Sketching at PayPal

15

16

17

Why sketch?

Better empathetic connection

1 picture = 1,000 words

Bridges communication with Designers

Establishes mutual understanding

18

19

20

Sketching as a

communication tool

21

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

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

Collaboration with sketching

24

25

Lean UX Process

Iteration 1 Iteration 2

26

27

Problem statements

28

29

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

Activity

Get into groups of 2

Sketch!

Take turns drawing an emotion

31

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

33

34

35

36

Common UI elements

37

38

39

40

Flows and progress

41

42

Visual note taking

43

44

Paper prototyping

45

46

47

Mutual learning

48

49

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

50

Practice

51

52

thenounproject.com

53

54

Mail Chimp pattern library

55

56

57

58

Sketching + Engineers

Dive in with common UI elements

Use containers to organize

Connect with emotions

Use problem statements

Build your toolbox

Practice often!

59

60

thank you.

megan@hellomegan.com

hellomeganw

61

top related