{"id":283489,"date":"2023-11-28T16:10:04","date_gmt":"2023-11-28T16:10:04","guid":{"rendered":"https:\/\/wyzowl.com\/?p=283489"},"modified":"2024-08-19T16:04:37","modified_gmt":"2024-08-19T15:04:37","slug":"walkthrough-examples","status":"publish","type":"post","link":"https:\/\/wyzowl.com\/walkthrough-examples\/","title":{"rendered":"5 Amazing Walkthrough Examples for Apps and Websites"},"content":{"rendered":"
<\/div>\n

We all have our favourite apps. The ones we use on a daily basis and can\u2019t imagine life without! <\/p>\n\n\n\n

But, for most mobile apps, life is surprisingly short. <\/p>\n\n\n

\n <\/i>Statistic\n<\/div>\n
\n Around 80-90% of all mobile apps launched in app stores are abandoned after one single use.\u00a0<\/strong>
And an average mobile app tends to lose somewhere around 77% of daily active users within just three days of installation<\/strong>.\u00a0\n
\n Source: <\/strong>Business of Apps<\/a>\n <\/div>\n<\/div><\/div>\n\n\n

With any software, there is always going to be some level of user churn<\/a> – but churn rates don\u2019t have to be so high! <\/p>\n\n\n\n

One way to reduce user churn is to equip your users with the knowledge to get the most out of your website or app. <\/p>\n\n\n

\n <\/i>Statistic\n<\/div>\n
\n 8 in 10 users say they\u2019ve deleted an app because they didn\u2019t know how to use it<\/strong>.\u00a0\n
\n Source: <\/strong>Wyzowl Customer Onboarding Statistics <\/a>\n <\/div>\n<\/div><\/div>\n\n\n

That\u2019s 80%! <\/p>\n\n\n\n

Imagine reducing user churn by 80% simply by giving users a thorough walkthrough of your app or website. <\/p>\n\n\n\n

A warm welcome can go a long way. <\/p>\n\n\n\n

Today, we\u2019re going to look at 5 amazing walkthrough examples for apps and websites so that you can gather some inspiration that will hopefully lead to happier customers and longer life cycles. <\/p>\n\n\n\n

<\/span>What makes an amazing walkthrough?<\/strong><\/span><\/h2>\n\n\n\n

A walkthrough is a meticulous way of onboarding users. It ensures that no stone is left unturned and gives new users a great understanding of how the product works. <\/p>\n\n\n\n

But not all walkthroughs are made equal. <\/p>\n\n\n\n

A walkthrough, if done the wrong way, can have too much emphasis on hand-holding and not enough focus on engagement. This could frustrate new users and actually send them packing before they\u2019ve even finished onboarding.<\/p>\n\n\n\n

An amazing walkthrough is: <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n
\n Clear<\/strong> – telling users exactly how each feature works
Concise<\/strong> – covering all bases without dragging on
Engaging<\/strong> – giving users the option to interact rather than just watch
Skippable<\/strong> – to accommodate faster learners
Offers additional support<\/strong> – a live chat feature, for example, for users that are struggling to follow\n<\/div><\/div>\n\n\n

<\/span>5 amazing walkthrough examples for apps and websites<\/strong><\/span><\/h2>\n\n\n\n

1. Grammarly <\/strong><\/h3>\n\n\n\n

Grammarly<\/a> is a digital writing tool that checks your grammar – I guess the clue is in the name! <\/p>\n\n\n\n

You\u2019ve likely heard of it already because it has an impressive 7 million active daily users<\/a>. <\/p>\n\n\n\n

Upon installing the Chrome Extension, Grammarly asks new users to personalise their experience: <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Note the skip button. It\u2019s always a good idea to offer users an \u2018opt out\u2019 of your walkthroughs in case they\u2019re too busy, or simply don\u2019t feel as though they need a walkthrough.<\/p>\n\n\n\n

The next step in the walkthrough is a quick video tour. Users can click through at their own pace, and engaging GIFs show users how the product works. Again, this is skippable.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

After the video tour, new users are taken to a demo view. Now, this can be intimidating if you\u2019ve never used Grammarly before. There\u2019s a lot of different things going on. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

To guide users that may be feeling overwhelmed, Grammarly places pulsing blue hotspots around the screen that tell users what to click on. When hovering over a hotspot, users are told what to do – for further clarification:<\/p>\n\n\n\n

Grammarly\u2019s walkthrough is so great because each step is less and less hands-on, until they let you loose to navigate the app on your own. <\/p>\n\n\n\n

The last step in the walkthrough is a demo document with a lot of grammar mistakes. Users are invited to click through, as though it were their own work, and see how Grammarly helps out. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

2. MyFitnessPal<\/strong><\/h3>\n\n\n\n

Fitness applies to everybody. Every single person needs to stay fit and active in some way. <\/p>\n\n\n\n

As a result, the fitness industry is enormous. <\/p>\n\n\n

\n <\/i>Statistic\n<\/div>\n
\n The global health and fitness industry generates a whopping 80 billion U.S. dollars <\/strong>every year.\u00a0\n
\n Source: <\/strong>Statista<\/a>\n <\/div>\n<\/div><\/div>\n\n\n

This makes the fitness industry<\/a> lucrative, but it also makes it very competitive. For a fitness app like MyFitnessPal<\/a>, an amazing walkthrough is vital<\/em> for encouraging new users to get started. <\/p>\n\n\n\n

After asking a couple of necessary questions: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The app creates a custom plan for new users designed to help them with their fitness goal:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then the walkthrough begins. Users are first asked to enter the last meal they ate. Pop-up boxes appear around the screen, helping users navigate the app for the first time:
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Directional arrows support the text, showing users where to click:
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And these pop-up boxes continue to appear whenever a user is doing something on the app for the first time. This helps users get the most out of the app as it informs them of all the things they can do, like this pop-up: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This pop-up box style of walkthrough makes MyFitnessPal\u2019s onboarding clear and concise, but also non-intrusive. Users can simply click anywhere on screen to remove the pop-up boxes if they no longer need them. <\/p>\n\n\n\n

3. Diner Dash<\/strong> <\/h3>\n\n\n\n

Just like fitness, mobile gaming is a competitive <\/em><\/strong>industry. In 2021, the App Store<\/a> had almost 4 million apps, and almost one million of those were games! <\/p>\n\n\n\n

Diner Dash Adventures<\/a> is a very popular mobile game with a score of 4.4\/5 stars from over 70,000 reviews (on the App Store).\u00a0<\/p>\n\n\n\n

The game also won Google Play\u2019s \u2018Best of 2019\u2019 award.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The walkthrough for Diner Dash Adventures is very comprehensive and engaging – exactly what\u2019s needed to get new downloaders excited about a game. <\/p>\n\n\n\n

It combines text pop-ups and highlighted hotspots to guide users through a simplified version of a level: <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

When the level is complete a celebratory screen congratulates users for a job well done – encouraging further engagement: <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

As users progress throughout the game, the highlighted hotspots and text pop-ups are reduced, but still show up every time there is something new to review:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

This ensures that users know exactly what every part of the game does so that they can get the maximum enjoyment out of it.<\/p>\n\n\n\n

4. Honey<\/strong><\/h3>\n\n\n\n

Honey<\/a> is a coupon site that automatically applies online coupons for users when they are shopping on eCommerce websites. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Users can add the Chrome extension to their browser in just a couple of clicks:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

From there, users are invited to watch snappy GIFs that demonstrate exactly how Honey works: <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Users can click through the steps in their own time so that they can learn at their own pace. <\/p>\n\n\n\n

However, while this is great onboarding, it\u2019s not what we\u2019d class as a walkthrough. <\/p>\n\n\n\n

Honey goes a further step to walk users through the process of using the extension to find coupons:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

This click-through demonstration is engaging and lets new users get a feel for how they might use Honey when they\u2019re shopping online. <\/p>\n\n\n\n

Honey also automatically pops up the first time new users visit the checkout page of an eCommerce<\/a> site after adding the Chrome extension.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Clear and concise pop up boxes show users exactly what to do in order to apply coupons and save money. <\/p>\n\n\n\n

Alternatively, they can also click the \u2018Try Later\u2019 text beneath the \u2018Apply & Coupons\u2019 button if they don\u2019t feel like using Honey at that time.<\/p>\n\n\n\n

5. Slack <\/strong><\/h3>\n\n\n\n

Slack<\/a> is an instant messaging platform that acts as an alternative to email. The instant nature of the platform means that it\u2019s great for keeping remote teams in touch with each other. <\/p>\n\n\n\n

As more and more businesses move to remote working, apps that work both on desktops and<\/em> on smartphones are becoming more of a necessity. <\/p>\n\n\n\n

Slack\u2019s mobile app has an amazing<\/em> walkthrough! <\/p>\n\n\n\n

It begins with some succinct and engaging screens that let users know about the top features of the app: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

From there, users can select a team that is most relevant to them and watch an interactive demo play out: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We selected the marketing demo. As you can see, helpful hotspots guide users through the demonstration: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

This interactivity helps users to get a better grasp of how everything works before they start using the app for themselves. <\/p>\n\n\n\n

<\/span>Final thoughts<\/strong><\/span><\/h2>\n\n\n\n

An amazing walkthrough is a great way to welcome new customers to your website or app. It helps you to make a lasting first impression and will hopefully encourage users to come back to your product again and again. <\/p>\n\n\n\n

If you want to know more about how to welcome new users, click here to find out about our onboarding videos<\/a>.
<\/p>\n","protected":false},"excerpt":{"rendered":"

A website or app walkthrough is a great way to welcome new customers and encourage them to keep coming back. Check out these examples for inspiration.<\/p>\n","protected":false},"author":5,"featured_media":283490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false,"_links_to":"","_links_to_target":""},"categories":[100,103],"tags":[108],"class_list":["post-283489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-support","category-support-popular","tag-uc-onboarding-videos"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/wyzowl.com\/wp-content\/uploads\/2020\/04\/7-amazing-walkthrough-examples-for-apps-and-websites.png?fit=1000%2C500&quality=80&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/posts\/283489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/comments?post=283489"}],"version-history":[{"count":0,"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/posts\/283489\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/media\/283490"}],"wp:attachment":[{"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/media?parent=283489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/categories?post=283489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wyzowl.com\/wp-json\/wp\/v2\/tags?post=283489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}