58
Principles of Emotional Design Garron Engstrom @GarronEngstrom Jake Maynard @MaynardJ20 Sr. Interaction Designers @Intuit

Principles of Emotional Design

Embed Size (px)

Citation preview

Page 1: Principles of Emotional Design

Principles of Emotional DesignGarron Engstrom @GarronEngstrom

Jake Maynard @MaynardJ20

Sr. Interaction Designers @Intuit

Page 2: Principles of Emotional Design
Page 3: Principles of Emotional Design

Mission:

To improve our customers’ financial lives so

profoundly…they can’t imagine going back to

the old way

Page 4: Principles of Emotional Design

Brief history of design at Intuit1

2

3

Principles of emotional design

Future of emotional design

Page 5: Principles of Emotional Design

1993

Page 6: Principles of Emotional Design

HELLLLOOOOOOOOO!Source: http://goo.gl/PHqIzS

Page 7: Principles of Emotional Design

Source: https://goo.gl/JcaJJX

Source: http://goo.gl/0gBnmL

Page 8: Principles of Emotional Design
Page 9: Principles of Emotional Design

TurboTax simplified tax prep

1993

Page 10: Principles of Emotional Design

A turning point

2007

Page 11: Principles of Emotional Design

“We realized that we were no longer as proud

of the experiences we were creating — that in

many cases we were no longer any better

than our competitors.”

Kaaren Hanson Former VP of Design @Intuit

Page 12: Principles of Emotional Design

“Intuit is the most well run, no

growth company in the Valley.”

Anonymous ???

Page 13: Principles of Emotional Design

“Design for Delight is our #1

weapon in attaining growth,

and there is no #2.”

Scott Cook Founder of Intuit

Page 14: Principles of Emotional Design

What problems we solve:

Page 15: Principles of Emotional Design

How we solve them:

Page 16: Principles of Emotional Design

How we go from usability to delight:

Page 17: Principles of Emotional Design

“Usable = Edible”Aarron Walter

Director of Design @Mailchimp

Page 18: Principles of Emotional Design

XD Forum Internal Design Conference

2014

Page 19: Principles of Emotional Design

“Intuit is a design-driven

company and we strive to get

better every day.”

Brad Smith Intuit CEO

Page 20: Principles of Emotional Design

Brief history of design at Intuit1

2

3

Principles of emotional design

Future of emotional design

Page 21: Principles of Emotional Design

Identify “own-able moments”

1

Page 22: Principles of Emotional Design

Own-able Moment (noun):

A moment in a product experience

when the customer is experiencing a

change or escalation of emotion.

Page 23: Principles of Emotional Design

Are “easter eggs” delightful?

Maybe…but they’re not own-able moments.

Page 24: Principles of Emotional Design
Page 25: Principles of Emotional Design

Uber own-able moment:

Payment (or lack of it)

Page 26: Principles of Emotional Design

Exercise 1:

Identify own-able moments

Dropbox Link: https://goo.gl/HbB9wP

Page 27: Principles of Emotional Design

Lean into the emotion

2

Page 28: Principles of Emotional Design

Emotional Design

=

Positive Emotion

Page 29: Principles of Emotional Design
Page 30: Principles of Emotional Design
Page 31: Principles of Emotional Design

Exercise 2:

Identify the emotion

Dropbox Link: https://goo.gl/JGsRzb

Page 32: Principles of Emotional Design

Convey emotion visually

3

Page 33: Principles of Emotional Design

Levels of Perception

Visceral: appearance

Behavioral: how it works, how it feels

Reflective: interpretation and understanding

1

2

3

Page 34: Principles of Emotional Design

“Appearance can greatly influence

perceptions, and we carry that mental

model with us when sizing up a website”

Aarron Walter Director of Design @Mailchimp

Page 35: Principles of Emotional Design

“…immediately boosting

sales by 24% and driving

Apple to its first

profitable quarter in two

years.”

“…from geeky to pop…”

“For the first time ever,

the color of a computer

became an outlet for

self-expression”

www.fastcodesign.com

Visceral Design: iMac G3

Page 36: Principles of Emotional Design

“In ’67, the year of the

Summer of Love…The unique

and unconventional form of

the Bug perfectly matched

the new revolution.”

www.thebeetle.com

“It has a certain personality

to it, an endearing quality.”

www.theblaze.com

Source: http://goo.gl/G9pNoj

Visceral Design:

VW Beetle

Page 37: Principles of Emotional Design

TurboTax own-able moment:

Transmitting your taxes

From To

Page 38: Principles of Emotional Design

Social media response to this redesigned own-able moment

Page 39: Principles of Emotional Design
Page 40: Principles of Emotional Design
Page 41: Principles of Emotional Design

Source: http://goo.gl/ZMynq5

Page 42: Principles of Emotional Design
Page 43: Principles of Emotional Design

Humanize the technology

4

Page 44: Principles of Emotional Design

Source: http://goo.gl/Cxc5Zf

Page 45: Principles of Emotional Design

Eight Hundred smart, diverse and empathetic people

Page 46: Principles of Emotional Design

“I finally got around to doing taxes

yesterday. After our information was

transferred from last years return, it

asked if either of us had passed away. I

entered the information that [husband]

died on June 15, and a screen came up

that said “we’re sorry for your loss.” I sat

there and stared at it, crying, for a few

minutes. It was so cathartic! Please pass

on to the team how much that one little

sentence meant to me. Whoever

thought that up must be a very caring

person.”

Yes No

Yes NoYes No

Yes No

Page 47: Principles of Emotional Design

Credible Emotional

Conversational

UnprofessionalTransactional

Taxy

TurboTax

Voice & Tone

Page 48: Principles of Emotional Design

Exercise 3:

What’s your voice?

Dropbox Link: https://goo.gl/FQHcuH

Page 49: Principles of Emotional Design

Credible v. Unprofessional

Emotional v. Transactional

Friendly v. Cold

Simple v. Complex

Transparent v. Vague

Warm v. Indifferent

Serious v. Light-hearted

Humble v. Extroverted

Scientific v. Subjective

Playful v. Apathetic

Inspiring v. Modest

Proactive v. Uneager

Economical v. Irrational

Reliable v. Unsteady

Voice & Tone Attributes

Page 50: Principles of Emotional Design

Brief history of design at Intuit1

2

3

Principles of emotional design

Future of emotional design

Page 51: Principles of Emotional Design

Emotional design will become more

about knowing, not assuming, the

emotional state of the user.

Page 52: Principles of Emotional Design

Emotional design will become more

about knowing, not assuming, the

emotional state of the user.

By using:

Facial recognition

Multi-sensor inputs

Biometrics

Page 53: Principles of Emotional Design

Using facial recognition

YouTube Video: https://goo.gl/EldoBj

Page 54: Principles of Emotional Design

Using multi-sensor inputs

Microsoft US Patent #: US 20100179759 A1

Source: http://goo.gl/Ty4ynb

Page 55: Principles of Emotional Design

Using biometrics

Source: http://www.mirror.co.uk/news/technology-science/technology/cant-wait-apple-watch-here-4352128Source: http://goo.gl/nJE20y

Page 56: Principles of Emotional Design

Identify own-able moments

Lean into the emotion

Convey emotion visually

Humanize the technology

1

2

3

4

Principles of Emotional Design

Page 57: Principles of Emotional Design

Thank you. @GarronEngstrom

@MaynardJ20

Collaborators and Shoutouts:

Ivy Tsai

Heather Daggett

Meghan Cartlidge

Thai Dang

Ria Hagan

John Caldwell

Andy Roe

& the rest of the TurboTax Team

Page 58: Principles of Emotional Design

The Harvard Business Review - Innovation Catalysts

Bloomberg Businessweek - Interview with Brad Smith and Kaaren Hanson

UX Magazine - Stop Sprinkling Emotion, Start Creating Magic and Meaning

Khan Academy - Interview with Scott Cook

Designing for Emotion - Aarron Walter

Emotional Design - Don Norman

Resources