Tutorial Builder
How might we empower writers to publish interactive tutorial webpages?
How input from a Google Doc add-on gets converted into a webpage
The Problem
Learning to code is a hands-on activity, so the goal was to publish task-based tutorials for learners.
The challenge is that the tech writers need to draft the tutorials without hardcoding or designing the webpages.
In 2 months, our team scoped, researched, designed, and de-risked the MVP and the project was green lit for implementation.
The team consisted of:
a product lead
an engineering lead
a design and research lead, which I took on
The tutorial the developer sees
User Research
I spent 1 week interviewing 5 tech writers to learn about their current publishing workflow. Findings include that:
Because of the review process, writers had to work around internal tooling infrastructure, i.e. draft in Docs, convert to markdown, stage the doc in an internal system, then publish.
Writers use Google Docs for drafting, version control, and most importantly, collaboration, i.e. feedback and sharing.
This suggested we’d have higher adoption if we build upon existing workflows with Docs as the entry point, instead of creating a new content management system from scratch.
Defining Tutorial Structure
In another design cycle, it was determined that a tutorial should consist of 4 main sections, which each contains components:
Top matter: publish date, prerequisites
Overview: topics covered, introduction
Lesson: step-by-step tasks
Success & CTAs: lessons learned, next steps
The tutorial builder should advocate for this sequence.
Google Doc Add-on Explorations
Since research suggested Docs as the entry point, the design was constrained to be within a sidebar. I explored a few approaches. At minimum, the tool should be able to insert all the required components.
Final MVP Design
Launching the plugin
The plugin is launched from the extensions menu
Users can choose between a “Quick Start” option or insert components in the order they’d appear on the tutorial.
Quick Start
Under “Quick Start,” users have a single button option to insert all standard components.
Users can also visualize components with the “Learn About Components” option.
Note: Having visual previews of each component within the add-on may be more ideal, but was out of engineering scope.
Inserting components individually
For a more guided experience, users can also insert populate the fields and insert components individually as they go.
This flexibility is vital when users want to insert more than one instance of a component, i.e. multiple diagrams or code snippets.
Full view of add-on when components are inserted
Next Steps
After presenting the project, we were ready for the implementation stage. To measure success of the launch, we would track adoption rate by tech writers and increase in tutorial creation.
