Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
design for humans
content strategy // interface design // user experience

www.lillimedia.com

@thekameronw @lillimedia
define:

digital storytelling

www.lillimedia.com

@thekameronw @lillimedia
audienceposture
User Interfaces
Wireframing content strategy

ux/ui
tone

information architecture
Experience Design

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

www.lillimedia.com
www.lillimedia.com

@thekameronw @lillimed...
what’s your favorite story?
why is it your favorite story?
what did you take away from the story?

www.lillimedia.com
www....
a good story comes
from intelligent
design...

www.lillimedia.com

@thekameronw @lillimedia
define:design
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
de·sign
/dəˈzīn/
to do or plan (something) with a specific purpose or intention in mind.

www.lillimedia.com

@thekameronw...
www.lillimedia.com

@thekameronw @lillimedia
let’s design a digital story...
www.lillimedia.com

@thekameronw @lillimedia
What makes a good story?
What does every story need?

www.lillimedia.com

@thekameronw @lillimedia
.good-story {
audience: !important;
content: relative;
plot: !important;
takeaway: absolute;
}
www.lillimedia.com

@thekam...
audience
www.lillimedia.com

@thekameronw @lillimedia
a list of segregated targets
who, what, when, where…?

www.lillimedia.com

@thekameronw @lillimedia
how do we find the right audience, kameron ?!

www.lillimedia.com

@thekameronw @lillimedia
there’s an easy way, and a hard way...

analytics
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
BUT WAIT!
THERE’S
MORE!
www.lillimedia.com

@thekameronw @lillimedia
the social media… lord and saviour

www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
so we know
who they are...
- _ - now what…??

www.lillimedia.com

@thekameronw @lillimedia
determine the...

MVP
www.lillimedia.com

@thekameronw @lillimedia
determine the...

MVP
MOST VALUABLE PLAYER

www.lillimedia.com

@thekameronw @lillimedia
determine the...

MVP
MOST VALUABLE PLAYER

www.lillimedia.com

@thekameronw @lillimedia
determine the...

MVC
MOST VALUABLE CONTENT

www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
so where this

MVC
at, yo?
www.lillimedia.com

@thekameronw @lillimedia
there’s an easy way, and a hard way...

analytics
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

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

www.lillimedia.com

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

understanding content consumption

t e a c h e s

u s

HOW TO CA...
our job as designers...
is to captivate our audience

www.lillimedia.com

@thekameronw @lillimedia
let’s continue designing our digital story...
www.lillimedia.com

@thekameronw @lillimedia
so far we know...

www.lillimedia.com

@thekameronw @lillimedia
so far we know...
- who we’re telling this story to...

www.lillimedia.com

@thekameronw @lillimedia
so far we know...
- who we’re telling this story to…
- how/where they prefer to consume content

www.lillimedia.com

@thek...
so far we know...
- who we’re telling this story to…
- how/where they prefer to consume content
- what they’ve deemed as i...
so far we know...
- who we’re telling this story to…
- how/where they prefer to consume content
- what they’ve deemed as i...
we also know...

www.lillimedia.com

@thekameronw @lillimedia
we also know...
- it’s our job to be captivating

www.lillimedia.com

@thekameronw @lillimedia
we also know...
- it’s our job to be captivating
- this story has to incite action

www.lillimedia.com

@thekameronw @lill...
how to:
understanding > captivation > action
www.lillimedia.com

@thekameronw @lillimedia
.good-story {
audience: !important;
content: relative;
plot: !important;
takeaway: absolute;
}
www.lillimedia.com

@thekam...
captivation is stimulating information
delivered

www.lillimedia.com

@thekameronw @lillimedia
captivation is stimulating information
delivered

OR is it…?

www.lillimedia.com

@thekameronw @lillimedia
sto·ry
/ˈstôrē/
a situation viewed in terms of the information
known about it or its similarity to another.

www.lillimedi...
Story: a situation viewed in terms of
the information known about it or its
similarity to another.
What is the the need of...
Story: a situation viewed in terms of
the information known about it or its
similarity to another.
Remember Content Consum...
Story: a situation viewed in terms of
the information known about it or its
similarity to another.
The user only knows wha...
Story: a situation viewed in terms of
the information known about it or its
similarity to another.
Who’s your competition,...
information architecture
the structural design of shared information
environments by means of organization, labeling,
sear...
information architecture
the structural design of shared information
environments by means of organization, labeling,
sear...
make it easier for them...

www.lillimedia.com

@thekameronw @lillimedia
information acquisition
keep it simple stupid...

www.lillimedia.com

@thekameronw @lillimedia
“intuitivity”
effective information architecture creates
interfaces on it’s own...
www.lillimedia.com

@thekameronw @lilli...
.good-story {
audience: !important;
content: relative;
plot: !important;
takeaway: absolute;
}
www.lillimedia.com

@thekam...
i.a. + content + u.i. =

the plot of our story

www.lillimedia.com

@thekameronw @lillimedia
I.A. + U.I = the plot of our story

www.lillimedia.com

@thekameronw @lillimedia
plot
/plät/
to devise the sequence of events in a story

www.lillimedia.com

@thekameronw @lillimedia
how to:
understanding > captivation > action
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
what’s the purpose
of a page...

www.lillimedia.com

@thekameronw @lillimedia
relevance vs. importance
the never ending battle

www.lillimedia.com

@thekameronw @lillimedia
reward interactions
(what happens next…?)

www.lillimedia.com

@thekameronw @lillimedia
i.a. + content + captivation = interfacing

www.lillimedia.com

@thekameronw @lillimedia
appropriate content
content mediums: captivate. captivate. captivate.
www.lillimedia.com

@thekameronw @lillimedia
how much is to much?
balance is key… listen to your users

www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
your interface(s) are all the
characters of your story

www.lillimedia.com

@thekameronw @lillimedia
so far we’ve learned...

www.lillimedia.com

@thekameronw @lillimedia
so far we’ve learned...
- audience: segregated targets based on information interests

www.lillimedia.com

@thekameronw @l...
so far we’ve learned...
- audience: segregated targets based on information interests
- content: the medium in which you e...
so far we’ve learned...
- audience: segregated targets based on information interests
- content: the medium in which you e...
.good-story {
audience: !important;
content: relative;
plot: !important;
takeaway: absolute;
}
www.lillimedia.com

@thekam...
www.lillimedia.com

@thekameronw @lillimedia
...the takeaway

www.lillimedia.com

@thekameronw @lillimedia
volunteers:
please return to the stage...

www.lillimedia.com

@thekameronw @lillimedia
today’s
takeaway
www.lillimedia.com

@thekameronw @lillimedia
people do not buy products
they purchase a better self-improvements

www.lillimedia.com

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

www.lillimedia.com

@thekameronw @lillimedia
you are not a designer...
you are a digital storyteller

www.lillimedia.com

@thekameronw @lillimedia
continue telling stories...

www.lillimedia.com

@thekameronw @lillimedia
www.lillimedia.com

@thekameronw @lillimedia
Upcoming SlideShare
Loading in …5
×

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

1,626 views

Published on

Published in: Marketing, Technology, Business
  • Be the first to comment

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

  1. 1. design for humans content strategy // interface design // user experience www.lillimedia.com @thekameronw @lillimedia
  2. 2. define: digital storytelling www.lillimedia.com @thekameronw @lillimedia
  3. 3. audienceposture User Interfaces Wireframing content strategy ux/ui tone information architecture Experience Design VOICE www.lillimedia.com conversion targets @thekameronw @lillimedia
  4. 4. what’s your favorite story? (book, movie, play, video game) www.lillimedia.com www.lillimedia.com @thekameronw @lillimedia @thekameronw @lillimedia
  5. 5. what’s your favorite story? why is it your favorite story? what did you take away from the story? www.lillimedia.com www.lillimedia.com @thekameronw @lillimedia @thekameronw @lillimedia
  6. 6. a good story comes from intelligent design... www.lillimedia.com @thekameronw @lillimedia
  7. 7. define:design www.lillimedia.com @thekameronw @lillimedia
  8. 8. www.lillimedia.com @thekameronw @lillimedia
  9. 9. www.lillimedia.com @thekameronw @lillimedia
  10. 10. www.lillimedia.com @thekameronw @lillimedia
  11. 11. de·sign /dəˈzīn/ to do or plan (something) with a specific purpose or intention in mind. www.lillimedia.com @thekameronw @lillimedia
  12. 12. www.lillimedia.com @thekameronw @lillimedia
  13. 13. let’s design a digital story... www.lillimedia.com @thekameronw @lillimedia
  14. 14. What makes a good story? What does every story need? www.lillimedia.com @thekameronw @lillimedia
  15. 15. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  16. 16. audience www.lillimedia.com @thekameronw @lillimedia
  17. 17. a list of segregated targets who, what, when, where…? www.lillimedia.com @thekameronw @lillimedia
  18. 18. how do we find the right audience, kameron ?! www.lillimedia.com @thekameronw @lillimedia
  19. 19. there’s an easy way, and a hard way... analytics www.lillimedia.com @thekameronw @lillimedia
  20. 20. www.lillimedia.com @thekameronw @lillimedia
  21. 21. www.lillimedia.com @thekameronw @lillimedia
  22. 22. www.lillimedia.com @thekameronw @lillimedia
  23. 23. BUT WAIT! THERE’S MORE! www.lillimedia.com @thekameronw @lillimedia
  24. 24. the social media… lord and saviour www.lillimedia.com @thekameronw @lillimedia
  25. 25. www.lillimedia.com @thekameronw @lillimedia
  26. 26. so we know who they are... - _ - now what…?? www.lillimedia.com @thekameronw @lillimedia
  27. 27. determine the... MVP www.lillimedia.com @thekameronw @lillimedia
  28. 28. determine the... MVP MOST VALUABLE PLAYER www.lillimedia.com @thekameronw @lillimedia
  29. 29. determine the... MVP MOST VALUABLE PLAYER www.lillimedia.com @thekameronw @lillimedia
  30. 30. determine the... MVC MOST VALUABLE CONTENT www.lillimedia.com @thekameronw @lillimedia
  31. 31. www.lillimedia.com @thekameronw @lillimedia
  32. 32. www.lillimedia.com @thekameronw @lillimedia
  33. 33. so where this MVC at, yo? www.lillimedia.com @thekameronw @lillimedia
  34. 34. there’s an easy way, and a hard way... analytics www.lillimedia.com @thekameronw @lillimedia
  35. 35. www.lillimedia.com @thekameronw @lillimedia
  36. 36. www.lillimedia.com @thekameronw @lillimedia
  37. 37. www.lillimedia.com @thekameronw @lillimedia
  38. 38. what does this have to do with storytelling & audience…? www.lillimedia.com @thekameronw @lillimedia
  39. 39. what does this have to do with storytelling & audience…? understanding content consumption t e a c h e s u s HOW TO CAPTIVATE OUR AUDIENCE www.lillimedia.com @thekameronw @lillimedia
  40. 40. our job as designers... is to captivate our audience www.lillimedia.com @thekameronw @lillimedia
  41. 41. let’s continue designing our digital story... www.lillimedia.com @thekameronw @lillimedia
  42. 42. so far we know... www.lillimedia.com @thekameronw @lillimedia
  43. 43. so far we know... - who we’re telling this story to... www.lillimedia.com @thekameronw @lillimedia
  44. 44. so far we know... - who we’re telling this story to… - how/where they prefer to consume content www.lillimedia.com @thekameronw @lillimedia
  45. 45. so far we know... - who we’re telling this story to… - how/where they prefer to consume content - what they’ve deemed as important www.lillimedia.com @thekameronw @lillimedia
  46. 46. 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 www.lillimedia.com @thekameronw @lillimedia
  47. 47. we also know... www.lillimedia.com @thekameronw @lillimedia
  48. 48. we also know... - it’s our job to be captivating www.lillimedia.com @thekameronw @lillimedia
  49. 49. we also know... - it’s our job to be captivating - this story has to incite action www.lillimedia.com @thekameronw @lillimedia
  50. 50. how to: understanding > captivation > action www.lillimedia.com @thekameronw @lillimedia
  51. 51. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  52. 52. captivation is stimulating information delivered www.lillimedia.com @thekameronw @lillimedia
  53. 53. captivation is stimulating information delivered OR is it…? www.lillimedia.com @thekameronw @lillimedia
  54. 54. sto·ry /ˈstôrē/ a situation viewed in terms of the information known about it or its similarity to another. www.lillimedia.com @thekameronw @lillimedia
  55. 55. 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? www.lillimedia.com @thekameronw @lillimedia
  56. 56. 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? www.lillimedia.com @thekameronw @lillimedia
  57. 57. 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 knows know what the user needs before they do... www.lillimedia.com @thekameronw @lillimedia
  58. 58. 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? www.lillimedia.com @thekameronw @lillimedia
  59. 59. information architecture the structural design of shared information environments by means of organization, labeling, search and navigation systems www.lillimedia.com @thekameronw @lillimedia
  60. 60. information architecture the structural design of shared information environments by means of organization, labeling, search and navigation systems www.lillimedia.com @thekameronw @lillimedia
  61. 61. make it easier for them... www.lillimedia.com @thekameronw @lillimedia
  62. 62. information acquisition keep it simple stupid... www.lillimedia.com @thekameronw @lillimedia
  63. 63. “intuitivity” effective information architecture creates interfaces on it’s own... www.lillimedia.com @thekameronw @lillimedia
  64. 64. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  65. 65. i.a. + content + u.i. = the plot of our story www.lillimedia.com @thekameronw @lillimedia
  66. 66. I.A. + U.I = the plot of our story www.lillimedia.com @thekameronw @lillimedia
  67. 67. plot /plät/ to devise the sequence of events in a story www.lillimedia.com @thekameronw @lillimedia
  68. 68. how to: understanding > captivation > action www.lillimedia.com @thekameronw @lillimedia
  69. 69. www.lillimedia.com @thekameronw @lillimedia
  70. 70. www.lillimedia.com @thekameronw @lillimedia
  71. 71. what’s the purpose of a page... www.lillimedia.com @thekameronw @lillimedia
  72. 72. relevance vs. importance the never ending battle www.lillimedia.com @thekameronw @lillimedia
  73. 73. reward interactions (what happens next…?) www.lillimedia.com @thekameronw @lillimedia
  74. 74. i.a. + content + captivation = interfacing www.lillimedia.com @thekameronw @lillimedia
  75. 75. appropriate content content mediums: captivate. captivate. captivate. www.lillimedia.com @thekameronw @lillimedia
  76. 76. how much is to much? balance is key… listen to your users www.lillimedia.com @thekameronw @lillimedia
  77. 77. www.lillimedia.com @thekameronw @lillimedia
  78. 78. www.lillimedia.com @thekameronw @lillimedia
  79. 79. www.lillimedia.com @thekameronw @lillimedia
  80. 80. www.lillimedia.com @thekameronw @lillimedia
  81. 81. www.lillimedia.com @thekameronw @lillimedia
  82. 82. www.lillimedia.com @thekameronw @lillimedia
  83. 83. www.lillimedia.com @thekameronw @lillimedia
  84. 84. www.lillimedia.com @thekameronw @lillimedia
  85. 85. your interface(s) are all the characters of your story www.lillimedia.com @thekameronw @lillimedia
  86. 86. so far we’ve learned... www.lillimedia.com @thekameronw @lillimedia
  87. 87. so far we’ve learned... - audience: segregated targets based on information interests www.lillimedia.com @thekameronw @lillimedia
  88. 88. 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) www.lillimedia.com @thekameronw @lillimedia
  89. 89. 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 www.lillimedia.com @thekameronw @lillimedia
  90. 90. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  91. 91. www.lillimedia.com @thekameronw @lillimedia
  92. 92. ...the takeaway www.lillimedia.com @thekameronw @lillimedia
  93. 93. volunteers: please return to the stage... www.lillimedia.com @thekameronw @lillimedia
  94. 94. today’s takeaway www.lillimedia.com @thekameronw @lillimedia
  95. 95. people do not buy products they purchase a better self-improvements www.lillimedia.com @thekameronw @lillimedia
  96. 96. readers do not subscribe... they fulfill their need to solve problems www.lillimedia.com @thekameronw @lillimedia
  97. 97. you are not a designer... you are a digital storyteller www.lillimedia.com @thekameronw @lillimedia
  98. 98. continue telling stories... www.lillimedia.com @thekameronw @lillimedia
  99. 99. www.lillimedia.com @thekameronw @lillimedia

×