facebook.com/tourmyapp

Transcription

1

2 Introduction So you've built a web product. You've done a ton of work in building up the marketing so that a stream of users are coming and signing up for your free trial or free plan. Things are going great, except for one thing: a large number of users are not using your product and very few are upgrading to paid plans. There is nothing more frustrating than spending a ton of time, money and effort in getting users to your site, only to see all that go up in smoke as many of your users leave without even giving a fair shake to your product. Why? And what can you do about it? That is what this ebook is about. TIP: Read this ebook in full screen. There are a lot of screenshots that are easier to see in full screen mode.

3 Introduction What is the cost of not onboarding your users? Take a look below: Imagine a company that spends $1000 per week on advertising. At $0.5 cost per click, that gives them 2000 visitors per week, which might convert to about 200 signups. Assume that 50% of the signed up users leave without even trying their product properly. That is $500 of marketing spend going down the drain every week. Suppose that 30% of these users would have become paid users had they actually used the product effectively. If they make $20/month on each paid user, then the lack of onboarding is costing them $4800 a month in lost revenues. Adding the two, lack of onboarding is costing this company $81,600 annually! Substitute the numbers from your product to see how much it costs you. Chances are, it is not a small amount.

4 Checklist Five simple steps to improve user onboarding 1. Understand the upgrade funnel the phases a user goes through before upgrading / buying 2. Set up analytics analytics will tell you what users are doing in your app. Analytics by themselves are too low level. Set up a dashboard that coverts analytics into higher level events and allows you to take action on them 3. Have a getting started process for the first time a user logs in 4. Implement in-product onboarding usually in the form of in-app tours and notifications 5. Implement out-of-product onboarding usually in the form of lifecycle s for the times when the user is not using your product. The rest of this ebook covers these five points in further detail

5 The Upgrade Funnel Users who sign up for your web app go through a sequence of steps before they upgrade. By understanding these steps, we can optimise the conversion rate of different parts of the funnel. Signed up: A new user signs up for your product Activated: After signing up, they login and perform a few minimal tasks in your product. Engaged: They are now heavily using your product, and returning regularly Upgraded: Finally, they upgrade

6 The Upgrade Funnel A small note on Activated: You may be surprised to find out that many users will take the trouble to sign up and then not use your product at all. The first step is to just help them do something. Once they perform some minimal tasks, they are much more likely to be engaged. When they do this, we say they are Activated. Eg: A user may be activated on Facebook after they add their first friend and update their status. A user may be activated on GMail after they send or receive their first . It is crucial to provide handholding for the first time they login, and help them through the first steps.

7 Measure, measure, measure You have to know what your users are doing before you can come up with an engagement strategy. How many people are signed up and never logged in? How many are highly engaged? What are the key activities a user must perform in order to start getting engaged?

8 Measure, measure, measure Metrics will tell you exactly how a person has used your product. The dashboard on the left shows one of the test users of Tour My App. We know when this account was created, when the user last logged in, how much activity the user has done in our app, whether they have created a tour or not and so on. With this information, we can get a better picture of the user's behaviour. This dashboard example is from Sequence.

9 Measure, measure, measure This is another dashboard which parses through the analytics and shows a higher level view of how users are using the application. You can simply dump events into a database and analyse them yourself, or use tools like Mixpanel, KISSMetrics, Totango, or others. This screenshot is also from Sequence.

10 Eliminate blocks for new users New users who have just signed up are at the most sensitive point. Any inconvenience that stops them from performing a minimal task in your app could see them simply close the browser and never come back. Remember, with a free trial or a free plan, it costs the user nothing to simply go away. So, it is vital that you application is designed in a way to minimise these inconveniences as much as possible. If an inconvenient step is absolutely critical to your product, see if you can postpone the step until the user has completed some easy tasks first. At that point they are much more likely to perform the step.

11 Eliminate blocks for new users Signup Confirmation Login Confirmation is a block for new users. They might type their address wrong and never get the . Their ISP might block the . It might go into Spam/Junk. Even if they get it, the act of leaving your site, and switching over to their software is a speed breaker. By that time, they may decide to check out your app later and never do it. Signup Login Confirm Later A number of sites like Twitter now allow you to login immediately after sign up and you can confirm your address later.

12 Eliminate blocks for new users Signup Integrate Experience When building Tour My App, we needed the user to perform an integration in order to create and run tours. Until the integration was done, you couldn't use the app. Integration was dead simple (just copypaste javascript into page), but it meant the user (usually marketing person) giving it to a developer, getting it approved, and deployed. The process could take weeks! Guess what, many didn't go through and experience the product. Signup Experience Integrate We built a custom Google Chrome extension just to eliminate this block. The extension enabled the user to start using Tour My App without having to do the integration. After they signed up, they used the product immediately. Once hooked, they are much more likely to expedite the integration.

13 Getting Started Process Once the user is inside your app, get them productive as quickly as possible. This could mean using a one-time setup wizard to prepopulate their account with content, or using guided tours to direct their attention to the tasks they need to complete right away. As far as possible, never show a blank slate to a new user. Many will simply get confused, or may not get engaged enough to activate.

14 Getting Started Process Twitter uses an onboarding wizard. A wizard is a separate set of pages solely for onboarding a new user. These pages are never used in the application. When you sign up for a Twitter account, you'll get a screen like the one on the left. The Twitter Teacher will tell you what twitter is all about and will help you quickly find users to follow based on your location, interests and friends already on Twitter. By doing this, Twitter ensures that you have some relevant content in your stream when you enter the application for the first time.

15 Getting Started Process Suggested followers based on location

16 Getting Started Process Shopify is a site that allows anybody to set up a shop and sell items online. Most people who want to sell are non-technical. Yet, there is a significant amount of setup to be done before a shop can be created. Unlike Twitter, which uses a wizard, Shopify uses in-application tours to guide the users. Wizards are good for one-time activities to populate default content. In-application tours are better when the user needs to perform tasks that they are likely to repeat in normal use of the application.

17 Getting Started Process

18 Getting Started Process Guided pop-ups show what you need to do to complete each task. By using pop-ups here, the site is also teaching the user where to go if they need to add more products at a later date. As the user completes tasks, the setup bar at the bottom shows what they have completed and what they need to do next. A setup bar like this allows the user to complete the setup in any order without losing context of what setup is remaining.

19 Getting Started Process Shopify could have taken the user directly to the theme page when they clicked the link on the setup bar. Instead they show where the link is located on the navigation.the next time the user wants to change the theme, they know exactly where to look for it.

20 Getting Started Process Another strategy is to pre-populate the workspace with some default data. Example: Trello creates a default board when you sign up which is populated with data, each one showing off a different piece of functionality

21 Getting Started Process If dummy data doesnt make sense, then you can create a landing page which is shown to users when there is no activity in the account. The landing page can explain what they need to do next. The example on the left is from New Relic

22 In Application Tours In application tours are a way to explain something to the user by using popup boxes within the application. In application tours can be used as a Gettings Started guide for new users, for explaining new ore redesigned features, or to help users through specific tasks. Tours can be purely informative (only explanation boxes), or interactive (wait for the user to perform an action before continuing) The screen above is the first step of a tour that was used in YouTube when they redesigned the channel feature.

23 In Application Tours After you click Next, the tour shows different elements on the page with an explanation of the element. This is an informative tour that explains a series of page elements.

24 In Application Tours

25 Checklist Five types of in-application tours You can use in-application tours in a variety of situations. Here are five such situations. 1. Getting Started Tour To help the user get started by performing the initial few tasks / inital setup. 2. Task Tour Help the user complete a single task. Usually these tours are interactive and may span multiple pages. 3. Page Tour Explain the various elements / actions on a specific page. Useful for dashboard pages, detail pages etc. 4. New Feature Tour Walk the user through a new feature that has just been released. 5. Notification Box Highlight a specific element on the page.

26 In Application Tours By contrast, Google implemented an interactive tour in Google Maps. Clicking the tutorial link brings up an introduction of the tour. You can take a tour of specific features or do a complete tour of all the four features. The first step asks the user to perform a search. Because this is an interactive step, there is no Next button shown. Instead the user has to complete the search action in order for the tour to progress.

27 In Application Tours Once you perform the seach, the tour describes the Street View feature and teaches you how to activate it. The tour then waits for the user to activate it.

28 In Application Tours

29 In Application Tours Once you are done with street view, the tour shifts to the directions feature. The tour shows you how to enable directions and waits for you to perform the required action. Google embeds icons in the tour box so that the user can relate to the specific element on the actual UI

30 In Application Tours Finally the tour explains the different view modes. Unlike previous steps, this step is an informative step only. The tour closes with the sharing functionality

31 In Application Notifications In-application notification is a simpler form of an in-app tour. Unlike a multi-step tour, a notification is a single box that just highlights a specific element. In-app notifications are a great way to point the users attention to specific features that they might have overlooked. The examples on the left are from the new outlook.com and Google Docs respectively

32 In Application Notifications Facebook makes heavy use of both in-application tours as well as notifications. They use it almost everywhere

33 Lifecycle Drip Marketing Lifecycle drip marketing is basically sending out a number of small, relevant s over the course of a user's lifetime with the product. The on the left is an example of a signup lifecycle campaign. It is sent out when the user first signs up. Followup s may be automatically sent every few days after signup.

34 Lifecycle Drip Marketing This from fiverr is an example of inactivity lifecycle campaign. The is sent when a user is inactive for a certain period of time. Following s may be sent as the inactivity period grows, eg: first when the user is inactive for a week, another when inactive for a month, another when inactive for 3 months and so on. The idea is to help users get started, get re-engaged or bring back inactive users.

35 Lifecycle Drip Marketing This from Google Adwords is a behaviour lifecycle campaign. They analyse their user's usage and find features they haven't used. The campaign targets unused features to try and make basic users start using advanced features, thereby hooking them into the product further.

36 Lifecycle Drip Marketing Another re-engagement strategy is to have a periodic (daily / weekly / monthly) that is sent out with a summary of events that the user might be interested in. Be sure that you have a way for the user to opt-out of these s as not everyone will want them.

37 Showcase Seeing what others applications are doing is a great way to get some inspiration for your own web product. This Showcase section is a collection of screenshots from different web apps. Enjoy!

38 Showcase Pinterest The first time you login to Pinterest, you are asked to select a few images. Pinterest uses this data to pre-populate your account with similar images that you might like and automatically follow certain users who match your taste. This way, when the user enters the application for the first time, there is already a lot of content to interact with.

39 Showcase Flickr Flickr used an in-application tour to show users around the new Uploadr The tour highlights all the important features in the uploadr so that users are immediately comfortable using it.

40 Showcase Etsy Similar to Shopify, Etsy uses a combination of a setup bar in combination with in-application tours. Setup bar in combination with tours is a good pattern for apps which require a multi-stage initial setup.

41 Showcase ebay ebay uses a six step in-application tour to orient new users to the product details page. Each step of the tour highlights one feature on the product page like filtering by condition, or viewing user reviews for the product.

42 Showcase Facebook Pages The moment you create a Facebook page, Facebook takes you through an in-application tour highlighting two critical tasks Inviting your friends and writing on your timeline. If you do these two steps, there is a much higher chance that there will be interaction on the page, which drives a positive feedback loop by drawing in more users and more engagement. Facebook does not leave it to chance, but proactively uses in-app tours to point new page admins to these two tasks.

43 If you are interested in the topics presented here, go to and Like the page. We share tons of content on conversion optimisation, trial conversion, user engagement, drip marketing, onboarding, and related themes

44 Tour My App Tour My App is a tool that allows any web app developer to integrate in-application guided tours, getting started tours, and in-app notifications into their product. All this without having to write complex code. If you looked at the examples in this ebook and thought I wish I could do this in my app, then Tour My App is for you. Sign up now for the Free 30 day trial at