logo
Steps
1
Introduction
2
WYSIWYG Editor
3
Basic Text Blocks
4
Adding - Images, Files, Links
5
Getting Attention - Buttons and Alerts
6
Embedding Code Snippets
7
Embedding iFrames
8
Validating Learning
9
Conclusion

Introduction

Thanks for Checking out Walkthrough. This is a walkthrough to share our vision and capabilities of walkthrough.so
There is always a learning curve involved in doing something new. The internet is full of DIY, tutorials, how-tos kind of instructional articles. There are plenty of tools we use for writing those eg. wikis, blogs, markdowns, or MS/Google docs. But some of these tools and format are not so ideal for both readers and writers of these. That is where, we intend to help. 

Reader's Challenges:

  • Beyond basic Hello Worlds or Getting Started, tutorials often tend be longer. If the content is longer (>2 pages), readers find it difficult to follow the instructions. Readers end up scrolling up/down, trying to figure out the flow and create a mental model.
  • Learning new thing can take longer than few minutes and often is not completed in a single sitting. That is why, its important for them to know how much have they finished and time it would require to finish it. 
  • Learner's enthusiasm can wear out quickly if the content is not engaging enough.   
All such things increases the perceived complexity in learning new stuff.

Writer's Challenges:

  • Writing great and engaging content requires a lot of efforts. The tooling introduces additional complexity e.g. adding code snippets,  proper screenshots,  attaching files,  embedding third party content can be very tiresome. 
  • Tutorials often can have both internal audience like your own team, new hires or partner teams. They can also have external audience like customers, developer community etc. Sharing them securely and privately is difficult. 
All such things generates resistance in creation of great content.

Codelabs:

This is where we found that, the format Googler's created - Codelab can be useful. In their own definition - Codelabs are interactive instructional tutorials. Google has been writing plenty of new codelabs each day on all of their core technologies - Flutter, Firebase, Tensor-flow, Google Cloud, Android etc. The developer community is liking the experience. 
The codelab creators also have open sourced their tools used to generate codelabs. But for people outside of Google, it has been somewhat challenging to use it effectively for below reasons.
  • Writing
    The tooling requires writing content in certain format, either as a Google Doc or Markdown. But as the codelabs gets reacher with more kind of interactive content, remembering and getting the format right can be frustrating.
  • Hosting and Sharing 
    The tool generates static HTML files that you can host yourself. But many times, writers have codelabs that are for specific audience - internal customers, workshop participants. So making them private and sharing requires your own tooling around it.
  • Customizations
    Customizations with respect to styles and behaviour can be tricky for those not very familiar with Go, Javascript and CSS. 
So we decided to make Walkthrough.so - a tool for writing great tutorials.

What does Walkthrough.so offer?

The focus of walkthrough is to simplify the creation of rich codelabs style tutorials and then push this experience further. 
  1. WYSIWYG Editor and Block Components 
    Using a block style editor, we make it very easy to create interactive blocks of data and allow integrations using plugins. The plugins can be extended to create many different kind of components.

  2. Sharing, Hosting, and SEO
    Walkthrough makes it easy to share and host such tutorials for your target audience. 

    Public Sharing - If you want to write codelabs/tutorials, we allow sharing it publicly and turn it into a codelab style blog.  Walkthrough takes care of making it SEO and mobile-friendly.

    Private Sharing - If you want to share such content privately with your customers e.g. onboarding documents, migration guides, etc, Walkthrough allows sharing with an email address or link.
  3. Styling And Customizations
    With a rich block style editor, we make it easy to make codelabs look stylish and allows you to showcase your brand with banner images and colors etc.  
In the next section, you can learn about what kind of tools walkthrough.so provide for writing beautiful documents.
Next
Discussion
You
0