Ghost's user-friendly WYSIWYG editor and creative onboarding

February 28, 2019
User onboarding

Content management systems are notoriously frustrating, and more plugins and complex menus don't make the publishing experience any easier. That's what makes open-source WYSIWYG CMS platform Ghost such a breath of fresh air.

Ghost's clean, user-friendly rich editor makes the writing and formatting process simpler and easy to understand, while the platform's straightforward user onboarding makes getting started easy.

this is a gif image of a visual rich content editor in ghost publishing platform. This wysiwyg editor has a clear, easy to understand menu with colorful icons and content blocks

What's good about this UX:

After setting up a new account and create a publication, new users are greeted by a set of pre-filled stories (blog posts) in their dashboard, each of which explains a different aspect of Ghost's publishing workflow. The stories serve a dual purpose: to educate new users on how to use the platform while also giving them hands-on experience with the app. Ghost's approach is a solid example of learn-by-doing user onboarding.

this is a gif image of ghost cms publishing platform user onboarding that shows learn by doing pre filled articles to teach new users how to user the platform, plus a hotspot ui pattern which shows a blue tooltip when a user hovers

As new users continue navigating the tool, they're greeted with a series of subtly animated hotspots to guide them through key features. Hovering over each hotspot brings up a tooltip that explains each feature, along with option allowing experienced (or just very confident) users to skip any further tips. The hotspots disappear once they've been read.

this is a gif image of ghost cms publishing platform user onboarding that shows learn by doing pre filled articles to teach new users how to user the platform, plus a hotspot ui pattern which shows a blue tooltip when a user hovers over it. this is an example of good ux with subtle animation

Beyond the onboarding experience, Ghost makes writing and editing dynamic content more intuitive with a minimal interface and easily discoverable “Add Content.” Colorful icons and microcopy make the purpose of each menu item clear.

this is a gif image of a visual rich content editor in ghost publishing platform. This wysiwyg editor has a clear, easy to understand menu with colorful icons and content blocks

And once content (which could be anything from image galleries to videos to html) has been added, it's immediately visible in the visual editor.

Why this is really good UX:

  • Ghost integrates their educational onboarding sequence into the tool itself, using demo stories that describe the publishing workflow. This approach lets users learn how to use the tool by, well, using the tool.

  • Hotspots are used during onboarding to explain key features and guide users toward their first aha moment. The hotspots and associated tooltips disappear automatically after being read, which keeps the interface clutter-free.

  • Ghost's WYSIWYG content editor is easy to use and navigate thanks to a clean, minimal interface and straightforward menu.

Screenshots captured 2/28/19