A New Toolbox: Artifact Conference, Providence 2013

Slide 1

Slide 1 text

A NEW TOOLBOX SOPHIE SHEPHERD & KEVIN SHARON

Slide 2

Slide 2 text

Howd

Slide 3

Slide 3 text

ATX

Slide 4

Slide 4 text

We don’t know what we’re doing. Disclaimer

Slide 5

Slide 5 text

Artifact: A New Toolbox

Slide 6

Slide 6 text

A New Toolbox Research

Slide 7

Slide 7 text

A New Toolbox Communication

Slide 8

Slide 8 text

A New Toolbox Design

Slide 9

Slide 9 text

Research: Why before what

Slide 10

Slide 10 text

Research …for design to truly be great, [research] needs to be built into your projects from the very beginning.” —Mike Montiero “

Slide 11

Slide 11 text

“How do you make a chair?”

Slide 12

Slide 12 text

“Go make mistakes”

Slide 13

Slide 13 text

This sucks.

Slide 14

Slide 14 text

We built it, launched it, it sucks, and no one cares. Fix it?

Slide 15

Slide 15 text

Rush to MVP

Slide 16

Slide 16 text

That’s a whole ‘nuther talk.

Slide 17

Slide 17 text

Design Research is easy.

Slide 18

Slide 18 text

Interviews

Slide 19

Slide 19 text

Interviews Stakeholders

Slide 20

Slide 20 text

Interviews Users

Slide 21

Slide 21 text

Ethnio ethn.io/

Slide 22

Slide 22 text

Design Values Survey

Slide 23

Slide 23 text

The Design Values Survey Start a conversation

Slide 24

Slide 24 text

The Design Values Survey Ask dumb questions

Slide 25

Slide 25 text

The Design Values Survey Reveal your preconceptions

Slide 26

Slide 26 text

The Design Values Survey Not everyone will agree

Slide 27

Slide 27 text

“Should the new site look like a magazine or a newspaper?” The Design Values Survey

Slide 28

Slide 28 text

“Should the new look reﬂect the aesthetics of [ ]?” The Design Values Survey

Slide 29

Slide 29 text

10 Second Gut Check

Slide 30

Slide 30 text

10 Second Gut Check Benchmark

Slide 31

Slide 31 text

10 Second Gut Check

Slide 32

Slide 32 text

10 Second Gut Check Define taste

Slide 33

Slide 33 text

10 Second Gut Check Generate content ideas

Slide 34

Slide 34 text

Personality Test

Slide 35

Slide 35 text

Personality Test Finding out who your customers are is only half the question. You also have to understand who you are.” —Aarron Walter “

Slide 36

Slide 36 text

What is the personality of a site? Voice

Slide 37

Slide 37 text

What is the personality of a site? Tone

Slide 38

Slide 38 text

What is the personality of a site? Feel /Mood

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Communication: Playing nice with others

Slide 45

Slide 45 text

Design is a service

Slide 46

Slide 46 text

Business Goals User Needs Service

Slide 47

Slide 47 text

Business Needs Project goals

Slide 48

Slide 48 text

Business Needs Requirements

Slide 49

Slide 49 text

Business Needs Technology

Slide 50

Slide 50 text

User needs Who is the audience?

Slide 51

Slide 51 text

User needs Is there a new audience?

Slide 52

Slide 52 text

User needs How do other people reach this audience?

Slide 53

Slide 53 text

Client Capabilities Client design team

Slide 54

Slide 54 text

Client Capabilities Photography, Video, Infographics

Slide 55

Slide 55 text

Oh no, a dirty word: Clients

Slide 56

Slide 56 text

You get the clients you deserve

Slide 57

Slide 57 text

Client Communication “You can’t use that shade of blue… “

Slide 58

Slide 58 text

Client Communication “Let’s make the logo bigger“

Slide 59

Slide 59 text

Client Communication “Our CEO’s favorite font is Arial“

Slide 60

Slide 60 text

The Elusive “Fold” ✄

Slide 61

Slide 61 text

weenudge.com/thefold/

Slide 62

Slide 62 text

This sucks.

Slide 63

Slide 63 text

It’s not a collaboration if you don’t say “no.”

Slide 64

Slide 64 text

“When are you going to show me something to look at?”

Slide 65

Slide 65 text

Earl esig

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Client Feedback Restate the goals.

Slide 68

Slide 68 text

Client Feedback What answers to you need to move to the next step?

Slide 69

Slide 69 text

A Designer’s Job

Slide 70

Slide 70 text

Responsive Web Design

Slide 71

Slide 71 text

UX Concept Board Graphic Design Front-End Dev Sub Pages Traditional Process Research QA Designer

Slide 72

Slide 72 text

UX Graphic Design Front-End Dev Updated Process Research QA Style Guide Designer

Slide 73

Slide 73 text

Most of what I do doesn’t look like a website.

Slide 74

Slide 74 text

Atomic Design

Slide 75

Slide 75 text

Atomic Design

Slide 76

Slide 76 text

Start With Content • What did we learn from the research? • Deﬁne Content Needs

Slide 77

Slide 77 text

Start With Content • Sketch • Collaborate • Tool to prompt conversation amongst teams

Slide 78

Slide 78 text

Content as Modules

Slide 79

Slide 79 text

Modules as Hierarchy 0 4 5 3 1 2 Delete Utmost Importance Not needed/ Can’t Maintain Nice to Have Maybe, but not important Requested

Slide 80

Slide 80 text

Modules as Hierarchy 0 4 2 5 3 3 1 2 5

Slide 81

Slide 81 text

Modules as Prototypes

Slide 82

Slide 82 text

Modules as Requirements • Functional Requirements • Technical Requirements • Content Requirements

Slide 83

Slide 83 text

Modules as Design Plan • Which pages have unique layouts? • Which modules can be designed independent of layout?

Slide 84

Slide 84 text

Graphic Design Styl Boards Full Page Comps Big Screen Small Screen PSD vs. Browser

Slide 85

Slide 85 text

“You Can’t Have Happy Accidents in the Browser — Mark Boulton

Slide 86

Slide 86 text

Design Tipping Point When is it more eﬃcient to move over to working in the browser?

Slide 87

Slide 87 text

QA Designer finds bug ➔ Files bug in Sifter ➔ Developer has question ➔ developer fixes bug ➔ assign back to designer ➔ designer looks at page to confirm ➔ designer closes ticket Designer Finds Bug ➔ Designer Fixes Bug

Slide 88

Slide 88 text

Style Guide Design System Front-End Code

Slide 89

Slide 89 text

Style Guide Allows designer to see design system through the lens of front end code.

Slide 90

Slide 90 text

Tool for Clients • Module Guide • Visual Reference • Technical Reference • Content Guide

Slide 91

Slide 91 text

Experiment

Slide 92

Slide 92 text

April 1st, 2012

Slide 93

Slide 93 text

You’re going to design this site using Keynote.” —Kevin Sharon “

Slide 94

Slide 94 text

—Sophie Shepherd (in her head) Is this an April Fool’s joke?” “ He’s serious. Deep breathes.” “ Like, Keynote Keynote?” “

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Photoshop ≠ Browser • Wrapping Text • Multiple Widths • Rounded Corners • Consistent Type

Slide 97

Slide 97 text

Tools ≠ Precious There is no “right” way of doing this stuﬀ.

Slide 98

Slide 98 text

Design: The details matter

Slide 99

Slide 99 text

“Designers”

Slide 100

Slide 100 text

Don’t be the “designer (who codes).” Be a designer with a bigger toolbox.

Slide 101

Slide 101 text

This stuﬀ ain’t easy

Slide 102

Slide 102 text

FAIL. You’re doing it wrong… “ —the twitters The one truth “ #jerks

Slide 103

Slide 103 text

That’ Bullshit

Slide 104

Slide 104 text

No one knows what they’re doing.

Slide 105

Slide 105 text

Empath

Slide 106

Slide 106 text

UX is everyone’s job.

Slide 107

Slide 107 text

The one true process is…

Slide 108

Slide 108 text

It all depends.

Slide 109

Slide 109 text

Process is decided by • The required deliverables • The expected outcomes • The client’s needs • The client’s personality • Audience needs • Budget • Timeline • Project teams • Time zones • Hurricanes • The moon and tides