Slide 1

Slide 1 text

Stephen P. Anderson @stephenanderson #uxls t

Slide 2

Slide 2 text

We make things that are: usable attractive responsive reliable user tested aligned with business goals delivered on time etc.

Slide 3

Slide 3 text

We make things that are: usable attractive responsive reliable user tested aligned with business goals delivered on time etc. And yet... I feel like there’s something missing.

Slide 4

Slide 4 text

We make things that are: usable attractive responsive reliable user tested aligned with business goals delivered on time etc. And yet... I feel like there’s something missing. Something intangible…

Slide 5

Slide 5 text

What might be missing? A C T I :

Slide 6

Slide 6 text

EXHIBIT #1: Movie Animations

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

If an animator does their job right, animations not only move the story along but visually display a character’s personality. These Big Hero 6 test animations of the characters performing what is superficially the same action show just how much depth Disney’s animators brought to each of them. Commentary from The Mary Sue: “

Slide 9

Slide 9 text

What kind of depth do we bring to our experiences?

Slide 10

Slide 10 text

EXHIBIT #2: Board Game Design

Slide 11

Slide 11 text

http://www.leagueofgamemakers.com/the-themes-they-are-a-changing/

Slide 12

Slide 12 text

The key was to go down a level deeper. At work, we were doing a branding exercise for a product, and we listed off the adjectives we wanted to describe the product. I realized that a similar exercise would work here… I mulled over all the feedback on the mechanics: what type of experience were they creating on their own? What adjectives did players use to talk about the mechanics? Players described the game as simple and elegant. It was calming and relaxing to play. They were surprised and delighted by the richness of the decisions. They said it flowed smoothly, that they could play it over and over again. http://www.leagueofgamemakers.com/the-themes-they-are-a-changing/

Slide 13

Slide 13 text

The key was to go down a level deeper. At work, we were doing a branding exercise for a product, and we listed off the adjectives we wanted to describe the product. I realized that a similar exercise would work here… I mulled over all the feedback on the mechanics: what type of experience were they creating on their own? What adjectives did players use to talk about the mechanics? Players described the game as simple and elegant. It was calming and relaxing to play. They were surprised and delighted by the richness of the decisions. They said it flowed smoothly, that they could play it over and over again.

Slide 14

Slide 14 text

This image captured perfectly the feeling that the playing the game produced, and I knew a theme and narrative woven around this could work to produce a great experience. http://www.leagueofgamemakers.com/the-themes-they-are-a-changing/

Slide 15

Slide 15 text

http://www.leagueofgamemakers.com/the-themes-they-are-a-changing/

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

How often do we really let design principles drive every product decision?

Slide 19

Slide 19 text

How often do we really let design principles drive every product decision? adding features pushing back on customer requests prioritizing the backlog how we design a familiar feature eliminating features

Slide 20

Slide 20 text

EXHIBIT #3: “The Carousel”

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

“…a time machine. It goes backwards, forwards. Takes us to a place where we ache to go again.”

Slide 23

Slide 23 text

How often do we focus on the soul of a thing?

Slide 24

Slide 24 text

Don’t take these similarities too literally.

Slide 25

Slide 25 text

Don’t take these similarities too literally. Big Hero 6 Character Studies “Let’s focus on better UI animations” “In what nuanced ways do we evoke aesthetic reactions?”

Slide 26

Slide 26 text

Don’t take these similarities too literally. Big Hero 6 Character Studies Board Game Design “Let’s focus on better UI animations” “Let’s create a narrative, entertainment-like, emotional experience!” “In what nuanced ways do we evoke aesthetic reactions?” “Is there a cohesive set of emotions that anchor all of our product decisions?

Slide 27

Slide 27 text

Don’t take these similarities too literally. Big Hero 6 Character Studies Board Game Design “The Carousel” Clip “Let’s focus on better UI animations” “Let’s create a narrative, entertainment-like, emotional experience!” “Let’s figure out how to sell our stuff, like Don Draper!” “In what nuanced ways do we evoke aesthetic reactions?” “Is there a cohesive set of emotions that anchor all of our product decisions? “Focus on the experience, not the features”

Slide 28

Slide 28 text

deeper depth experience soul theme narrative nuance richness emotion detail craftsmanship

Slide 29

Slide 29 text

deeper depth experience soul theme narrative nuance richness emotion detail How do we craft an experience? craftsmanship

Slide 30

Slide 30 text

Who is crafting a great experience? What are some good examples of of well-crafted experiences… things that make us feel? A C T I I :

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Medium ???

Slide 35

Slide 35 text

It’s 2012…

Slide 36

Slide 36 text

“a publishing platform…” It’s 2012…

Slide 37

Slide 37 text

you can write and publish online articles other people can comment on your articles you can share articles bookmark articles It’s 2012… “a publishing platform…”

Slide 38

Slide 38 text

you can write and publish online articles other people can comment on your articles you can share articles bookmark articles It’s 2012… “a publishing platform…” ?

Slide 39

Slide 39 text

you can write and publish online articles other people can comment on your articles you can share articles bookmark articles It’s 2012… “a publishing platform…” ! no customization options ! no custom domains ! royalty-free access to all content ?

Slide 40

Slide 40 text

you can write and publish online articles other people can comment on your articles you can share articles bookmark articles ! no customization options ! no custom domains ! royalty-free access to all content “a publishing platform…” ? It’s 2012… …a new place on the Internet where people share ideas and stories that are longer than 140 characters and not just for friends. It’s designed for little stories that make your day better and manifestos that change the world. It’s used by everyone from professional journalists to amateur cooks. It’s simple, beautiful, collaborative, and it helps you find the right audience for whatever you have to say.” “

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

“Everything changed for me over the weekend when I took the time to write a blog post on Medium.” “As someone who writes a lot of stuff and has used a lot of different writing software, I'm telling you that I was blown away by the quality of the product as a writing tool.” “The entire process is a breeze. And once published, the article looks pretty good too in terms of typography and appearance.” “Intuitive enough to seem psychic.” “Because it is such a pleasure to work with, Medium has become something of a fetish object for writers.” “It does not take a user experience designer to publish a professional story.” “A joy to use!” “It’s so damn beautiful. Medium has removed all the cruft that gets between the reader and the message…” “Clean design, great concept, full of potential treasures to be read.” “The best writing tool on the web.”

Slide 43

Slide 43 text

But here’s the thing: I feel as if the service looks so good that it invites only the best content that I—or anyone— can write before actually hitting publish. Let’s put it another way: If I’m going to write a post on Medium, I don’t want to let Medium down. (“It’s not you, it’s me.”) “Part of the reason I haven’t published to Medium is because I’m slightly intimidated. I know that is illogical and insane on the surface, but I feel intimidated and almost as if I have to rise to a higher standard on Medium.” —Christina Warren, senior tech analyst at Mashable

Slide 44

Slide 44 text

But here’s the thing: I feel as if the service looks so good that it invites only the best content that I—or anyone— can write before actually hitting publish. Let’s put it another way: If I’m going to write a post on Medium, I don’t want to let Medium down. (“It’s not you, it’s me.”) “Part of the reason I haven’t published to Medium is because I’m slightly intimidated. I know that is illogical and insane on the surface, but I feel intimidated and almost as if I have to rise to a higher standard on Medium.” —Christina Warren, senior tech analyst at Mashable

Slide 45

Slide 45 text

A different experience!

Slide 46

Slide 46 text

• you can write and publish online articles • other people can comment on your articles • you can share articles • bookmark articles The obvious “what to build” features & functionality

Slide 47

Slide 47 text

• Designed more like a magazine. • Designed a social system to create a built-in audience for new authors • Launched with published authors (which set really high bar for content) • Hired former Wired.com editor Evan Hansen as an editor for the site • Bought he long-form journalism startup Matter • Created what is arguably the best writing tool on the planet • Promoted contextual comments • Focused on typographic UI details that compete w/ centuries of print (vs other web platforms) • Focused A LOT on quality content • Offered pre-publishing feedback • you can write and publish online articles • other people can comment on your articles • you can share articles • bookmark articles The obvious “what to build” features & functionality The not so obvious “how to build” (& launch) experience details

Slide 48

Slide 48 text

• Designed more like a magazine. • Designed a social system to create a built-in audience for new authors • Launched with published authors (which set really high bar for content) • Hired former Wired.com editor Evan Hansen as an editor for the site • Bought he long-form journalism startup Matter • Created what is arguably the best writing tool on the planet • Promoted contextual comments • Focused on typographic UI details that compete w/ centuries of print (vs other web platforms) • Focused A LOT on quality content • Offered pre-publishing feedback • you can write and publish online articles • other people can comment on your articles • you can share articles • bookmark articles The obvious “what to build” features & functionality The not so obvious “how to build” (& launch) experience details Product

Slide 49

Slide 49 text

• Designed more like a magazine. • Designed a social system to create a built-in audience for new authors • Launched with published authors (which set really high bar for content) • Hired former Wired.com editor Evan Hansen as an editor for the site • Bought he long-form journalism startup Matter • Created what is arguably the best writing tool on the planet • Promoted contextual comments • Focused on typographic UI details that compete w/ centuries of print (vs other web platforms) • Focused A LOT on quality content • Offered pre-publishing feedback • you can write and publish online articles • other people can comment on your articles • you can share articles • bookmark articles The obvious “what to build” features & functionality The not so obvious “how to build” (& launch) experience details Experiences Product

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Still amazed by how much @SlackHQ reduced the number of unnecessary emails I could have on a normal workday. #slack Added my entire cohort at @bitmakerlabs to @SlackHQ. Great way to get tons of valuable feedback considered too informal for email. @SlackHQ is already the glue of our remote team. Can't believe we lived without it. The UI in @SlackHQ is SO well considered. Full of helpful surprises. I have to say, @SlackHQ + @appear_in is a game changer for easy video conferencing. By far the lowest friction solution I've seen. Just discovered @slackHQ, which lets us see all our updates from trello, sourcetree and drive in one stream! We're in love :D and it's free! Loving the @SlackHQ experience. Looks like it'll join #Evernote & #Wunderlist as another daily productivity app I can't live without @SlackHQ this may be the best piece of software I found in years #inlove "With @SlackHQ, the world of business software is edging into consumer tech. And it's surprisingly good fun." Started using @SlackHQ for the first time in a while at work and it has been one of the happiest days I've had! Thanks!

Slide 53

Slide 53 text

•You can create a room •add people •share files •chat as a group, or •direct message one another The obvious “what to build” features & functionality

Slide 54

Slide 54 text

•Went after individuals and product teams (vs entire companies) •Focused on a differentiated brand •WOM marketing •Laser focus on quality and responsiveness, taking longer than normal to iterate the preview version •Positioned themselves against email and mailing lists (not the “chat room” category) •TONS of integrations (more of a glue between existing services, than a competing service) •Super-frictionless tool, available for nearly every platform!! •Solid team •You can create a room •add people •share files •chat as a group, or •direct message one another The obvious “what to build” features & functionality The not so obvious “how to build” (& launch) experience details

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

What’s required to craft a great experience? A C T I I I :

Slide 57

Slide 57 text

align around the experience

Slide 58

Slide 58 text

Meaningful Pleasurable Convenient Usable Reliable Functional (Useful) Focused on Experiences (People, Activities, Context) Focused on Tasks (Products, Features) © SUBJECTIVE / QUALITATIVE OBJECTIVE / QUANTIFIABLE Has personal significance Memorable experience worth sharing Super easy to use, works like I think Can be used without difficulty Is available and accurate Works as programmed Prioritize Aesthetics (no, not Graphic Design) (visual, behaviors, sounds, psychology) Design for FLOW (boredom vs anxiety) Leverage Game Mechanics/Learning Theory (completeness) Have a Personality Create conversational and context aware interactions (“Adaptive Interfaces”; narrative IA structures) Elicit Desire (Limited availability, limited access, curious and seductive experiences) Simplify, organize, and clarify Display information visually Reduce features and complexity Use language for more natural Add features that support desired ine browsing) Have a believable story Co-create value with customers Connect people in community Are part of a bigger system Appeal to emotional, spiritual, and Create a tolerance for faults at Are tied to a person’s self-image, highly personal Creating Pleasurable Inte Getting fom Tasks to Expe presented by Stephen P. Anderson | N “It is not en products tha understand we also nee that bring j pleasure an beauty, to pe THIS IS THE “CHASM” THAT IS REALLY, REALLY HARD FOR ORGANIZATIONS TO CROSS

Slide 59

Slide 59 text

Experience Focus Product Focus

Slide 60

Slide 60 text

Experience Focus Product Focus

Slide 61

Slide 61 text

Experience Focus Product Focus people, activities & context tasks & features

Slide 62

Slide 62 text

Experience Focus Product Focus people, activities & context tasks & features outcomes and experiences output and functionality

Slide 63

Slide 63 text

Experience Focus Product Focus people, activities & context tasks & features outcomes and experiences output and functionality perceptions, emotions, attention, memory… interfaces, interactions, usability, etc.

Slide 64

Slide 64 text

“do” needs “be” needs

Slide 65

Slide 65 text

“do” needs “be” needs Autonomy-Independence Competence-effectance Relatedness-belongingness Influence-popularity Pleasure-stimulation Security-control Physical Thriving-bodily Self-actualizing-meaning Self-esteem-self-respect Money-luxury

Slide 66

Slide 66 text

https://medium.com/the-job-to-be-done/replacing-the-user-story-with-the-job-story-af7cdee10c27

Slide 67

Slide 67 text

https://medium.com/the-job-to-be-done/replacing-the-user-story-with-the-job-story-af7cdee10c27

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

A teenage girl with a bleak outlook needs to feel more socially accepted when eating healthy food, because in her hood a social risk is more dangerous than a health risk

Slide 70

Slide 70 text

When a product team is not aligned…

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

“MIND-MELDING”

Slide 74

Slide 74 text

“MIND-MELDING”

Slide 75

Slide 75 text

“MIND-MELDING” What it is… How it feels… What values should constrain decisions… What it’s like / not like The experience of using it…

Slide 76

Slide 76 text

Vision Statement. Design Tenets Prototype. Anything needed to mind-meld across the entire team! Press Release Concept Models (and so on)

Slide 77

Slide 77 text

obsess over the details

Slide 78

Slide 78 text

“…until it feels right” With board games, you endlessly playtest… With animations, you speed up, slow down, change they style… With film editing, you cut, recut, change the sequence… With presentations you rehearse and adjust things…

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

(slider JS animation example from UX London)

Slide 81

Slide 81 text

focus on the whole

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

“The Whole is Other than the Sum of the Parts”

Slide 85

Slide 85 text

“An Experience is Other than the Sum of the Parts”

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

!= The pieces are the same… …but the final experience here is just WRONG!

Slide 90

Slide 90 text

Product

Slide 91

Slide 91 text

Experiences Product

Slide 92

Slide 92 text

Production. Direction. Balance. Orchestration. Choreography.

Slide 93

Slide 93 text

[Avengers] was very difficult to make it flow and cohere in terms of all the changing perspectives and characters, all these movie stars, all these beats to hit. It's a ridiculously complex puzzle. But once you’ve got the puzzle, and you’re just filling in the voices and coming up with the moments, that’s what’s fun” — J O S S W H E D O N “

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Surprise and delight are the high-fructose corn syrup of the experience economy” “

Slide 97

Slide 97 text

focus on awesome users

Slide 98

Slide 98 text

We tend to focus on making awesome products making an awesome service making an awesome company …but what if we focused on making awesome users?

Slide 99

Slide 99 text

We tend to focus on making awesome products making an awesome service making an awesome company …but what if we focused on making awesome users?

Slide 100

Slide 100 text

Example of User Awesome: I find the clean organization of Ulysses gets out of my way, and when I’m writing—it’s as smooth as silk. In a subtle way, I feel inspired by Ulysses and consequentially, I end up spending more time with my butt in the chair, actually writing because I’m enjoying myself.” —Micah Moss, Screenwriter and Novelist “

Slide 101

Slide 101 text

Look for needs (the why & when) focus on the whole focus on awesome users Look for opportunities to create transformative experiences …not just the parts …not just a few playful moments Keep iterating, until it feels just right Align the entire product team around the desired outcome Let the desired experience to drive all product decisions align around the experience obsess over the details

Slide 102

Slide 102 text

People will forget what you said, people will forget what you did, but they’ll never forget how you made them feel.” — M A Y A A N G E L O U “

Slide 103

Slide 103 text

Thank you! getmentalnotes.com Design for Understanding Stephen P. Anderson @stephenanderson www.poetpainter.com | www.slideshare.net/stephenpa