How to Build Interactive Training that Scales - Magnolia CMS Conference 2013

2. THAT SCALES MARK HALVORSON • DIRECTOR OF INTERACTIVE • ATLASSIAN • @halv0112 How to Build Interactive Training

3. LABEL TITLELABEL TITLEWHY HOW WHAT

4. HOW WHAT LABEL TITLELABEL TITLEWHY HOW WHAT

6. People know stuff...

10. ...and they should share it.

11. ...and they should share it.

12. Shared Understanding

13. Bottlenecks

14. Bottlenecks

15. Bottlenecks

16. Bottlenecks

17. Bottlenecks

18. WHY: We believe that sharing knowledge is important... but it isn’t easy at scale.

19. Why HOW WHAT LABEL TITLELABEL TITLEWHY HOW WHAT

22. How can we make it easier?

23. Create Documentation

24. ... odds are that documentation already exists...

25. ... but what is the best way to understand something?

29. Learning opportunities live everywhere...

30. ...but they are in silos disorganized.

31. We know structured content eases shared understanding...

34. ... but sometimes we need to augment it.

35. ... but sometimes we need to augment it.

36. To create a bundle..

37. ... that consistently ...

38. ... leads to ...

39. ..shared understanding!

42. HOW: Organize content into repeatable steps to guide each user to shared understanding.

46. VERSION 3 VERSION 2 VERSION 1 The stages of What.

47. Atlassian University

61. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript)

63. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • User Managment

66. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • User Managment • Data Storage • Licenses • Lesson Completion

68. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • User Managment • Data Storage • Licenses • Lesson Completion • Content

70. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content • User Managment • Data Storage • Licenses • Lesson Completion JIRA • Sample Data

72. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content • User Managment • Data Storage • Licenses • Lesson Completion JIRA • Sample Data SHERPA JS

75. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content • User Managment • Data Storage • Licenses • Lesson Completion JIRA • Sample Data SHERPA JS LESSON COMPLETE API

77. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content • User Managment • Data Storage • Licenses • Lesson Completion JIRA • Sample Data SHERPA JS LESSON COMPLETE API

78. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content • User Managment • Data Storage • Licenses • Lesson Completion JIRA • Sample Data CONFLUENCE • Sample Data JIRA + GH • Sample Data SHERPA JS SHERPA JS SHERPA JS LESSON COMPLETE API LESSON COMPLETE API LESSON COMPLETE API

79. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content • User Managment • Data Storage • Licenses • Lesson Completion JIRA 4.0 • Sample Data CONF 3.5 • Sample Data GH 5.7 • Sample Data SHERPA JS SHERPA JS SHERPA JS LESSON COMPLETE API LESSON COMPLETE API LESSON COMPLETE API JIRA 4.1 • Sample Data CONF 4.0 • Sample Data GH 5.9 • Sample Data SHERPA JS SHERPA JS SHERPA JS

80. VERSION 1 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content • User Managment • Data Storage • Licenses • Lesson Completion JIRA 4.0 • Sample Data CONF 3.5 • Sample Data GH 5.7 • Sample Data SHERPA JS SHERPA JS SHERPA JS LESSON COMPLETE API LESSON COMPLETE API LESSON COMPLETE API JIRA 4.1 • Sample Data CONF 4.0 • Sample Data GH 5.9 • Sample Data SHERPA JS SHERPA JS SHERPA JS JIRA 4.2 • Sample CONF 5. • Sample GH 6.0 • Sample SHER SHER SHER

81. VERSION 1 • Didn’t Scale • In Product Training didn’t created Administrative problems. • Shared training environment (junk data) • Magnolia Data Module falling down. • Clunky navigation • Required separate login • Hard to QA! Problems with Version 1

82. VERSION 1 • Single Company • Calculations Slow • Admin Pages Slow • Reporting Slow • Content Not Searchable or SEO Friendly • Always maintaining - never innovating. Problems with Version 1

84. Atlassian University 2.0

87. VERSION 2 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript)

90. VERSION 2 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) ATLASSIAN ID • User Management

92. VERSION 2 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content JIRA SCREENSHOT • Sample Data ATLASSIAN ID • User Management

99. VERSION 2 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content JIRA SCREENSHOT • Sample Data CONFLUENCE SCREENSHOT • Sample Data JIRA + GH SCREENSHOT • Sample Data ATLASSIAN ID • User Management

100. VERSION 2 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content JIRA SCREENSHOT • Sample Data CONFLUENCE SCREENSHOT • Sample Data JIRA + GH SCREENSHOT • Sample Data SHERPA JS SHERPA JS SHERPA JS ATLASSIAN ID • User Management

102. VERSION 2 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content JIRA SCREENSHOT • Sample Data CONFLUENCE SCREENSHOT • Sample Data JIRA + GH SCREENSHOT • Sample Data SHERPA JS SHERPA JS SHERPA JS POSTGRESQL • Data • License Data • Lesson Completion Data ATLASSIAN ID • User Management

103. VERSION 2 How it works MAGNOLIA • App Pages (Freemarker, HTML, JavaScript) • Content JIRA SCREENSHOT • Sample Data CONFLUENCE SCREENSHOT • Sample Data JIRA + GH SCREENSHOT • Sample Data SHERPA JS SHERPA JS SHERPA JS API API API POSTGRESQL • Data • License Data • Lesson Completion Data ATLASSIAN ID • User Management

111. VERSION 2 • Scaling better, but not perfectly • Creating a lot of content. • Created another “Training Silo” Problems with Version 2

113. Introducing Atlassian Holistic Content Curation Utility.

114. aka. A.H.C.C.U.

115. God Bless You

116. Exactly.

117. A C C U TLASSIAN ONTENT URATION TILITY H OLISTIC

118. Emphasizing the importance of the whole and the interdependence of its parts. THE AMERICAN HERITAGE® DICTIONARY ” “ H OLISTIC

119. Learning opportunities live everywhere... C ONTENT

120. Organize Existing Content

124. ...but they are in silos disorganized. C ONTENT

125. C URATION Structured content eases shared understanding...

128. C URATION ... augment where necessary.

129. C URATION ... augment where necessary.

130. C URATION To create a bundle..

131. C URATION ... that consistently ...

132. C URATION ... leads to ...

133. C URATION ..shared understanding!

136. U Everyone can use it. TILITY

137. U Everyone can use it. TILITY

138. A C C U TLASSIAN ONTENT URATION TILITY H OLISTIC

139. CurateCurated Content Curated Content Info You have not curated any content. Click “Curate” to get started.

140. CurateCurated Content Curated Content Info You have not curated any content. Click “Curate” to get started.

141. CurateCurated Content Curated Content Curate CancelCreate Folder Organize curated content into folders. Example: JIRA Course A course is a logical grouping of content to guide the user through. Example: JIRA 6.0

144. CurateCurated Content Curated Content Create Folder CancelCreate Course Name * Description JIRA This folder contains content related to JIRA

145. CurateCurated Content Curated Content Create Folder CancelCreate Course Name * Description JIRA This folder contains content related to JIRA

146. CurateCurated Content Folder JIRA Info You have not curated any content in this folder. Click “Curate” to get started. Curated Content JIRA

147. CurateCurated Content Folder JIRA Info You have not curated any content in this folder. Click “Curate” to get started. Curated Content JIRA

151. CurateCurated Content Curated Content Create Folder CancelCreate Course Name * Description JIRA 6.0 Become an expert in issue and project tracking with JIRA.

152. CurateCurated Content Curated Content Create Folder CancelCreate Course Name * Description JIRA 6.0 Become an expert in issue and project tracking with JIRA.

153. CurateCurated Content Folder JIRA JIRA 6.0 Curated Content / JIRA JIRA 6.0 Info You have not curated any content in this folder. Click “Curate” to get started.

154. CurateCurated Content Folder JIRA JIRA 6.0 Curated Content / JIRA JIRA 6.0 Info You have not curated any content in this folder. Click “Curate” to get started.

158. CurateCurated Content Folder Create Course CancelCreate Course Name * Description Customize JIRA Forms Learn how to add custom fields and customize JIRA forms.

159. CurateCurated Content Folder Create Course CancelCreate Course Name * Description Customize JIRA Forms Learn how to add custom fields and customize JIRA forms.

160. CurateCurated Content Course JIRA JIRA 6.0 Customize JIRA Forms Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Add Lesson Info This course does not have any lessons. Click ‘Add Lesson’ to get started. <Embed Code> 12.6 KB

161. CurateCurated Content Course JIRA JIRA 6.0 Customize JIRA Forms Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Add Lesson Info This course does not have any lessons. Click ‘Add Lesson’ to get started. <Embed Code> 12.6 KB

162. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Info This course does not have any lessons. Click ‘Add Lesson’ to get started. Create Cancel Create Lesson External Link Content that lives on an external site. Interactive Tutorial Create an interactive tutorial by uploading screenshots and creating pointers Blank Page Write some fresh content. Transition Add a transitional step between lessons such as a quiz to test comprehension. Video Embed a video and description. Call to Action This is usually the last step in a course and the desired action for the user. Example: Try JIRA Now.

164. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Create Cancel Create Video Lesson Lesson Name * Description Custom Fields and Forms See JIRAs Product manager explain custom fields and forms. Length 3m32s Embed Code <embed width="640" height="360" src="//www.youtube.com/v/ XIn1zxAbrv8? hl=en_US&version=3&rel=0"

165. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Create Cancel Create Video Lesson Lesson Name * Description Custom Fields and Forms See JIRAs Product manager explain custom fields and forms. Length 3m32s Embed Code <embed width="640" height="360" src="//www.youtube.com/v/ XIn1zxAbrv8? hl=en_US&version=3&rel=0"

166. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Lesson Type Custom Fields and Forms (Video) Video Add Lesson <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms

167. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Lesson Type Custom Fields and Forms (Video) Video Add Lesson <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms

170. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Info This course does not have any lessons. Click ‘Add Lesson’ to get started. Create Cancel Create External Link Lesson Lesson Name * Description Configuring a Custom Field Atlassian documentation on custom fields BrowseURL https://confluence.atlassian.c

171. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Info This course does not have any lessons. Click ‘Add Lesson’ to get started. Create Cancel Create External Link Lesson Lesson Name * Description Configuring a Custom Field Atlassian documentation on custom fields BrowseURL https://confluence.atlassian.c

172. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Lesson Type Custom Fields and Forms (Video) Video Configuring a Custom Field External Link Add Lesson <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms

173. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Lesson Type Custom Fields and Forms (Video) Video Configuring a Custom Field External Link Add Lesson <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms

177. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Create Cancel Create Interactive Tutorial Lesson Lesson Name * Description Fields and Field Configurations University tutorial on fields and field configurations

178. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Create Cancel Create Interactive Tutorial Lesson Lesson Name * Description Fields and Field Configurations University tutorial on fields and field configurations

179. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 / Customize JIRA Forms Fields and Field Configurations Section Introduction Navigation with Tabs Dashboard Browse Projects Add Step <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms Find Issues Create Issues Summary Browse Projects

180. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 / Customize JIRA Forms Fields and Field Configurations Section Introduction Navigation with Tabs Dashboard Browse Projects Add Step <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms Find Issues Create Issues Summary Browse Projects

181. CurateCurated Content Course JIRA Creating Custom forms in JIRA Curated Content / JIRA Creating Custom forms in JIRA Add Lesson Embed Course Info This course does not have any lessons. Click ‘Add Lesson’ to get started. Create Cancel Create Lesson Step External Link Content that lives on an external site. Interactive Screenshot Step A screenshot with an instructional dialog. Blank Page Write some fresh content. Transition Add a transitional step between lessons such as a quiz to test comprehension. Video Embed a video and description. Call to Action This is usually the last step in a course and the desired action for the user. Example: Try JIRA Now.

184. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 / Get to Know JIRA Section Introduction Navigation with Tabs Dashboard Browse Projects Add Section <Embed Code> 12.6 KB JIRA JIRA 6.0 Get to Know JIRA Find Issues Create Issues Summary Browse Projects Create Cancel Create Interactive Screenshot Step Section Name * Introduction BrowseScreenshot Instruction Text This tour shows how to create custom fields in JIRA. Action Text Click ‘Next’ Preview Tip Location x axis y axis If not set the dialog is centered, drag dialog in preview to move Up DownPointer Direction Left Right

185. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 / Get to Know JIRA Section Introduction Navigation with Tabs Dashboard Browse Projects Add Section <Embed Code> 12.6 KB JIRA JIRA 6.0 Get to Know JIRA Find Issues Create Issues Summary Browse Projects Create Cancel Create Interactive Screenshot Step Section Name * Introduction BrowseScreenshot Instruction Text This tour shows how to create custom fields in JIRA. Action Text Click ‘Next’ Preview Tip Location x axis y axis If not set the dialog is centered, drag dialog in preview to move Up DownPointer Direction Left Right

186. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 / Customize JIRA Forms Fields and Field Configurations Section Introduction Add a Custom Field Field Configurations Browse Projects Add Step <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms Associate a Project Summary Browse Projects

187. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 / Customize JIRA Forms Fields and Field Configurations Section Introduction Add a Custom Field Field Configurations Browse Projects Add Step <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms Associate a Project Summary Browse Projects

188. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Lesson Type Custom Fields and Forms (Video) Video Configuring a Custom Field External Link Fields and Field Configurations Interactive Tutorial Add Lesson <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms

189. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 Customize JIRA Forms Lesson Type Custom Fields and Forms (Video) Video Configuring a Custom Field External Link Fields and Field Configurations Interactive Tutorial Add Lesson <Embed Code> 12.6 KB JIRA JIRA 6.0 Customize JIRA Forms

190. CurateCurated Content Course Curated Content / JIRA / JIRA 6.0 Get to Know JIRA Lesson Type JIRA Overview (Video) Video JIRA 6 Tour External Link Basic Navigation Interactive Tutorial Add Lesson <Embed Code> 12.6 KB JIRA JIRA 6.0 Get to Know JIRA Embed Course Close Embed Code Info Put this code in your HTML to embed the entire course into another site. <script src="//cdn.atlassian.com/js/accu1096093.js"></script> <accu:course course=‘1096093’ type=‘lightbox’ class=‘grey’ completedClass=‘green’>Customize JIRA Forms</accu:course>

191. Embed Course

194. Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations

197. Good Work! Go to Customizing a Field You just completed step 1 in a 3 step tutorial on Custom JIRA Forms. 1. Custom Fields and Forms (Video) 2. Configuring a Custom Field 3. Fields and Field Configurations Close    Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations

198. Good Work! Go to Customizing a Field You just completed step 1 in a 3 step tutorial on Custom JIRA Forms. 1. Custom Fields and Forms (Video) 2. Configuring a Custom Field 3. Fields and Field Configurations Close    Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations

202. Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations Good Work! Go to Fields and Configurations You just completed step 2 in a 3 step tutorial on Custom JIRA Forms. Close     1. Custom Fields and Forms (Video) 2. Configuring a Custom Field 3. Fields and Field Configurations

203.     Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations

204.     Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations

205. Good Work! Close Tutorial You just completed the Custom JIRA Forms tutorial    Sign In You are using this tutorial in Anonymous Mode. If you want to keep track of your progress between browsers sign up for an Atlassian ID.    1. Custom Fields and Forms (Video) 2. Configuring a Custom Field 3. Fields and Field Configurations Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations

206. Good Work! Close Tutorial You just completed the Custom JIRA Forms tutorial    Sign In You are using this tutorial in Anonymous Mode. If you want to keep track of your progress between browsers sign up for an Atlassian ID.    1. Custom Fields and Forms (Video) 2. Configuring a Custom Field 3. Fields and Field Configurations Custom Fields and Forms (Video) Configuring a Custom Field Fields and Field Configurations

207. 

208. Embed Folder

209. 

210. 

211. 

212. 

213. 

214. 

215. 

216. Embed Lesson

218. Take a tour of the new UI!

219. Share Link

221. VERSION 3 How it works MAGNOLIA • Content JIRA SCREENSHOT CONFLUENCE SCREENSHOT JIRA + GH SCREENSHOT SHERPA JS SHERPA JS SHERPA JS API API API POSTGRESQL • Data • License Data • Lesson Completion Data • Content Lists ATLASSIAN ID • User Management ANGULAR JS • App Pages (HTML/JS) API API API

222. VERSION 3 • We don’t know yet :) Problems with Version 3

224. WHATHOWWHY HOW WHAT

225. WHAT HOW WHY

226. WHY WHAT HOW

227. We believe that sharing knowledge is important... but it isn’t easy at scale.WHY WHAT HOW

228. We believe that sharing knowledge is important... but it isn’t easy at scale. Organize content into repeatable steps to guide each user to shared understanding. WHY WHAT HOW

229. We believe that sharing knowledge is important... but it isn’t easy at scale. Organize content into repeatable steps to guide each user to shared understanding. A.H.C.C.U. Spreading knowledge is as easy as spreading germs. WHY WHAT HOW

230. Thank you! MARK HALVORSON • DIRECTOR OF INTERACTIVE • ATLASSIAN • @halv0112

How to Build Interactive Training that Scales - Magnolia CMS Conference 2013

Recommended

Recommended

More Related Content

Similar to How to Build Interactive Training that Scales - Magnolia CMS Conference 2013

Similar to How to Build Interactive Training that Scales - Magnolia CMS Conference 2013 (20)

Recently uploaded

Recently uploaded (20)

How to Build Interactive Training that Scales - Magnolia CMS Conference 2013