But Why? Designing For Strategy

by Michelle Schulp Hunt

Slide 1

Slide 1 text

@marktimemedia Designing For Strategy BUT WHY ?

Slide 2

Slide 2 text

@marktimemedia I Design THINGS. USUALLY WORDPRESS. HI, I’M MICHELLE.

Slide 3

Slide 3 text

@marktimemedia WHY DO PEOPLE VISIT WEBSITES?

Slide 4

Slide 4 text

@marktimemedia VERB A word that represents an action or state of being

Slide 5

Slide 5 text

@marktimemedia BUY JOIN READ DOWNLOAD CONTACT DONATE SUBSCRIBE SIGN UP SHARE COMMENT LIKE

Slide 6

Slide 6 text

@marktimemedia WHY ARE PEOPLE VISITING YOUR WEBSITE?

Slide 7

Slide 7 text

@marktimemedia Your website has a SINGLE PRIMARY VERB

Slide 8

Slide 8 text

@marktimemedia YOUR PRIMARY WIN

Slide 9

Slide 9 text

@marktimemedia Design should SUPPORT YOUR VERB

Slide 10

Slide 10 text

@marktimemedia MAKE IT PAINLESS (or, dare we say, delightful)

Slide 11

Slide 11 text

@marktimemedia THE ZERO INTERFACE DESIGN IDEAL:

Slide 12

Slide 12 text

@marktimemedia EASY & FRICTIONLESS Design is

Slide 13

Slide 13 text

@marktimemedia CLEAR CONTEXT Design is

Slide 14

Slide 14 text

@marktimemedia DIRECTED PATH Design is

Slide 15

Slide 15 text

@marktimemedia CONSISTENCY & PATTERNS Design is

Slide 16

Slide 16 text

@marktimemedia

Slide 17

Slide 17 text

@marktimemedia

Slide 18

Slide 18 text

@marktimemedia

Slide 19

Slide 19 text

@marktimemedia

Slide 20

Slide 20 text

@marktimemedia FORMS ARE A BARRIER

Slide 21

Slide 21 text

@marktimemedia BAD FORMS COST MONEY https://medium.com/uie-brain-sparks/the-300-million-button-76b566ae5f73

Slide 22

Slide 22 text

@marktimemedia "The best way to speed up that process is not to ask the question at all.” –Luke W.

Slide 23

Slide 23 text

@marktimemedia GOOD FORM DESIGN IS ABOUT BALANCE

Slide 24

Slide 24 text

@marktimemedia MINIMAL FIELDS

Slide 25

Slide 25 text

@marktimemedia CONTEXTUAL ERRORS

Slide 26

Slide 26 text

@marktimemedia DELIBERATE WORKFLOW

Slide 27

Slide 27 text

@marktimemedia CLEAR LABELING

Slide 28

Slide 28 text

@marktimemedia FOLLOW CONVENTION

Slide 29

Slide 29 text

@marktimemedia AFFORDANCES & CLICKABILITY

Slide 30

Slide 30 text

@marktimemedia BAD DESIGN PATTERNS

Slide 31

Slide 31 text

@marktimemedia CONFLICTING CALLS TO ACTION

Slide 32

Slide 32 text

@marktimemedia UNCERTAINTY

Slide 33

Slide 33 text

@marktimemedia COLLECTING TOO MUCH INFO

Slide 34

Slide 34 text

@marktimemedia FORCED ACCOUNT SIGNUPS

Slide 35

Slide 35 text

@marktimemedia ANTI-PATTERNS: OBSCURITY

Slide 36

Slide 36 text

@marktimemedia SPECIFIC VERB PATTERNS: BUY JOIN DONATE

Slide 37

Slide 37 text

@marktimemedia BUY The win: Complete purchase of product Call to action: Buy vs Add To Cart “The form couldn’t come at a worse time. You want to buy the items you’ve found. The store wants to close the sale so it can make money. Standing between both your goals is a form and as we know—no one likes forms.” - Luke W

Slide 38

Slide 38 text

@marktimemedia BUY Primary info to communicate: •  Price •  Quantity Minimum info to collect: •  Name •  Billing Address •  Shipping Information? •  Credit Card/Payment Information Secondary messaging: •  Photos •  Sizes/Colors/Options

Slide 39

Slide 39 text

@marktimemedia BUY Barriers: •  Long form ﬁelds for payment info •  Security of ﬁnancial info •  Unsure of making purchase Solutions: •  Wish lists/save for later •  Hook up with PayPal or other third party •  One-click purchase if you have an account

Slide 40

Slide 40 text

@marktimemedia AMAZON

Slide 41

Slide 41 text

@marktimemedia AMAZON

Slide 42

Slide 42 text

@marktimemedia AMAZON

Slide 43

Slide 43 text

@marktimemedia AMAZON

Slide 44

Slide 44 text

@marktimemedia COTTON BUREAU

Slide 45

Slide 45 text

@marktimemedia COTTON BUREAU

Slide 46

Slide 46 text

@marktimemedia COTTON BUREAU

Slide 47

Slide 47 text

@marktimemedia COTTON BUREAU

Slide 48

Slide 48 text

@marktimemedia WOOCOMMERCE

Slide 49

Slide 49 text

@marktimemedia WOOCOMMERCE

Slide 50

Slide 50 text

@marktimemedia WOOCOMMERCE

Slide 51

Slide 51 text

@marktimemedia WOOCOMMERCE

Slide 52

Slide 52 text

@marktimemedia JOIN The win: Complete & submit information Call to action: Sign Up vs Create Account vs Join “Just about everywhere people want to participate in social interactions online, forms get in the way. And since participation—number of members, number of activities completed, etc.—is how most social applications thrive, the organizations running these sites rely on forms for business success.” - Luke W

Slide 53

Slide 53 text

@marktimemedia JOIN Primary info to communicate: •  Elevator pitch beneﬁts message Minimum info to collect: •  Email •  Name/Username? Secondary messaging: •  Features •  Data/Numbers

Slide 54

Slide 54 text

@marktimemedia JOIN Barriers & Solutions: •  Lots of potential proﬁle ﬁelds •  Only collect minimum for signup

Slide 55

Slide 55 text

@marktimemedia FACEBOOK

Slide 56

Slide 56 text

@marktimemedia SLACK

Slide 57

Slide 57 text

@marktimemedia SLACK

Slide 58

Slide 58 text

@marktimemedia PEEPSO

Slide 59

Slide 59 text

@marktimemedia PEEPSO

Slide 60

Slide 60 text

@marktimemedia DONATE The win: Complete collection of money Call to action: Donate

Slide 61

Slide 61 text

@marktimemedia DONATE Primary info to communicate: •  What are you donating to Minimum info to collect: •  Name •  Billing Address •  Credit Card/Payment Info Secondary messaging: •  Emotional appeal •  Speciﬁc results/numbers/stats •  Any gifts received •  Duration of donation period

Slide 62

Slide 62 text

@marktimemedia DONATE Barriers & Solutions: •  Uncertain where money is going •  Dollar amount levels proportional to gifts, proportional to ask •  “Decisions not options” with high dollar amounts •  Anchoring and frame of reference

Slide 63

Slide 63 text

@marktimemedia RED CROSS

Slide 64

Slide 64 text

@marktimemedia RED CROSS

Slide 65

Slide 65 text

@marktimemedia GOFUNDME

Slide 66

Slide 66 text

@marktimemedia GOFUNDME

Slide 67

Slide 67 text

@marktimemedia GOFUNDME

Slide 68

Slide 68 text

@marktimemedia GIVE

Slide 69

Slide 69 text

@marktimemedia GIVE

Slide 70

Slide 70 text

@marktimemedia QUESTIONS? Michelle Schulp [email protected] @marktimemedia bit.ly/design-for-strategy