The Digital Technology Startup Ecosystem in Chicago
Â
Emotional Design
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
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%