@cattsmall
Beyond Gamification
More important lessons we can learn from game design
FOWD NYC 2015 – Catt Small (@cattsmall)
@cattsmall@cattsmall
• Product Designer, SoundCloud
• Game developer, Brooklyn Gamery
• Co-founder, Code Liberation
I’m Catt Small!
@cattsmall@cattsmall
• The state of user experience
• UX vs. game design process
• What UX can learn from games
• The future of games and UX
Today we’ll talk about:
@cattsmall@cattsmall
The state of UX
@cattsmall@cattsmall
Jurassic Park
UX is a
HYBRID
@cattsmall@cattsmall
Jurassic Park
The field is constantly
EVOLVING
@cattsmall@cattsmall
UX vs. game design
@cattsmall@cattsmall
UX Game Design
@cattsmall@cattsmall
Jurassic Park
Interaction with interfaces
@cattsmall@cattsmall
Removing friction
Arranging information to help users accomplish tasks
Step 1 Step 2 Step 3 Step 4
@cattsmall@cattsmall
Removing frustration
Creating challenges that keep players engaged
Challenge 1
Complicated
challenge
Challenge 3 Challenge 4
@cattsmall@cattsmall
Useful
Meaningful
@cattsmall@cattsmall
Jurassic Park
Familiar processes
@cattsmall@cattsmall
Emoji-only
messenger
Ideation
Magical girl
roguelike
Pachinko meets
Brick Breaker
with ponies
Cheese fighting
game
AR transaction
system
Social network
for email threads
@cattsmall@cattsmall
Prototyping
@cattsmall@cattsmall
Testing
What is that?
I thought they
would know what
that is. Hmm!
@cattsmall@cattsmall
Documentation
1. Logo Screen
Game Launch
2. Main Menu
4. Achievements
5. Encyclopedia
6. Options
7. Store
(List of Items)
7.2. Item
Information
7.3. Purchase Item7.1. Store Section
3. Level Select 3.2. Tank Select
3.3. Gameplay
Level
3.4. Win/Lose
Screen
3.5. Pause Screen
Level Select Next Level/Replay
3.2.1. Tank
Upgrade (Store
Section)
View Tank
Play game
@cattsmall@cattsmall
In case
What UX can
learn from games
@cattsmall@cattsmall
Balance complexity
with value
@cattsmall@cattsmall
Jurassic Park
Value for
TIME SPENT
@cattsmall@cattsmall
Very interesting
More meaning than complexity
@cattsmall@cattsmall
Very confusing
Not enough meaning, too much complexity
@cattsmall@cattsmall
At least a 1:1 ratio
ComplexityValue
@cattsmall@cattsmall
Five Stages, © Asia Hoe, Catt Small & Chris Algoo
@cattsmall@cattsmall
Break it down
Feature
goal
Part 1
Part 2
Part 3
@cattsmall@cattsmall
Share
tracks on
SoundCloud
Upload track
to system
Allow users
to comment
on track
Create
stream of
tracks
@cattsmall@cattsmall
Be consistent
across platforms
@cattsmall@cattsmall
Both games © SEGA
Sonic 2, Game GearSonic 2, Genesis/Mega Drive
@cattsmall@cattsmall
Just right
Spelunky, © Mossmouth, LLC
@cattsmall@cattsmall
Prism Shell, © Brooklyn Gamery
@cattsmall@cattsmall
Since 2011,
MORE SMARTPHONES
have sold than computers
@cattsmall@cattsmall
Don’t assume anything
About how people use your services
@cattsmall@cattsmall
:D
:D
:D
@cattsmall@cattsmall
Focus on the “feel”
@cattsmall@cattsmall
GAME
FEEL
@cattsmall@cattsmall
Both games © Vlambeer
Nuclear ThroneLUFTRAUSER
@cattsmall@cattsmall
Your product should give
FEEDBACK
@cattsmall@cattsmall
@cattsmall@cattsmall
phandroid.com/2015/11/03/twitter-star-fav-button-replaced-with-heart-likes
@cattsmall@cattsmall
Test more than just
PROTOTYPES
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
Your product should feel
RESPONSIVE
@cattsmall@cattsmall
Connect with your users
@cattsmall@cattsmall
Easter eggs are
RELATABLE
@cattsmall@cattsmall
Game Players Game Makers
@cattsmall@cattsmall
Sonic Generations, © SEGA
@cattsmall@cattsmall
Sonic Generations, © SEGA
@cattsmall@cattsmall
Your product has
PERSONALITY
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
news.en.softonic.com/google-hangouts-easter-eggs-lets-you-change-background-colors-release-ponies
@cattsmall@cattsmall
BOND
@cattsmall@cattsmall
Capitalize on emotions
@cattsmall@cattsmall
FUN
@cattsmall@cattsmall
MEMORABLE
@cattsmall@cattsmall
Dys4ia, © Anna Anthropy
@cattsmall@cattsmall
Contrast, © Compulsion Games
@cattsmall@cattsmall
Prism Shell, © Brooklyn Gamery
@cattsmall@cattsmall
@cattsmall@cattsmall
In caseThe future
@cattsmall@cattsmall
It will
BLEND!
@cattsmall@cattsmall
MEANINGFUL
EXPERIENCES
@cattsmall@cattsmall
ACHIEVEMENTS
LEVELING UP
@cattsmall@cattsmall
STRATEGY
MOOD
EMOTIONS
@cattsmall@cattsmall
Recap!
@cattsmall@cattsmall
• How people interact with interfaces
• UX is about removing friction
• Game design is about challenging players
• Both involve ideation, prototyping,
testing, & documentation
UX & game design
@cattsmall@cattsmall
• Ensure that complexity has value
• Create a cohesive cross-platform system
• Focus on the feedback and feel
• Connect with users through personality
• Capitalize on emotions
Beyond gamification…
@cattsmall@cattsmall
• Prune (iOS)
• Spelltower (Android, iOS, Mac)
• TwoDots (Android, iOS)
• Home Improvisation (Mac, Windows)
• Lumino City (Mac, Windows)
Games with great UX
@cattsmall@cattsmall
• Playful Design

by John Ferrara
• The Art of Game Design

by Jesse Schell
• Game Feel

by Steve Swink
• A Game Design Vocabulary

by Anna Anthropy & Naomi Clark
Books
@cattsmall@cattsmall
• Gamasutra

gamasutra.com
• That Game’s UX

thatgamesux.com
• The Independent Gaming Source

tigsource.com
• Sirlin on Game Design

sirlin.net
Websites
@cattsmall@cattsmall
Go forth and create!
@cattsmall
Thank you!
Questions?
Tweet @cattsmall
Email catt@cattsmall.com
Work with me: soundcloud.com/jobs

FOWD NYC 2015 – Beyond gamification: more important lessons we can learn from game design