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

@cattsmall

Beyond GamificationMore 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 frictionArranging information to help users accomplish tasks

Step 1 Step 2 Step 3 Step 4

@cattsmall@cattsmall

Removing frustrationCreating challenges that keep players engaged

Challenge 1Complicated

challengeChallenge 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

Documentation1. 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 caseWhat UX can

learn from games

@cattsmall@cattsmall

Balance complexity with value

@cattsmall@cattsmall

Jurassic Park

Value for

TIME SPENT

@cattsmall@cattsmall

Very interestingMore meaning than complexity

@cattsmall@cattsmall

Very confusingNot 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 anythingAbout 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 Designby John Ferrara

• The Art of Game Design by Jesse Schell

• Game Feelby Steve Swink

• A Game Design Vocabulary by Anna Anthropy & Naomi Clark

Books

@cattsmall@cattsmall

• Gamasutra gamasutra.com

• That Game’s UXthatgamesux.com

• The Independent Gaming Sourcetigsource.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