Grammarly's Learn-By-Doing Demo Document

May 9, 2019
Product tour

By Jen Maggio, Senior Product Designer at Appcues

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" and teaches users how Grammarly would work with an uploaded document of their own.

this is a gif image of grammarly's demo document user onboarding experience that shows a pulsing hotspot over a feature that turns into a tooltip when clickec

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.
this is a screenshot image of grammarly's dashboard showing a new document CTA and a demo document, as well as commentary from a product designer reviewing grammarly's UX
  • 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.
this is a screenshot image of grammarly's editor example document that shows an underlined phrase, demonstrating a critical UI pattern used by the product
  • 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.
this is a marked up screenshot image of grammarly's onboarding experience. this is a teardown review of grammarly's UX
  • 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.
this is a marked up screenshot image of grammarly's onboarding experience. this is a teardown review of grammarly's UX

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.