Investigate design principles and elements. Principles of Design.
Principles of Emotional Design
-
Upload
garron-engstrom -
Category
Design
-
view
18.279 -
download
3
Transcript of Principles of Emotional Design
![Page 1: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/1.jpg)
Principles of Emotional DesignGarron Engstrom @GarronEngstrom
Jake Maynard @MaynardJ20
Sr. Interaction Designers @Intuit
![Page 2: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/2.jpg)
![Page 3: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/3.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/4.jpg)
Brief history of design at Intuit1
2
3
Principles of emotional design
Future of emotional design
![Page 5: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/5.jpg)
1993
![Page 8: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/8.jpg)
![Page 9: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/9.jpg)
TurboTax simplified tax prep
1993
![Page 10: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/10.jpg)
A turning point
2007
![Page 11: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/11.jpg)
“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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/12.jpg)
“Intuit is the most well run, no
growth company in the Valley.”
Anonymous ???
![Page 13: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/13.jpg)
“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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/14.jpg)
What problems we solve:
![Page 15: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/15.jpg)
How we solve them:
![Page 16: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/16.jpg)
How we go from usability to delight:
![Page 17: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/17.jpg)
“Usable = Edible”Aarron Walter
Director of Design @Mailchimp
![Page 18: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/18.jpg)
XD Forum Internal Design Conference
2014
![Page 19: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/19.jpg)
“Intuit is a design-driven
company and we strive to get
better every day.”
Brad Smith Intuit CEO
![Page 20: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/20.jpg)
Brief history of design at Intuit1
2
3
Principles of emotional design
Future of emotional design
![Page 21: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/21.jpg)
Identify “own-able moments”
1
![Page 22: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/22.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/23.jpg)
Are “easter eggs” delightful?
Maybe…but they’re not own-able moments.
![Page 24: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/24.jpg)
![Page 25: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/25.jpg)
Uber own-able moment:
Payment (or lack of it)
![Page 27: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/27.jpg)
Lean into the emotion
2
![Page 28: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/28.jpg)
Emotional Design
=
Positive Emotion
![Page 29: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/29.jpg)
![Page 30: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/30.jpg)
![Page 32: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/32.jpg)
Convey emotion visually
3
![Page 33: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/33.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/34.jpg)
“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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/35.jpg)
“…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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/36.jpg)
“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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/37.jpg)
TurboTax own-able moment:
Transmitting your taxes
From To
![Page 38: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/38.jpg)
Social media response to this redesigned own-able moment
![Page 39: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/39.jpg)
![Page 40: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/40.jpg)
![Page 42: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/42.jpg)
![Page 43: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/43.jpg)
Humanize the technology
4
![Page 44: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/44.jpg)
Source: http://goo.gl/Cxc5Zf
![Page 45: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/45.jpg)
Eight Hundred smart, diverse and empathetic people
![Page 46: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/46.jpg)
“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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/47.jpg)
Credible Emotional
Conversational
UnprofessionalTransactional
Taxy
TurboTax
Voice & Tone
![Page 49: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/49.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/50.jpg)
Brief history of design at Intuit1
2
3
Principles of emotional design
Future of emotional design
![Page 51: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/51.jpg)
Emotional design will become more
about knowing, not assuming, the
emotional state of the user.
![Page 52: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/52.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/53.jpg)
Using facial recognition
YouTube Video: https://goo.gl/EldoBj
![Page 54: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/54.jpg)
Using multi-sensor inputs
Microsoft US Patent #: US 20100179759 A1
Source: http://goo.gl/Ty4ynb
![Page 55: Principles of Emotional Design](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/55.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/56.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/57.jpg)
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](https://reader030.fdocuments.in/reader030/viewer/2022033108/58f9aa76760da3da068b7940/html5/thumbnails/58.jpg)
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