Grammarly's learn-by-doing demo document

‍Grammarly is a free grammar checking service that allows people to edit just about anything, online or offline. Through its web app, OS X Desktop app, and Chrome extension, users can edit important memos, personal emails, college essays and more, with quick, in-line suggestions to fix spelling errors, punctuation, and word choice.

Grammarly starts things off by prompting users to install the Chrome extension—thereby drawing users away from its web app experience. That's not ideal, but once users are in the app, its nifty "Demo document" more than makes up for the inconvenience. The demo doc is a great example of "learn by doing" user onboarding and teaches users how Grammarly would work with an uploaded document of their own.

Why this is really good UX:

• Having a demo document reduces the barrier to entry.  For instance, maybe I just heard about Grammarly from a friend, and I don't have something on hand that I need to edit right this moment.  If there wasn't a demo doc already available and I was feeling lazy, I might abandon the onboarding process. But instead, I am able to simply open up a document right in the app and start learning. It feels quick and easy.

• The demo document is also just a brilliant example of "learn by doing." Rather than sending users off to a help document, or dragging them through a lengthy walkthrough of every single feature, Grammarly introduces folks to the UI patterns they'll need to learn one step at a time AND true to form.  You learn how to use its features BY using its features.

• Notable features are pointed out with pulsing hotspots—just subtle enough to not obscure the interface, but just eye-catching enough to make users engage.  When clicked, the hotspots reveal tooltips that give short explanations of the feature being highlighted.

• The hotspots are also arranged to sequentially to take me throughout the app—after I'm done checking out the spelling error in the first line, I'm drawn over to the "Correct with Assistant" button.  This unveils a nifty feature that I may not have explored otherwise.

Why this really good UX matters:

Grammarly teaches users how to find and use its key features with a simple and effective learn-by-doing approach to user onboarding that encourages discovery. Subtle hotspots and tooltips guide users through a demo document that unveils how the product works in a logical, sequential order.

The process is a breeze and a delight—within just a minute of onboarding, users can understand all they need to leverage the tool in the future.

Well done, Grammarly.

‍