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.

Fun on First Click - Workshop Slides - Sebastian Deterding

789 views

Published on

Fun on First Click: Convert Visitors into Passionate (Paying) Customers with Onboarding
The workshop took place at UXI Studio conference in Israel

Published in: Design
  • Are You Heartbroken? Don't be upset, let Justin help you get your Ex back. ★★★ http://goo.gl/FXTq7P
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Fun on First Click - Workshop Slides - Sebastian Deterding

  1. 1. fun on first clickconvert visitors into passionate (paying) customers with onboarding Sebastian Deterding (@dingstweets) UXI Studio December 16, 2014
  2. 2. a story
  3. 3. briefing »Design a smart phone for elderly«
  4. 4. your ideas?
  5. 5. »silver phones«
  6. 6. people hate them
  7. 7. people want features
  8. 8. this is not the problem
  9. 9. this is.
  10. 10. and a solution
  11. 11. why care?
  12. 12. PAYING CUSTOMER (product) AD IMPRESSION (marketing) ... ... THEN A MIRACLE OCCURS
  13. 13. a long way to go
  14. 14. a long way to go Paying user Invitation
  15. 15. a long way to go Paying user Invitation Marketing
  16. 16. a long way to go Paying user Invitation Product
  17. 17. a long way to go Paying user Invitation ???
  18. 18. a long way to go First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  19. 19. a long way to go First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase aka »onboarding« First use
  20. 20. First contact Orientation Registration Paying user Invitation Engagement Re-engagement Purchase First use aka conversion funnel a long way to go
  21. 21. but the big ones don’t do it?!?
  22. 22. josh elman,ex product lead growth @twitter »Most people have heard of Twitter, so we get the luxury of having a blank home page that just says ‘sign up’ — I actually don’t encourage this for most sites early in their stages, because most people who come to your sites have no frickin’ clue, and they’re not just gonna sign up without some rationale. Just be careful not to copy the people who are much, much larger.« three growth hacks (2013)
  23. 23. and actually, they do
  24. 24. Games! Games?
  25. 25. freemium business model ...
  26. 26. + thousands of free competitors =
  27. 27. fun on first* click
  28. 28. fun on first* click * or third – we’re not that picky :-)
  29. 29. Marc Pincus »We believe in those first three clicks, you decide whether or not you want to check out more of it. In the uber-casual place that we all exist in now, it’s a three click deal. We either sold you or we didn’t.« ceo, zynga (2011) https://gigaom.com/2011/10/11/zynga-three-click-rule/
  30. 30. what about mobile?
  31. 31. same goals & info,different canvas
  32. 32. landing Plus app store page
  33. 33. Our Journey today Paying user Invitation coffee 10:40-11:10 lunch 12:20-13:20 16:30 First impression Orientation Registration Onboarding Re-engagement Purchase First use coffee 14:45-15:15 end
  34. 34. our mountain and map Work on your own site/ app, work on gett if you don’t have one
  35. 35. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  36. 36. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  37. 37. goal: tell me »why«
  38. 38. Pop Quiz! The product is awesome! The company is awesome! The experience is awesome! A B C
  39. 39. Pop Quiz! The product is awesome! The company is awesome! The experience is awesome! A B C
  40. 40. Pop Quiz! The product is awesome! The company is awesome! The experience is awesome! A B C
  41. 41. Pop Quiz! I am awesome! D
  42. 42. Better X
  43. 43. Better X
  44. 44. Better X Better user of X*
  45. 45. how to identify »why«?
  46. 46. <1/2> jobs to be done
  47. 47. Theodore levitt »People don’t want to buy a quarter inch drill. They want a quarter inch hole.« qtd. in what customers want (2006) http://hbswk.hbs.edu/item/5170.html
  48. 48. clayton christensen »People don’t go round looking for products to buy. Instead, they take life as it comes and when they encounter a problem, they look for a solution – and at that point, they’ll hire a product or service. It it is the job, and not the customer or the product, that should be the fundamental unit of analysis.« breaking news (2012)
  49. 49. job 1 On my morning commute, I want to keep myself busy and fed without making stains so I don’t feel bored.
  50. 50. job 1 On my morning commute, I want to keep myself busy and fed without making stains so I don’t feel bored. competition Donuts Bagels Bananas
  51. 51. job 1 On my morning commute, I want to keep myself busy and fed without making stains so I don’t feel bored. competition Donuts Bagels Bananas improvements Thinner straw, thicker shake Self-service kiosk Surprising fruit pieces
  52. 52. job 2 In the supermarket, let me give my kid an innocuous treat so I can not feel guilty about always saying no. competition Sundaes Cookies Toys improvements Thicker straws Smaller cups
  53. 53. In ___________________________ I want to _____________________ so I can ______________________. outcome (action + object + quality) situation motive
  54. 54. In ___________________________ I want to _____________________ so I can ______________________. outcome situation motive my morning commute keep me busy without making stains object action quality not feel bored
  55. 55. In ___________________________ I want to _____________________ so I can ______________________. outcome situation motive my small business every three months file VAT reports as fast as possible without missing savings can get back to what I’m good at and enjoy
  56. 56. Motive Outcome Visual
  57. 57. Outcome Motive Visual
  58. 58. <2/2> top tasks & care words
  59. 59. top tasks & care words
  60. 60. users have a few »top tasks« ...
  61. 61. enabled by specific features ...
  62. 62. …expressed in specific words
  63. 63. “Does it come with a cartridge included?”
  64. 64. so how do we find those?
  65. 65. The limits of self-report We can report recent experiences, general beliefs, attitudes, values We fail at detailed memory, future action, irrelevant things, unconscious processes Stick to actual, recent experiences Ask for experienced thoughts, emotions & from there to connected attitudes, needs
  66. 66. who just switched to your product?
  67. 67. Laddering Why? Why? Why? Why? Why? Laddering http://madpow.com/Insights/WhitePapers/Laddering--A-Research-Interview-Technique.aspx
  68. 68. p. 1: interview users 1. Form teams of two or more who work on Gett or your own example 2. In your team, find the person who has most recently signed up for or switched to it – the interviewee. The others are interviewers. 3. The interviewers ask the interviewee and make notes on answers: • Remember the situation when you were signing up/switching to X. Can you describe the situation? • What went through your mind when you considered signing up/switching? • Do you remember anything in specific where you thought “great – just what I’ve been looking for”? Anything you remember you looked for but didn’t find? • What held you back from signing up/switching? (Follow up with 5 Whys.) • What made you sign up/switch in the end? • When and where did you last use X (context)? Can you describe the situation? • Why did you use it (motive)? (Follow up with 5 Whys.) • How did you determine that X succeeded/failed to satisfy that goal (outcome)? • Is there something that specifically pleases you when you use X – that makes not want to switch? • Is there something that annoys you when you use X – that makes you want to switch?
  69. 69. p. 1: interview users 1. Form teams of two or more who work on Gett or your own example 2. In your team, find the person who has most recently signed up for or switched to it – the interviewee. The others are interviewers. 3. The interviewers ask the interviewee and make notes on answers: • Remember the situation when you were signing up/switching to X. Can you describe the situation? • What went through your mind when you considered signing up/switching? • Do you remember anything in specific where you thought “great – just what I’ve been looking for”? Anything you remember you looked for but didn’t find? • What held you back from signing up/switching? (Follow up with 5 Whys.) • What made you sign up/switch in the end? • When and where did you last use X (context)? Can you describe the situation? • Why did you use it (motive)? (Follow up with 5 Whys.) • How did you determine that X succeeded/failed to satisfy that goal (outcome)? • Is there something that specifically pleases you when you use X – that makes not want to switch? • Is there something that annoys you when you use X – that makes you want to switch?
  70. 70. p. 2: find job stories & care words 1. Translate your interview notes in one or more job stories, ideally in the words of the interviewee. Note care words for each job story that stood out to you, e.g. “all cinemas in town”, “no pickup of tickets necessary”. Template: In situation I want to outcome (= action + target object + outcome quality) so I can motive. Example: On the go, I want to get movie tickets instantly from all theaters so I can spontaneously go out at night. Care words: all theatres, no pickup lines Write stories down here
  71. 71. p. 2: find job stories & care words 1. Translate your interview notes in one or more job stories, ideally in the words of the interviewee. Note care words for each job story that stood out to you, e.g. “all cinemas in town”, “no pickup of tickets necessary”. Template: In situation I want to outcome (= action + target object + outcome quality) so I can motive. Example: On the go, I want to get movie tickets instantly from all theaters so I can spontaneously go out at night. Care words: all theatres, no pickup lines Write stories down here
  72. 72. p. 2: identify main job story 1. Together, decide what the main job story is, and note it down. If you have several job stories and no clear main one, you may have to create a new “meta” job story that holds all others together – e.g. “On the go, I want to get every movie ticket instantly so I can go out spontaneously without standing in line” instead of “On the go, I want to find tickets ...”, “… purchase tickets”, “… print tickets”, etc. 2. Note what features of your app support the job story, e.g. “mobile search of global cinema showings database” Write story down here
  73. 73. p. 2: identify main job story 1. Together, decide what the main job story is, and note it down. If you have several job stories and no clear main one, you may have to create a new “meta” job story that holds all others together – e.g. “On the go, I want to get every movie ticket instantly so I can go out spontaneously without standing in line” instead of “On the go, I want to find tickets ...”, “… purchase tickets”, “… print tickets”, etc. 2. Note what features of your app support the job story, e.g. “mobile search of global cinema showings database” Write story down here
  74. 74. 1. Use the main job story elements to fill in the claim and blurb of your head visual: Your claim mirrors the motive, e.g. “Last Minute Movie Night – Without the Lines” Your blurb states your situation and outcome, and how your features support it, e.g. “Find and buy tickets for all movies in town with the world’s largest movie platform. Walk right through with mobile ticket – no ticket pickup lines” 2. Insert claim and blurb into your landing page on p. 3 3. Together, determine an image that best shows the main job story, and sketch it in the key visual p. 2-5: design claim and blurb Insert claim here Insert blurb here Sketch an image that shows how your app gets the job done
  75. 75. 1. Use the main job story elements to fill in the claim and blurb of your head visual: Your claim mirrors the motive, e.g. “Last Minute Movie Night – Without the Lines” Your blurb states your situation and outcome, and how your features support it, e.g. “Find and buy tickets for all movies in town with the world’s largest movie platform. Walk right through with mobile ticket – no ticket pickup lines” 2. Insert claim and blurb into your landing page on p. 3 3. Together, determine an image that best shows the main job story, and sketch it in the key visual p. 2-5: design claim and blurb Insert claim here Insert blurb here Sketch an image that shows how your app gets the job done
  76. 76. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  77. 77. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  78. 78. Goal: show me »how«
  79. 79. xunzi »I hear and I forget; I see and I remember; I do and I understand.« confucian philosopher (312-230 bc) pattern #1
  80. 80. do > show > tell
  81. 81. do > show > tell text image/gif/video trial run
  82. 82. tell
  83. 83. tell
  84. 84. show
  85. 85. callouts
  86. 86. do
  87. 87. do
  88. 88. = investment before commitment
  89. 89. always be closing pattern #2
  90. 90. multi-screen: at each screen
  91. 91. multi-screen: at each screen
  92. 92. multi-screen: at each screen
  93. 93. single-screen: persistent head
  94. 94. single-screen: persistent head
  95. 95. single-screen: persistent head
  96. 96. single screen: repeated throughout
  97. 97. show there’s more pattern #3
  98. 98. <1/3> key jobs/tasks
  99. 99. Claim = motive Blurb = how features produce outcome in context visual shows how
  100. 100. Claim + blurb for job/task 2 visual shows how visual shows how Claim + blurb for job/task 1
  101. 101. Claim/blurb/visual for each job/task Main job claim/blurb/visual
  102. 102. Claim + blurb for job visual shows how Claim + blurb for job visual shows how
  103. 103. Claim/blurb/visual chunks for each job
  104. 104. Claim + blurb for job visual shows how
  105. 105. Claim + blurb for job visual shows how
  106. 106. on mobile?
  107. 107. on mobile? Claim + blurb for job visual shows how
  108. 108. Screens = jobs/tasks on mobile? Claim + blurb for job visual shows how
  109. 109. complex: multiple jobs
  110. 110. simple: multiple tasks
  111. 111. simple: multiple tasks
  112. 112. p. 7-10: find jobs/tasks 1. If you have a complex service, what are the 3-4 jobs it supports? Write those down as job/task 1, 2, 3, 4. If you have a simple service, translate the tasks into jobs/tasks 1, 2, 3, 4. 2. For each job/task, write down the tasks/interactions it takes to get it done. 3. For each job/task, write down care words you found in the interview. 4. Note which features of X support each job/task Make these entries for each job/task Then, fill in these for each job/task
  113. 113. p. 7-10: find jobs/tasks 1. If you have a complex service, what are the 3-4 jobs it supports? Write those down as job/task 1, 2, 3, 4. If you have a simple service, translate the tasks into jobs/tasks 1, 2, 3, 4. 2. For each job/task, write down the tasks/interactions it takes to get it done. 3. For each job/task, write down care words you found in the interview. 4. Note which features of X support each job/task Make these entries for each job/task Then, fill in these for each job/task
  114. 114. <2/3> Proof: back up your claims
  115. 115. Show me the data
  116. 116. Show me the data
  117. 117. “live” data = alive product
  118. 118. known,trusted brands
  119. 119. reviews and scores
  120. 120. trust indicators
  121. 121. p. 7-10: come up with proof 1. For each job/task, note 1 proof to back up your claim that X gets it done: - (Live) data: a meaningful number that relates to the job/task - Trust indicators for sensitive personal data: VeriSign, TrustE logos, contact details/phone number, statements about encryption, data use, etc. - reviews & awards - Trusted brands using your app/service - Tech specs that users care about for this job - Feature comparison with competitors Note: Some proof (like awards) speaks to the total app/service, not just one specific job/task – that’s okay. Fill in here
  122. 122. p. 7-10: come up with proof 1. For each job/task, note 1 proof to back up your claim that X gets it done: - (Live) data: a meaningful number that relates to the job/task - Trust indicators for sensitive personal data: VeriSign, TrustE logos, contact details/phone number, statements about encryption, data use, etc. - reviews & awards - Trusted brands using your app/service - Tech specs that users care about for this job - Feature comparison with competitors Note: Some proof (like awards) speaks to the total app/service, not just one specific job/task – that’s okay. Fill in here
  123. 123. <3/3> Testimonials
  124. 124. = stories with faces behind them
  125. 125. elance invision
  126. 126. Basecamp ultra Deluxe Version
  127. 127. Anatomy of a Testimonial
  128. 128. Anatomy of a Testimonial a real face and name (no stock photo!) Trustworthy: someone like you, someone you know and aspire to, someone with the same job to be done as you and expertise
  129. 129. Anatomy of a Testimonial a title and known branwd Informational and trustworthy: Qualifies the expertise of the person (for those who don’t know/recognize her)
  130. 130. Anatomy of a Testimonial a real-life story Convincing, memorable: Real-life events with concrete detail that show how X gets the job done and what that means to the person (this one does the latter, not the former)
  131. 131. Anatomy of a Testimonial a real-life story This one does a better job: concrete detail plus valued outcome of that. (Also note the neat use of the brand logo)
  132. 132. Anatomy of a Testimonial Testimonial includes specific detail data to back it up, does neat highlighting - and follows up with a video: wow.
  133. 133. can’t see the trees for the wood
  134. 134. spread faces/testimonials Lead your eye through the screen, stand out individually
  135. 135. p. 7-10: write testimonials 1. For each job/task, think: Who would your users know and trust about judging the job to be done? Who would they aspire to be? Note their name, title, and organization/brand under “Testimonial”. 2. Underneath, write in everyday language a story (concrete, everyday detail) how they got that job/ task done with your app, and what that means to them Fill in here
  136. 136. p. 7-10: write testimonials 1. For each job/task, think: Who would your users know and trust about judging the job to be done? Who would they aspire to be? Note their name, title, and organization/brand under “Testimonial”. 2. Underneath, write in everyday language a story (concrete, everyday detail) how they got that job/ task done with your app, and what that means to them Fill in here
  137. 137. sketching time!
  138. 138. p. 11 fill landing page w/ jobs 1. Order your 3-4 jobs/tasks chronologically. In this order, turn each main job/task info (p. 8-10) into one landing page block (p. 4-6) Write the MOTIVE (“so I can ___”) as claim here. Write CONTEXT and OUTCOME with FEATURES and CARE WORDS here Write TESTIMONIAL here Sketch screen INTERACTION/TASK that shows how your app/service gets this job/task done Write/sketch one PROOF here – ideally directly related to this specific job/task
  139. 139. p. 11 fill landing page w/ jobs 1. Order your 3-4 jobs/tasks chronologically. In this order, turn each main job/task info (p. 8-10) into one landing page block (p. 4-6) Write the MOTIVE (“so I can ___”) as claim here. Write CONTEXT and OUTCOME with FEATURES and CARE WORDS here Write TESTIMONIAL here Sketch screen INTERACTION/TASK that shows how your app/service gets this job/task done Write/sketch one PROOF here – ideally directly related to this specific job/task
  140. 140. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  141. 141. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  142. 142. Goal: let me in
  143. 143. Minimize effort pattern #1
  144. 144. use web form design best practices pattern #2 Smart defaults Auto-suggest Contextual hints Forgiving input etc. etc.
  145. 145. use identity from other services* pattern #3
  146. 146. use identity from other services* pattern #3 * with caution
  147. 147. • You need a user ID with lots of info they already have (e.g, age & location) • Your target audience uses the social service in question (facebook, twitter) • Using their social graph populates your service with valuable contacts, info • You don’t mind being subject to their data policy changes when to offer a social sign-up
  148. 148. lazy Registration: how late can you be? pattern #4
  149. 149. lazy Registration: how late can you be? pattern #4
  150. 150. lazy Registration: how late can you be? pattern #4
  151. 151. Don’t break flow,don’t break media pattern #5
  152. 152. remember abandoned sessions
  153. 153. investment & value before commitment pattern #6
  154. 154. • Prevent costly illegal actions: fraud, libel, exposure of minors • move to the last possible step • Populate with valuable info • Social sign-up; informed guesses; capture input along the way with clear, immediate input-valued output link • Use contact details for re-engagement • after user invested: reengagement must offer genuine value why require registration at all?
  155. 155. First contact / Orientation Registration First use Onboarding Landing Page * Scroll down * Click “Learn more” about page * Scroll down * Click “Register” registration page * Input user name * Input email * Input password * Click “Register” e-mail inbox * Open e-mail client * Open confirmation e-mail * Click confirmation link confirmation page * See confirmation message * Click “to user account” user account page * Fill in address * Fill in first name * fill in last name * Click “submit” dashboard page * Fill keywords in search window * Click “submit” before
  156. 156. First contact / Orientation Registration First use Onboarding Landing Page * Scroll down * Click “Learn more” * add registration: - Input email, password - Facebook signup about page * Scroll down * Click “Register” * add registration: - Input email, password - Facebook signup e-mail inbox * Open e-mail client * Open confirmation e-mail * Click confirmation link confirmation page * See confirmation message * Click “to user account” user account page * Fill in address * Fill in first name * fill in last name * Click “submit” dashboard page * Fill keywords in search window * Click “submit” * add link “confirm email” AFTER password hint on click: “must have at least eight characters” registration page * Input user name * Input email * Input password * Click “Register”
  157. 157. gett: disregard the tutorial screens :) Don’t map these: we know they’re terrible :)
  158. 158. p. 12: map the flow Map the journey from first contact (landing page) to first use, e.g. 1. Make a post-it for each screen and write a title on top. Place the post-it on the onboarding map (e.g., landing page goes into first contact). 2. On each screen post-it, bullet list all interactions and inputs the user has to make to get to the next screen Find instructions here
  159. 159. p. 12: map the flow Map the journey from first contact (landing page) to first use, e.g. 1. Make a post-it for each screen and write a title on top. Place the post-it on the onboarding map (e.g., landing page goes into first contact). 2. On each screen post-it, bullet list all interactions and inputs the user has to make to get to the next screen Find instructions here
  160. 160. p. 12: reduce the friction 1. For each screen and interaction, ask: can you delete it? Strike it through can you merge it with a prior/later step to reduce clicks/screens? Move/strike the post-it and add the interactions to the prior/later step can you replace it with something that takes less effort? Add the new, strike the old through can you defer it after first use? Move/add it there. 2. Go through the checklist on p. 12 and correct whatever is missing Find instructions here
  161. 161. p. 12: reduce the friction 1. For each screen and interaction, ask: can you delete it? Strike it through can you merge it with a prior/later step to reduce clicks/screens? Move/strike the post-it and add the interactions to the prior/later step can you replace it with something that takes less effort? Add the new, strike the old through can you defer it after first use? Move/add it there. 2. Go through the checklist on p. 12 and correct whatever is missing Find instructions here
  162. 162. p. 13: scribble the new flow 1. Quickly scribble the new, reduced and reordered screen flow from first contact to first use 2. Remember “Always Be Closing”: Each screen should allow the user to register if convinced, each screen should allow to learn more if not convinced yet. Scribble on this page. Each box is one screen
  163. 163. p. 13: scribble the new flow 1. Quickly scribble the new, reduced and reordered screen flow from first contact to first use 2. Remember “Always Be Closing”: Each screen should allow the user to register if convinced, each screen should allow to learn more if not convinced yet. Scribble on this page. Each box is one screen
  164. 164. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  165. 165. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  166. 166. goal: make me »wow«
  167. 167. patrick mckenzie »I can tell you with a fair degree of certainty that no matter how great your product is, it is very likely that 40-60% of your free trial users never see the product a second time. Which makes that first use of the software really really freaking important.« selling more software (2012)
  168. 168. minimize time to wow pattern #1
  169. 169. old tumblr
  170. 170. new tumblr
  171. 171. (The new new onboarding moves this step even further down)
  172. 172. p. 14: make a wow flow 1. Pick the main job/task (2.1) the user wants to get done. Write down an immediate, real outcome of it your users would value. 2. Can you can that it a safe “test drive” without consequence/cost? 3. Write the minimum set of interactions imaginable to arrive at that outcome 4. For each interaction, check whether you pre-populate with a smart default, auto- suggestion, or sample content Write outcome here Write steps here Write pre-populated info here
  173. 173. p. 14: make a wow flow 1. Pick the main job/task (2.1) the user wants to get done. Write down an immediate, real outcome of it your users would value. 2. Can you can that it a safe “test drive” without consequence/cost? 3. Write the minimum set of interactions imaginable to arrive at that outcome 4. For each interaction, check whether you pre-populate with a smart default, auto- suggestion, or sample content Write outcome here Write steps here Write pre-populated info here
  174. 174. p. 15: scribble a wow flow 1. Scribble the resulting first use screen flow 2. If you haven’t already, consider: Can you move this first use before registration in your screen flow map? If so, move it Scribble on this page
  175. 175. p. 15: scribble a wow flow 1. Scribble the resulting first use screen flow 2. If you haven’t already, consider: Can you move this first use before registration in your screen flow map? If so, move it Scribble on this page
  176. 176. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  177. 177. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  178. 178. Goal: teach me »how«
  179. 179. the onboarding Anti-pattern
  180. 180. in contemporary fashion
  181. 181. an example
  182. 182. so what did we see here?
  183. 183. context of learning = context of use principle #1
  184. 184. do > show > tell principle #2
  185. 185. do > show > tell textbook online video game principle #2
  186. 186. tell: walls of text
  187. 187. show: decontextualized screens
  188. 188. do
  189. 189. whole,real-world problems with a story principle #3
  190. 190. • Convey personal relevance • Give meaning, emotion, urgency • Give coherency • Ease memorization whole,real-world problems with a story
  191. 191. minimize »Time to wow« principle #4
  192. 192. scaffolded learning principle #5
  193. 193. what are your loops?
  194. 194. get money buy fish feed fish sell fish
  195. 195. scaffold loops
  196. 196. Skill Time sawblade curve learning principle #6
  197. 197. the traditional model ...
  198. 198. …and its problem
  199. 199. the games model …
  200. 200. …and its effect
  201. 201. don’t enforce/lose tutorials principle #7
  202. 202. no screenshots of despair principle #8 http://screenshotsofdespair.tumblr.com
  203. 203. Nothing grows here. No friend here. No friend here. No friend here. No friend here. No friend here. No friend here.
  204. 204. 3+1 basic forms of onboarding
  205. 205. contextual hints (»coachmarks«) form #1
  206. 206. don’t stand in the way!
  207. 207. guided first run form #2
  208. 208. guided apprenticeship form #3
  209. 209. guided apprenticeship form #3
  210. 210. content as tutorial form #4
  211. 211. do you even need onboarding?
  212. 212. No onboarding Google Search Yahoo! Weather noveltyofinteractions number and complexity of interactions Guided first run Mailbox Google Inbox Guided apprenticeship MS Excel Evernote Contextual hints Hipmunk AirBnB
  213. 213. p. 16: determine onboarding form 1. On your key jobs/tasks (p 8-10) underline tasks that are so novel and circle tasks that are so complex that users need help 2. Decide on an onboarding model: • no novel, no/few complex interactions: no onboarding • a few novel interactions: a guided first run • no novel, many complex interactions: contextual hints • a few novel and many complex interactions: guided first run plus contextual hints • many novel and many complex interactions: a guided apprenticeship Underline and circle the tasks/ interactions in these boxes
  214. 214. p. 16: determine onboarding form 1. On your key jobs/tasks (p 8-10) underline tasks that are so novel and circle tasks that are so complex that users need help 2. Decide on an onboarding model: • no novel, no/few complex interactions: no onboarding • a few novel interactions: a guided first run • no novel, many complex interactions: contextual hints • a few novel and many complex interactions: guided first run plus contextual hints • many novel and many complex interactions: a guided apprenticeship Underline and circle the tasks/ interactions in these boxes
  215. 215. p. 17-19: design onboarding contextual hints 1. List the interactions that need hints 2. Determine when & in which order they’re shown 3. Sketch a sample contextual hint display guided first runs/apprenticeship 1. List interactions in self-sustained bundles with a valued outcome. (they likely match the main jobs/tasks) 2. Arrange bundles in logical order from (a) most to least frequently used and (b) requiring input/knowledge of previous bundles 3. Determine how, when, where to display the guided run/apprenticeship 4. Sketch a sample screen flow for the first run/one task of the apprenticeship List interaction here Sketch hint display here List bundles here Sketch screen flow here
  216. 216. p. 17-19: design onboarding contextual hints 1. List the interactions that need hints 2. Determine when & in which order they’re shown 3. Sketch a sample contextual hint display guided first runs/apprenticeship 1. List interactions in self-sustained bundles with a valued outcome. (they likely match the main jobs/tasks) 2. Arrange bundles in logical order from (a) most to least frequently used and (b) requiring input/knowledge of previous bundles 3. Determine how, when, where to display the guided run/apprenticeship 4. Sketch a sample screen flow for the first run/one task of the apprenticeship List interaction here Sketch hint display here List bundles here Sketch screen flow here
  217. 217. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  218. 218. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  219. 219. Goal: make me return
  220. 220. system push notifications
  221. 221. new offers new/unused features
  222. 222. personal statisticssocial statistics/information
  223. 223. personalized information
  224. 224. anatomy of a push notification 1. Personally valued information: A reason to open & not consider as spam 2. One main call to action: A mutually useful, easy way to react 3. A valued outcome: A reason to follow the call to action 4. An appropriate channel: The right moment & place to listen & react (+ Social proof from others you know never hurt anyone)
  225. 225. p. 20: design push notifications 1. Think through events that may trigger a push notification: • changes in time, e.g. trial period expires • changes in space, e.g. user is at location with special info/offers close by • changes in product, e.g. you’ve added a new feature • changes in user, e.g. user installed a new app that integrates with yours 2. For each event, go through these questions: • valued information: can you tell the user something s/he cares about at this event, e.g. “there’s a special offer close by”? • call to action: can you suggest one clear action in response, e.g. “take offer now”? • valued outcome: does the action produce an outcome the user cares about? Add an entry for a notification, with event, information, action, outcome only when you have a clear positive answer to each question. Try to find at least 3 entries. Fill in these Event
  226. 226. p. 20: design push notifications 1. Think through events that may trigger a push notification: • changes in time, e.g. trial period expires • changes in space, e.g. user is at location with special info/offers close by • changes in product, e.g. you’ve added a new feature • changes in user, e.g. user installed a new app that integrates with yours 2. For each event, go through these questions: • valued information: can you tell the user something s/he cares about at this event, e.g. “there’s a special offer close by”? • call to action: can you suggest one clear action in response, e.g. “take offer now”? • valued outcome: does the action produce an outcome the user cares about? Add an entry for a notification, with event, information, action, outcome only when you have a clear positive answer to each question. Try to find at least 3 entries. Fill in these Event
  227. 227. social push notifications
  228. 228. p. 21: design social notifications 1. Think through user actions that may trigger a push notification to another user 2. For each user action, go through these questions: • valued information: can you tell the other user something s/he cares about at this event, e.g. “your friend just started a project”? • call to action: can you suggest one clear action, e.g. “support his project”? • valued outcome: does the action produce a valued outcome, e.g. helping a friend? • channel: with what channel and time can the user act on that information + call to action, e.g. mobile push notification, e-mail, facebook notification, …? Add an entry for a notification, with event, information, action, outcome only when you have a clear positive answer to each question. Fill in these
  229. 229. p. 21: design social notifications 1. Think through user actions that may trigger a push notification to another user 2. For each user action, go through these questions: • valued information: can you tell the other user something s/he cares about at this event, e.g. “your friend just started a project”? • call to action: can you suggest one clear action, e.g. “support his project”? • valued outcome: does the action produce a valued outcome, e.g. helping a friend? • channel: with what channel and time can the user act on that information + call to action, e.g. mobile push notification, e-mail, facebook notification, …? Add an entry for a notification, with event, information, action, outcome only when you have a clear positive answer to each question. Fill in these
  230. 230. works best in viral loops ... action call to action call to action action
  231. 231. FarmVille Gifting
  232. 232. Foursquare Mayorships
  233. 233. hi
  234. 234. Yelp! compliments
  235. 235. goal/cta Follow user goal/cta Give thanks motivation Feeling helped feedback Get answers action Write question goal/cta Answer question motivation Competence feedback Get thanks action Write answer goal/cta Follow user goal/cta Answer question motivation Recognition feedback Content, backfollow action Follow user
  236. 236. p. 22: design social loops 1. Think through user actions that may trigger a Call to Action to another user, whose response will trigger a Call to Action to the first user 2. For each of the two user actions, go through these questions: • valued information: is there something the other user cares about you can tell him at this event, e.g. “your friend just started a project”? • call to action: is there one clear action you can suggest the user takes in response, e.g. “support his project”? Fill in these • valued outcome: does the action produce an outcome the user cares about, e.g. helping a friend? • action: does the resulting action trigger a notification encouraging the first user to take the action that triggered this response? Note at least 3 social loops down.
  237. 237. p. 22: design social loops 1. Think through user actions that may trigger a Call to Action to another user, whose response will trigger a Call to Action to the first user 2. For each of the two user actions, go through these questions: • valued information: is there something the other user cares about you can tell him at this event, e.g. “your friend just started a project”? • call to action: is there one clear action you can suggest the user takes in response, e.g. “support his project”? Fill in these • valued outcome: does the action produce an outcome the user cares about, e.g. helping a friend? • action: does the resulting action trigger a notification encouraging the first user to take the action that triggered this response? Note at least 3 social loops down.
  238. 238. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  239. 239. Our Journey today First impression Orientation Registration Paying user Invitation Onboarding Re-engagement Purchase First use
  240. 240. Goal: convert me
  241. 241. Our Journey todayFind the opportune moments
  242. 242. Our Journey todayFind the opportune moments
  243. 243. Find the opportune moments
  244. 244. make the value immediately clear* * e.g. with a test drive
  245. 245. or sample content:
  246. 246. 1. For each offer, note the opportune moments when and where in your interface the user is motivated to buy it because its value is immediately clear and in need 2. Note what call to action to offer at that point, e.g. user clicks ADD MEMBER: “Your plan only supports 5 users. UPGRADE just 15 NIS/month” p. 23: purchase paths Write opportune moments & calls to action here
  247. 247. 1. For each offer, note the opportune moments when and where in your interface the user is motivated to buy it because its value is immediately clear and in need 2. Note what call to action to offer at that point, e.g. user clicks ADD MEMBER: “Your plan only supports 5 users. UPGRADE just 15 NIS/month” p. 23: purchase paths Write opportune moments & calls to action here
  248. 248. make their choice easy pattern #3
  249. 249. leave nothing unclear
  250. 250. reduce choice
  251. 251. Use ordering
  252. 252. do their math
  253. 253. do their math
  254. 254. do their math
  255. 255. do their math
  256. 256. Choose your subscription Economist.com subscription: $59,00 One-year subscription to Economist.com Includes online access to all articles of The Economist since 1997 Print and web subscription: $125,00 One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997 use anchoring
  257. 257. Choose your subscription Economist.com subscription: $59,00 One-year subscription to Economist.com Includes online access to all articles of The Economist since 1997 Print and web subscription: $125,00 One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997 68% use anchoring
  258. 258. Choose your subscription Economist.com subscription: $59,00 One-year subscription to Economist.com Includes online access to all articles of The Economist since 1997 Print and web subscription: $125,00 One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997 68% 32% use anchoring
  259. 259. Choose your subscription Economist.com subscription: $59,00 One-year subscription to Economist.com Includes online access to all articles of The Economist since 1997 Print and web subscription: $125,00 One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997 Print subscription: $125,00 One-year subscription to the print edition of The Economist
  260. 260. Choose your subscription Economist.com subscription: $59,00 One-year subscription to Economist.com Includes online access to all articles of The Economist since 1997 Print and web subscription: $125,00 One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997 Print subscription: $125,00 One-year subscription to the print edition of The Economist 0%
  261. 261. Choose your subscription Economist.com subscription: $59,00 One-year subscription to Economist.com Includes online access to all articles of The Economist since 1997 Print and web subscription: $125,00 One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997 Print subscription: $125,00 One-year subscription to the print edition of The Economist 16% 0%
  262. 262. Choose your subscription Economist.com subscription: $59,00 One-year subscription to Economist.com Includes online access to all articles of The Economist since 1997 Print and web subscription: $125,00 One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997 Print subscription: $125,00 One-year subscription to the print edition of The Economist 16% 0% 84%
  263. 263. 1. Scribble the screen with all possible purchases (if you offer a fixed menu of plans) or the most frequent micro-purchase (if you do multiple in-app purchases). Remember to: make a clear offer; let users test drive or preview the outcome if possible; anchor with different options; reduce choice; use defaults, order and highlighting to make one preferred option stand out if possible p. 23: purchase screen Scribble here
  264. 264. 1. Scribble the screen with all possible purchases (if you offer a fixed menu of plans) or the most frequent micro-purchase (if you do multiple in-app purchases). Remember to: make a clear offer; let users test drive or preview the outcome if possible; anchor with different options; reduce choice; use defaults, order and highlighting to make one preferred option stand out if possible p. 23: purchase screen Scribble here
  265. 265. sebastian@codingconduct.cc @dingstweets codingconduct.cc Thank you.
  266. 266. more onboarding ... http://j.mp/ cconboarding

×