Choose your own adventure: The path to retention with user-led onboarding
SPEAKER:
- Angela Brown - Tridiuum, Digital Adoption Product Manager
Check out the presentation slides here!
Comment below if you attended the session or have any follow up questions.
1
Comments
I really appreciated this presentation because I'm facing similar challenges with the onboarding process for our apps. I love the approach of allowing the user to choose from different options!
Thank you, Bridget! We found that giving users the flexibility to create their own onboarding experience when and where it was convenient for them made a huge difference in guide engagement. I think providing options throughout the onboarding process is particularly important for our user group- busy medical professionals who are often short on time. Does anyone else have any tips for working with a similar user group?
Hey all! Are we going to get the video for this session soon? I really want to revisit the lessons!
Hey Adi Jaffe,
Great to hear from you and glad you're checking out these PNDM sessions! You should have received an email with all the video recordings from the breakout session. I'll share it again with you directly, but check out the video sessions, the slides hosted here, and comment with your questions here!
I wasn't able to attend PNDM, but I found this slide deck very interesting. A few quick questions: on the "choose your own adventure" guide page, what happens when the user clicks on one of the choices? Does it launch a multi-step guide that walks the user through the different UI featuresfor that task, or does it show a video, or does it "demo" the feature using screenshots like I think I saw on a different slide? These guide pages you created are visually really cool! Did you use Pendo's out-of-the-box tools to style this, or did you use your own code? One of the challenges we face with our products is translations, so whatever we put into a guide, it has to be able to be translated, or we end up creating 4+ localized versions of each guide. Understanding just how much customization you've had to implement will help me start formulating my own plan. Again, very cool stuff!
Hi Christina,
Glad you found some value in the Choose Your Own Adventure slide deck! When a user chooses an option for the "choose your own adventure guide," a multi-step guide is launched that walks the user through key features of the page. This multi-step guide is less than 5 steps and includes short gifs to convey the functionality quickly. We embedded the gifs using Pendo's image block ability.
The styling of our guide containers was created with Pendo Themes. Then we used html, css and javascript to create a table of images and turned our images into actionable buttons that launch guides using the guide id:
html:
css:
table {
width: 100%;
}
td{
height:100px;
text-align: center;
color: white;
border: 8px solid transparent;
transition: all 0.1s ease-in-out;
padding-top:10px;
}
.icon{
height:100px;
}
td:hover{
cursor: pointer;
-webkit-box-shadow: inset 0px 0px 20px -4px rgba(117,199,36,0.36);
-moz-box-shadow: inset 0px 0px 20px -4px rgba(117,199,36,0.36);
box-shadow: inset 0px 0px 20px -4px rgba(117,199,36,0.36);
}
td:hover .icon{
}
.opt1{
}
javascript:
(function wireNextGuideButton(step) {
step && step.attachEvent(step.guideElement[0], 'click', function (e) {
var advanceButton = pendo.dom(e.target || e.srcElement).closest('.opt1');
if (advanceButton.length) {
pendo.onGuideDismissed(); //This command dismisses the current active guide
pendo.showGuideById('ytoNLIsO4b_02qJwByWYnnm9OgA'); // This command will show the guide of the ID provided
//new id: ytoNLIsO4b_02qJwByWYnnm9OgA
//old id: j0rJ0kYUgM6tx3GDB8n6aUXsV6Q
}
});
})(step,guide);
(function wireNextGuideButton(step) {
step && step.attachEvent(step.guideElement[0], 'click', function (e) {
var advanceButton = pendo.dom(e.target || e.srcElement).closest('.opt2');
if (advanceButton.length) {
pendo.onGuideDismissed(); //This command dismisses the current active guide
pendo.showGuideById('8yiIy8GnEKipACPYXEAuxtgbvio'); // This command will show the guide of the ID provided
}
});
})(step,guide);
(function wireNextGuideButton(step) {
step && step.attachEvent(step.guideElement[0], 'click', function (e) {
var advanceButton = pendo.dom(e.target || e.srcElement).closest('.opt3');
if (advanceButton.length) {
pendo.onGuideDismissed(); //This command dismisses the current active guide
pendo.showGuideById('2VULYjXM5WxIt38vYT8jTysJM2I'); // This command will show the guide of the ID provided
}
});
})(step,guide);
(function wireNextGuideButton(step) {
step && step.attachEvent(step.guideElement[0], 'click', function (e) {
var advanceButton = pendo.dom(e.target || e.srcElement).closest('.opt4');
if (advanceButton.length) {
pendo.onGuideDismissed(); //This command dismisses the current active guide
pendo.showGuideById('hQY44X61FfrHktgbmniqNlxGcYw'); // This command will show the guide of the ID provided
}
});
})(step,guide);
Hope this helps you in formulating the best approach for your onboarding plan! Please let me know if you'd like to discuss any of the customizations further. I love that Pendo gives us great out-of-the-box tools for creating guides along with the ability to add our own flair with custom code.
Please sign in to leave a comment.