Game on: 16 design patterns for user engagement

GAME ON: 16 DESIGN PATTERNSFOR USER ENGAGEMENT
Using game mechanics
to create engagement in social web applications.
NadyaDirekova, @nadya_d
Senior UX Designer, Game Mechanic
SXSW March 14th 2011

ABOUT ME: ONE FOOT IN GAMES, ONE FOOT IN UX
M.I.T.
Razorfish
Leapfrog
Backbone Ent.
Google / Hotpot

GAME MECHANICS RIGHT NOW

What are game mechanics?
Design patterns that promote
play and play-like engagement.
GAME MECHANICS

play and play-like engagement.
GAME MECHANICS
Repeatable
solutions to design problem.
DESIGN PATTERNS

play and play-like engagement
GAME MECHANICS
Repeatable
solutions to design problem.
DESIGN PATTERNS

GAME MECHANICS – A BROAD ARRAY OF APPLICATIONS
Spending on Social Media Marketing and Gamification
Budgeting
Location Sharing
Test Prep
Recycling
Grockit.com
Four Square
Recycle bank.com
Mint.com
Chores
Exercise
Task Management
Even Brushing Teeth…
Nike Plus
Epic Win
Chore Wars

A BROAD ARRAY OF THINKERS

GAMIFICATION IS THE NEW BLACK

STATS AROUND GAME MECHANICS
What are companies looking to achieve with
game mechanics?
Source: M2 Research

STATS AROUND GAME MECHANICS
What is the current breakdown of companies
on the gamification adoption curve?
Source: M2 Research

PROJECTED MARKETING SPENDING ON GAME MECHANICS
Source: M2 Research

GAMIFICATION FATIGUE

This is powerful stuff

IT’S MORE THAN POINTS AND BADGES:
>
Game
mechanics

GAME MECHANICS DESIGN PATTERNS

LET’S TALK ABOUT...
WE’LL REVIEW
16 DESIGN PATTERNS
THAT CREATE GAME-LIKE USER ENGAGEMENT.

WE’LL REVIEW
16 DESIGN PATTERNS
WE’LL DISCUSS HOW THEY APPLY TO
3 ASPECTS
OF THE USER JOURNEY

WE’LL REVIEW
16 DESIGN PATTERNS
3 ASPECTS
OF THE USER JOURNEY:
COME AND TRY IT

WE’LL REVIEW
16 DESIGN PATTERNS
3 ASPECTS
COME AND TRY IT
BRING FRIENDS

WE’LL REVIEW
16 DESIGN PATTERNS
3 ASPECTS
COME AND TRY IT
BRING FRIENDS
COME BACK

“COME AND TRY IT” - Designing for 1st time users
Visual story telling
Visual cues
Tutorials
Responsive objects
Reward schedule
Disincentives

DESIGN PATTERN
1.1 VISUAL STORYTELLING

DESIGN PATTERN
Visual story telling – instead of long explanations
RUB RABBITS PRE-GAME SCREEN
GAME EXAMPLE

DESIGN PATTERN
Visual story telling – instead of long explanations
GROUP-ON: HOW IT WORKS
ZIP CAR: EXPLAIN THE PROPOSITION IN PICTURES

DESIGN PATTERN
1.2 VISUAL CUES

DESIGN PATTERN
VISUAL CLUEs
CITY OF IMMORTALS
GAME EXAMPLE

DESIGN PATTERN
Visual CLUES: example
FACEBOOK PLACES: PLAYING “FLASHLIGHT”

DESIGN PATTERN
Visual CLUES: example
PANDORA: HIGHLIGHT FEATURES THE USER MIGHT MISS OTHERWISE

DESIGN PATTERN
1.3 TUTORIAL / ONBOArDING
ON RAILS

DESIGN PATTERN
TUTORIAL / ONBoArDING ON RAILS
FRONTIERVILLE
GAME EXAMPLE

DESIGN PATTERN
TUTORIAL / ONBOARDING ON RAILS
RIBBON HERO
GET GLUE: EXPERIENCE THE APP DURING THE ON-BOARDING

DESIGN PATTERN
1.4 responsive objects

DESIGN PATTERN
responsive objects
GAME EXAMPLE

DESIGN PATTERN
responsive objects
KNOW THAT YOU’RE DOING OK LOGGING IN WITH MINT.COM
HOVER ON A TWEET TO REVEAL NEW OPTIONS

DESIGN PATTERN
1.5 reward schedule

DESIGN PATTERN
Reward schedule
CITYVILLE COINS AND STARS: REWARDS FOR TAKING CARE OF YOUR CITY
“You can’t over-reward the player in the first 10 minutes.” - Sid Meier, designer of the game Civilization

DESIGN PATTERN
Reward the beginner
SHOPKICK
IMVU: POINTS FOR TRYING NEW THINGS
FOUR SQUARE NEWBIE BADGE

DESIGN PATTERN
Challenge the expert
PLANTS VS. ZOMBIE: SOME ACHIEVEMENTS
SEEM ALMOST IMPOSSIBLE TO UNLOCK
FOURSQAURE: SOME ACHIEVEMENTS ARE HARDER TO UNLOCK

DESIGN PATTERN
1.6 DISincentives

DESIGN PATTERN
DISincentives
PACMAN – YOU GOT EATEN BY GHOSTS!
GAME EXAMPLE

DESIGN PATTERN
DISincentives
STICKK HELPS YOU STICK TO GOALS USING NEGATIVE INCENTIVES

DESIGN PATTERN
DISIncentives
GROCKIT :
A/B TESTING SHOWS THAT NEGATIVE INCENTIVES HURT USER ENGAGAMENT

summary
“come and try it”
Visual cues
Tutorials
Responsive objects
Reward schedule
Disincentives

DESIGN PATtERns for social engagement
“Bring your friends”

“BRING FRIENDS” - Designing for community
Gated trial – form a team
Social feedback
Reputation
Sharing milestones
Mischief

DESIGN PATTERN
2.1 gated trial – form a team

DESIGN PATTERN
gated TRIAL – FORM A TEAM TO START
DODGE-BALL – YOU NEED A TEAM TO START
GAME EXAMPLE

DESIGN PATTERN
Why is a team so important?

DESIGN PATTERN
GATED TRIAL – FORM A TEAM TO START

DESIGN PATTERN
OLD TWITTER SIGN UP – 3 SCREENS
NEW TWITTER SIGN UP – 4 SCREENS (NOW REDESIGNED)

DESIGN PATTERN
NEW TWITTER SIGN UP

DESIGN PATTERN
2.2 social feedback

DESIGN PATTERN
social FEEDBACk
CITYVILLE – ASYNCHRONOUS COMMUNICATION BUTTONS
GAME EXAMPLE

DESIGN PATTERN
SOCIAL FEEDBACK EXAMPLE – thank you buttons
AADVARK “THANK YOU NOTES”
QUORA “THANK YOU NOTES”

DESIGN PATTERN
Social feedback EXAMPLE - COMPLIMENTS
YELP: SELECT A COMPLIMENT AND WRITE A MESSAGE

DESIGN PATTERN
Social feedback EXAMPLE – VOTING, LIKES, RETWEETS
QUORA VOTING
FACEBOOK LIKES
TWEET AND RETWEET

Design pattern
2.3REPUTATION

DESIGN PATTERN
REPUTATION
SIMPLE REPUTATION SCORE IN CITYVILLE
GAME EXAMPLE

DESIGN PATTERN
REPUTATION
EBAY REPUTAION = MORE TRUST
ONE UP ME FORUM REPUTAION = MORE VOTING POWER

Design pattern
2.3sharing achievements

DESIGN PATTERN
Sharing achievements
XBOX LIVE
GAME EXAMPLE

DESIGN PATTERN
Sharing ACHIEVEMENTS
FOUR SQAURE BADGE UNLOCKED!

DESIGN PATTERN
2.4 MISCHIEF

DESIGN PATTERN
MISCHIEF
FARMVILLE – TP SOMEONE’S FARM
GAME EXAMPLE

DESIGN PATTERN
MISCHIEf RE-DIRECT
“CHATROULETTE”

in summary
social
Gated trial – form a team
Social feedback
Reputation
Sharing milestones
Mischief

DESIGN PATTERNs for repeat engagement
“player, come back”

“COME BACK” - Designing for return visits
Advanced user paths
Content unlocks
Quest queue
Time pressure
Scarcity

DESIGN PATTERN
3.1 advanced user paths

DESIGN PATTERN
Advanced user paths / roles
SKI SLOPES: DIFFERENT PATHS ON THE SAME MOUNTAIN

DESIGN PATTERN
YELP FOR THE REGULAR USERS
YELP THE ELITE SQUAD – USEFUL , FUNNY AND COOL

DESIGN PATTERN
FOURSQUARE MAYORSHIP

DESIGN PATTERN
3.2 content unlocks

DESIGN PATTERN
Content unlocks
ANGRY BIRDS
GAME EXAMPLE

DESIGN PATTERN
Content unlocks
DAILY UNLOCKS IN THE UNIFORM PROJECT

DESIGN PATTERN
3.3 quest queue

DESIGN PATTERN
QUEST QUEuE
ZOMBIE FARM
GAME EXAMPLE

DESIGN PATTERN
QUEST QUEuE: example
EPIC WIN – SELF DESIGNED QUEST QUEUE
LINKED IN QUEST QUEUE

DESIGN PATTERN
3.4 time pressure

DESIGN PATTERN
Time pressure
CHESS TIMER
GAME EXAMPLE

DESIGN PATTERN
TIME PRESSURE
SWOOPO
EBAY BIDDING

DESIGN PATTERN
3.5 SCARCITY

DESIGN PATTERN
SCARCITY
VIP FISH IN ZYNGA
GAME EXAMPLE

DESIGN PATTERN
Scarcity: example
THE MILLION DOLLAR
HOMEPAGE

DESIGN PATTERN
Scarcity = SPECIALNESS
HOTPOT “BEST EVER”

in summary
return visitors
Advanced user paths
Content unlocks
Quest queue
Time pressure
Scarcity

METRICS

METRICS
IT’S MEASURABLE!
BE PREAPED TO MEASURE AND ITERATE

METRICS
IT’S MEASURABLE!
BE PREPARED TO MEASURE AND ITERATE

METRICS
IT’S MEASURABLE!
BE PREPARED TO MEASURE AND ITERATE
EACH PATTERN AND STAGE HAS UNIQUE METRICS

BUNCHBALL DASHBOARD
BE VERY CLEAR: WHAT’S THE USER PROPOSITION

METRICS EXAMPLE
+

IN SUMMARY
>
Game
mechanics

IN SUMMARY
A growing list of patterns…
COME AND TRY IT
BRING FRIENDS
COME BACK
Advanced user paths
Content Unlocks
Quest queue
Scarcity
Time pressure
Gated trial –
form a team
Social feedback
Reputation
Sharing milestones
Mischief
Visual cues
Tutorials
Ultra-responsiveness
Reward schedule
Disincentives

CASE STUDIES
Thanks to the following companies for
interviews, best practices and feedback:

CONTACT
NADYA DIREKOVA
nadya.direkova@gmail.com
@nadya_d

http://www.socialbeta.cn	888
http://rethinkcanada.tumblr.com	380
http://pe.ma	119
http://develop.alldayeveryday.com	117
http://www.hksilicon.com	113
http://michaelbatistich.com	112
http://www.chuanboxue.cn	46
http://xianguo.com	42
http://www.bokee.net	40
http://michaelbatistich.tumblr.com	10
http://paper.li	7
http://posterous.com	6
http://a0.twimg.com	5
http://reader.youdao.com	5
http://storify.com	5
https://twitter.com	5
https://mail.google.com	3
http://zhuaxia.com	3
http://www.zhuaxia.com	3
http://twitter.com	2
http://old.xianguo.com	2
http://pgsnws.blog.bokee.net	2
http://safe.tumblr.com	1
http://203.84.192.95	1
http://social.weizhuli.com	1
http://p.rethinkcanada.ca	1
http://socialbeta.cn	1
http://control.blog.sina.com.cn	1
http://feed.feedsky.com	1
http://mailreader.163.com	1
http://feeds.feedburner.com	1

Game on: 16 design patterns for user engagement

by Nadya Direkova on Jul 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

31 Embeds 1,924

Statistics

Game on: 16 design patterns for user engagement — Presentation Transcript