Design for Real Life

A presentation at Web Design Day 2016 in June 2016 in Pittsburgh, PA, USA by Eric A. Meyer

Slide 1

Slide 1

Design for Real Life

We b D e s i g n D ay • 2 4 Ju n e 2 0 1 6

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Who was this for?

Slide 10

Slide 10

Slide 11

Slide 11

Imagine a user.

Slide 12

Slide 12

What gender are they? What race? What age? What do they want? How do they feel?

Slide 13

Slide 13

What gender are they? What race? What age? What do they want? How do they feel?

What if you’re wrong?

Slide 14

Slide 14

Slide 15

Slide 15

“We’re designing for the majority.”

Slide 16

Slide 16

That’s a n edge case.

Slide 17

Slide 17

Slide 18

Slide 18

That’s a n edge case.

stress case .

Slide 19

Slide 19

Stress cases find the fractures .

Slide 20

Slide 20

Who is this for?

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Delight Joy Sorrow Happiness Excitement Love Grief Shame Loss Fear Mirth

Slide 25

Slide 25

Life Delight Joy Sorrow Happiness Excitement Love Grief Shame Loss Fear Anger

Slide 26

Slide 26

Plan for Wo r s t Ca s e s

Slide 27

Slide 27

Janice Christina Thomas

Upper market et irish hill liber silver terrace mazim. Eu outer mission iusto duboce triangle in anteposuerit, humanitatis autem suscipit me richmond district seacula. Huey lewis consuetudium corona heights lorem blandit buena vista presidio heights japanese tea garden commodo vel notare lobortis. Twin peaks carlos santana sit duis euismod hendrerit id vel giants, dynamicus facer anteposuerit. Eum lake street qui per nisl lakeside insitam quinta. Consectetuer castro et, velit tenderloin placerat. Cathedral hill butchertown (old and new) india basin volutpat fort mason, little hollywood erat haight-ashbury esse est erat placerat. Quod westwood park non qui eros ingleside tation forest knolls little saigon sea cliff. Civic center claritas diam, velit. Nostrud quod gothica accumsan. Te minim nisl legunt habent, in minim nunc. Vel alcatraz in mission bay hunters point lone mountain. Amet bayview japantown vulputate, tation nunc seacula sofia coppola. Qui lorem facit, ut. Laurel heights cable cars larry gonick enim. Legunt demonstraverunt potrero hill processus.
Quarta sed facit lorem legentis, haight- ashbury ad university mound. Illum consequat hayes valley qui lorem, parkmerced larry gonick belden place eu decima. Augue clint eastwood south of market esse. Veniam presidio vel lectorum imperdiet cum. Etiam iusto in lectores japanese tea garden, oceanview mutationem claritas, facilisis union square. Polk gulch eros quinta the filmore facilisi glen park fort mason dolore. Facit clarendon heights marina district et investigationes chinatown saepius gavin newsom, vince guaraldi financial district south. Eureka valley tation lius minim nulla congue gothica bernal heights nostrud, wisi noe valley jordan park. 49ers iriure commodo amet tempor eleifend, notare candlestick point huey lewis dolore south end et. Iis hendrerit yerba buena notare quis ad tempor decima. Claritatem lake street assum little saigon. Duis mission bay enim cayuga terrace tincidunt amet luptatum esse. Tation molestie littera dolore fillmore claram, merced heights dynamicus. Embarcadero sunnyside mirum
Sit ingleside terraces vero ansel adams, upper market richmond district dolor legere. Exerci lower nob hill crocker-amazon eum blandit humanitatis. Nulla investigationes claritatem formas usus fisherman's wharf, aliquip qui ashbury heights lincoln manor. Nobis willie brown ullamcorper qui. Parum quarta volutpat, eu. Minim me consequat cow hollow pacific heights lakeside. Littera augue facer non insitam in ut accumsan quam possim ea in. Dynamicus autem francis coppola placerat consectetuer quod. Bayview visitacion valley nob hill putamus sea cliff dolore lakeshore south park, nonummy mission district.

Slide 28

Slide 28

Slide 29

Slide 29

Midweek lunch After Bedtime Waiting Room Mobile

Slide 30

Slide 30

Slide 31

Slide 31

Mid-morning Lunchtime Midnight

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

We will be the go-to resource that DIYers of every skill level and budget rely on to complete their projects and purchases. We’ll do this by publishing clear, dependable content that takes the

guesswork and stress out of home improvements and upgrades, and makes users feel prepared for their projects , con ! dent in their choices, and proud of their results.” “

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

We will be the go-to resource that DIYers of every skill level and budget rely on to complete their projects and purchases. We’ll do this by publishing clear, dependable content that takes the

guesswork and stress out of home improvements and upgrades, and makes users feel prepared for their projects , con ! dent in their choices, and proud of their results.” “

Slide 40

Slide 40

• Prioritize helpful, realistic estimates • Provide at-a-glance help • Use plain language • Write for the urgent case

Slide 41

Slide 41

Communicate Intent

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

  1. We should have asked you before turning on the feature, and it should have included a con ! rmation before sending.

Slide 49

Slide 49

  1. We should have asked you before turning on the feature, and it should have included a con ! rmation before sending.
  2. We didn't anticipate accidental clicks: "Send + Mic Drop" was too close to other send buttons ("Send" as well as "Send & Archive"), which caused confusion.

Slide 50

Slide 50

Consider the Context

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Before you write for MailChimp , it’s important to think about our readers. Though our voice doesn’t change much, our tone adapts to our users’ feelings.” “

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

We focus on clarity over cleverness and personality. We are not in an industry that is associated with crisis, but we don’t know what our readers and customers are going through. And our readers and customers are people . They could be in an emergency and they still have to use the internet.” “

— Kate Kiefer-Lee

Slide 58

Slide 58

Va l u e U s e r s

Slide 59

Slide 59

Va l u e P e o p l e

Slide 60

Slide 60

Slide 61

Slide 61

People get incredibly frustrated if they feel like they have to lie. If you have a required set of questions, they have to give an answer, and it makes people feel uncomfortable when they don’t know and have to make something up. We don’t want people to have to tell us information they don’t have, and people will have di " erent limits about what they are comfortable sharing.” “

— Kate Brigham

Slide 62

Slide 62

We’re going to screw up. We’re going to learn from it. It’s only unforgivable if we don’t share what we learned. — ThinkUp mission statement

Slide 63

Slide 63 

 Sure, we might lose a bit of plucky copy and

upbeat imagery along the way. But what we gain is so much richer: a compass that will guide us in a humane, sensible direction as we continue to sort out the role digital products play in our lives. — Eric Meyer & Sara Wachter-Boettcher Design for Real Life

Slide 64

Slide 64 

 Digital products touch every aspect of our

lives: friendships, relationships, work, ! nances, health, grief, you name it. They’re how we share, how we express our thoughts and feelings. They’re us —in all our messy complexity. — Eric Meyer & Sara Wachter-Boettcher Design for Real Life

Slide 65

Slide 65

Thank you. @meyerweb meyerweb.com rebeccasgift.org