1. Emotional Design
How to create & encourage emotional connections using design
A talk by: Christina A. Brodbeck, Co-Founder of theicebreak, an app for couples.
@jellyfishbloom

2. First, A Little Story to Start Things Off
 So, the other day I was in Starbucks and this woman’s cell
phone started to ring and play a very loud ring tone…
♪♫♬♩♪♭♮♫

3. And the ring tone was Celine Dion
 It was “My Heart Will Go Own” from Titanic (yes, really)
 Some people groaned
 Some people were visibly chuckling
 My friend said “Really, Celine Dion?”
 Some people (like me) were reminded of happy
memories (it so happens my first ever “real date” was
watching Titanic)

4. Your product is a Celine Dion ring tone
 Everyone who interacts with it has some sort of an
emotional reaction to it

5. Part I: How to create the
emotional response you want

6. Emotional Design is not a new idea
 It’s just that traditionally we cared more about “does it
work” than “does it connect.” But you need to care
about both.
 In 2005 Donald Norman wrote a book called “Emotional
Design” and he talked about a theory….that all good
designs appeal to users on 3 levels:
visceral, behavioral, and reflective
 You need to think about all 3 levels!

7. Visceral: Your gut reaction
 Not based on reason
 Influenced by: texture, sound, look-and-feel

8. Behavioral: How you interact with it
 For example -- Is it usable?
 Influenced by: effectiveness, how it functions

9. Reflective: What it means to you
 For example – Does it trigger memories?
 Influenced by: self image, nostalgia

10. Since we’re in Chicago…
Take a minute…and think of one of your
favorite “Chicago” brands or products

11. For me: Vienna Beef Hot Dogs
 I’m from Chicago, and live in California. I miss them.
Really hard to get in San Francisco.
 Reflective: Brings back great memories of high school.
 Visceral: The texture. Harder casing than most hog dogs.
 Behavioral: Very effective. Fills me up & tasty.

12. How to Step 1: Personify Your Design & Brand
 Try this personification exercise. Answer these questions
and collage it: …Your product walks into a bar
 Q. Are they male or female? What age are they?
 Q. What are they wearing? What shoes, pants, dress?
 Q. What’s their pickup line to “close” or “sell” someone?
 Q. 3 words that someone at the bar would use to describe
them?
 This exercise establishes what emotions you want your product
to evoke.

13. How to Step 2: Figure Out Your Core
Demographic & Design for Them
 Like Celine Dion, your product isn’t going to appeal to
everyone, but find out who it does appeal to.
 Does your design & brand resonate with them? Test it
with various groups of people.
 If not, who does it resonate with?
 You need to be willing to change your assumptions.

14. Real World Example: theicebreak
 In our initial closed beta of 80 people we found that
theicebreak was resonating most with non-techies and
non-early adopters. It was appealing to people with
more traditional values.
 So we decided to design for them.
Success: Today 81% of our users are
from outside of CA and NY…places
where generally people are more
traditional.

15. Color Choice
 Pick a palette that appeals to your demographic and
their geographic location
 Red: love, anger, passion, emergency, importance
 Orange: happiness, joy, youth, warning
 Yellow: optimisim, intelligence, positivity
 Green: money, sterile, safety, harmony
 Blue: peace, calm, trust, dependability, cold, aloof
 Purple: creativity, luxury, sophistication, seriousness
 Black: elegance, professionalism, sadness
 White: Cleanliness, dependability, trust, innocence

16. Tone & Language
 Language: You want to talk with your users not to you
users
 Conversational speech makes users feel relaxed, at ease, and
natural
 Small doses of humor makes people feel comfortable (like
Freddie the Mailchimp mascot)

17. Design a Personal Relationship with Your Users
 Give it a personal touch
 Sign outgoing emails from the founder, ceo, or team (example:
Pinterest)
 Highlight your team and their personalities as features on your
blog, site, or app
 Highlight and feature users on your blog, site, or app

18. Turn Negative Experiences Into Positive Ones
 Intercept what could be perceived as bad and spin it as
good
 Example: Hootsuite. When not updating/syncing Hootsuite
shows their mascot owl being asleep.
 Instead of wondering why it’s not updating, users are given
information and an action they can take via a cute owl

19. Tell a Relatable Story, Not Just the Facts
 Package facts and data so the user gets a result they can
relate to instead of just a bunch of random information
 Tell them what the data means, and how it applies to
their lives
 Examples: Weight loss sites. (Instead of just showing them a
chart with the pounds lost, tell them “Congrats! You’ve lost 30
pounds. Just 10 more to go”)

20. Make it Familiar
 Use familiar icons and terms people already have a
connection with
 Example: iPhone phone icon
 Makes people feel comfortable, relaxed, and brings back
memories

21. Use “Aspirational” Photographs
 Sell users their dream. Use photos to spark emotions of
what they aspire to want or be, but don’t have
 The fashion industry knows this well.
 Example: Vayable – travel site
 Large photo on the front page of a travel experience you
would love to go on someday

22. Part II: How to design products
where users tell you how they feel
Your product = user’s emotions.
(Difference – Part I: You tell them
how to feel. Part II: They tell you
how they feel)

23. We’ve Moved into The Emotional Web
 Trend: The Internet has moved beyond tools for functional
need, and instead into tools for self-actualization and
esteem
 Maslow’s Hierarchy of Needs
Facebook
Linkedin
Amazon

24. Give Users Tools to Be Creative
 Let users show you how they feel through creation and
curation
 This gives you insight into their emotions
 Examples: Instagram (filters), Viddy
(music, filters), Stupeflix (editing tools), Pinterest (Curation)

25. Use Time-Relevant Prompts
 This way you can find out how someone is feeling at a
precise moment, which generates more data for you.
 Examples: Karma – smart days, Facebook – friend got
married say congratulations, just-in-time feedback
popups

26. Use Minimal UI
 Make the UI more about the user than the product. Your
UI should fade into the background. Let the user stand
out.
 This way you find out what’s important to them and how
they feel about things, by what the user showcases.
 Examples: Evernote Clearly – what they
highlight, Pinterest – what’s on their board

27. Make them Feel Safe & Secure
 In safe spaces, people give more freely of their emotions.
Then they will tell you how they feel.
 Example: theicebreak (intimate data = anonymous
identities, which encourage honest answers)
Success: 74% of users say theicebreak
has helped their relationship. Overall
happiness of our users has increased
by 10%