design for humans by: kameron williams (wordcamp phoenix 2014)

99
www.lillimedia.com @thekameronw @lillimedia design for humans content strategy // interface design // user experience

Upload: kameron-williams

Post on 15-Jun-2015

1.128 views

Category:

Marketing


0 download

TRANSCRIPT

Page 1: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

design for humanscontent strategy // interface design // user experience

Page 2: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

digital storytellingdefine:

Page 3: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

User InterfacesWireframing

ux/ui information architectureExperience Design

posture

tone VOICE

content strategy

audience

targetsconversion

Page 4: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

what’s your favorite story?(book, movie, play, video game)

www.lillimedia.com @thekameronw @lillimedia

Page 5: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

what’s your favorite story?why is it your favorite story?

what did you take away from the story?

www.lillimedia.com @thekameronw @lillimedia

Page 6: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

a good story comes from intelligent design...

Page 7: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

define:design

Page 8: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 9: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 10: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 11: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

de·sign/dəˈzīn/

to do or plan (something) with a specific purpose or intention in mind.

Page 12: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 13: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

let’s design a digital story...

Page 14: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

What makes a good story?

What does every story need?

Page 15: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

.good-story { audience: !important; content: relative; plot: !important; takeaway: absolute;}

Page 16: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

audience

Page 17: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

a list of segregated targets

who, what, when, where…?

Page 18: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

how do we find the right audience, kameron ?!

Page 19: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

there’s an easy way, and a hard way...

analytics

Page 20: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 21: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 22: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 23: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

BUT WAIT! THERE’S MORE!

Page 24: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

the social media… lord and saviour

Page 25: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 26: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

- _ - now what…??

so we know who they are...

Page 27: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

determine the...

MVP

Page 28: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

determine the...

MVPMOST VALUABLE PLAYER

Page 29: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

determine the...

MVPMOST VALUABLE PLAYER

Page 30: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

determine the...

MVCMOST VALUABLE CONTENT

Page 31: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 32: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 33: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so where this

M V Cat, yo?

Page 34: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

there’s an easy way, and a hard way...

analytics

Page 35: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 36: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 37: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 38: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

what does this have to do with storytelling & audience…?

Page 39: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

understanding content consumption

t e a c h e s u sHOW TO CAPTIVATE

OUR AUDIENCE

what does this have to do with storytelling & audience…?

Page 40: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

our job as designers...is to captivate our audience

Page 41: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

let’s continue designing our digital story...

Page 42: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we know...

Page 43: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we know...

- who we’re telling this story to...

Page 44: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we know...

- who we’re telling this story to…- how/where they prefer to consume content

Page 45: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we know...

- who we’re telling this story to…- how/where they prefer to consume content- what they’ve deemed as important

Page 46: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we know...

- who we’re telling this story to…- how/where they prefer to consume content- what they’ve deemed as important- where their interests lay

Page 47: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

we also know...

Page 48: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

we also know...

- it’s our job to be captivating

Page 49: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

we also know...

- it’s our job to be captivating- this story has to incite action

Page 50: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

understanding > captivation > action

how to:

Page 51: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

.good-story { audience: !important; content: relative; plot: !important; takeaway: absolute;}

Page 52: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

captivation is stimulating information delivered

Page 53: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

captivation is stimulating information delivered

OR is it…?

Page 54: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

sto·ry/ ˈ s t ô r ē /

a situation viewed in terms of the information known about it or its similarity to another.

Page 55: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Story: a situation viewed in terms of the information known about it or its similarity to another.

What is the the need of the user? Are you valuable?

Page 56: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Story: a situation viewed in terms of the information known about it or its similarity to another.

Remember Content Consumption: shared / viewed / read / watched / listened to...what resonates with your audience?

Page 57: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Story: a situation viewed in terms of the information known about it or its similarity to another.

The user only knows what the user only knowsknow what the user needs before they do...

Page 58: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Story: a situation viewed in terms of the information known about it or its similarity to another.

Who’s your competition, and how do you compare to them?

Page 59: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

the structural design of shared information environments by means of organization, labeling,

search and navigation systems

information architecture

Page 60: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

the structural design of shared information environments by means of organization, labeling,

search and navigation systems

information architecture

Page 61: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

make it easier for them...

Page 62: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

information acquisitionkeep it simple stupid...

Page 63: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

“intuitivity”effective information architecture creates

interfaces on it’s own...

Page 64: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

.good-story { audience: !important; content: relative; plot: !important; takeaway: absolute;}

Page 65: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

the plot of our storyi.a. + content + u.i. =

Page 66: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

I.A. + U.I = the plot of our story

Page 67: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

plot/ p l ä t /

to devise the sequence of events in a story

Page 68: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

understanding > captivation > action

how to:

Page 69: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 70: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 71: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

what’s the purposeof a page...

Page 72: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

relevance vs. importancethe never ending battle

Page 73: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

reward interactions(what happens next…?)

Page 74: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

i.a. + content + captivation = interfacing

Page 75: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

appropriate contentcontent mediums: captivate. captivate. captivate.

Page 76: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

how much is to much?balance is key… listen to your users

Page 77: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 78: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 79: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 80: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 81: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 82: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 83: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 84: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 85: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

your interface(s) are all the characters of your story

Page 86: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we’ve learned...

Page 87: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we’ve learned...

- audience: segregated targets based on information interests

Page 88: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we’ve learned...

- audience: segregated targets based on information interests- content: the medium in which you engage and create dialogue with your audience (to captivate)

Page 89: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

so far we’ve learned...

- audience: segregated targets based on information interests- content: the medium in which you engage and create dialogue with your audience (to captivate)- plot: using content, I/A, and UI to create sequential actions: moving a user toward a goal

Page 90: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

.good-story { audience: !important; content: relative; plot: !important; takeaway: absolute;}

Page 91: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

Page 92: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

...the takeaway

Page 93: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

volunteers:please return to the stage...

Page 94: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

today’s takeaway

Page 95: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

people do not buy products

they purchase a better self-improvements

Page 96: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

readers do not subscribe...they fulfill their need to solve problems

Page 97: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

you are not a designer...you are a digital storyteller

Page 98: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia

continue telling stories...

Page 99: Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

www.lillimedia.com @thekameronw @lillimedia