Zest's Updated Onboarding Tour: Zestier Than Ever

March 14, 2019
User onboarding

by Tristan Harward, Head of Product Design at Appcues

Zest.is aims to cut through the noise by providing a curated stream of high-quality marketing content to digital marketers.

A while back, we took a look at Zest’s funky onboarding tour. We liked their new user onboarding flow the first time around, and recently they added some great improvements that are worth calling out.

Here’s what the old onboarding flow looked like:

this is a screenshot of zest.is old user onboarding flow with a large tooltip and yellow CTA button

And here’s how it plays out after the updates:

This is a screenshot image of zest marketing content stream's marketing site with a CTA that reads "add zest new tab to your chrome"

Zest’s home page has a single action, and makes it clear that the app is a Chrome extension. Nice.

This is a gif image of zest's onboarding flow. It shows an animated welcome message modal

Once installed, the first thing you see is this welcome modal. The copy is clear, concise, and it reveals the personality of the brand. There’s also a clear next action, which is A+—fewer choices means faster decisions, according to Hicks law.

The use of subtle animation is also a highlight of this entire experience (you’ll see more later). Zest uses just enough animation to draw the eye, but not so much that it detracts from the content itself.

this is a gif image of an interface switching between dark mode and light mode. this feature is shown to new users with a hotspot and a tooltip

Right away, Zest shows us something important that we might not have noticed on our own: a dark mode!

This tooltip is nicely done: the copy is short and focused, it instantly responds to your actions, and the animated hearts draw your eye to this otherwise subtle callout.

The animated hearts also serve to differentiate the onboarding from the rest of the experience. Humans are natural pattern matchers: We connect concepts by visual similarity, so when we see these unique spinning hearts, we’ve already learned to associate them with “informative help,” and we pick up the purpose of the tooltip quickly without having to think too hard about it. Less thinking is good UX.

this is a gif image of a user experienceing user onboarding. the image shows a hotspot ui pattern with a green tooltip.

Next up, Zest wants to teach us how to filter down to specific topics. Since their value proposition is to “cut down the noise,” this seems like an important lesson.

What we like about this tooltip is the instant feedback: when you click a filter, you get an immediate visual cue with a new tooltip that rewards you for doing the right thing. This aids in the learning process.

this is a gif that shows a youtube link opening as part of zest.is's user onboarding flow

Finally, Zest injects another bit of personality and a legitimately fun reward for taking the right action: Clicking the “let’s boogie” link takes you to a Earth Wind & Fire video on YouTube. Groovy. 😎

Things we liked:

  • Short, clear UX copy throughout
  • A unique animation pattern that draws attention, differentiates the learning tips, and threads the experience with a common stitch
  • Instant feedback upon taking the right action—great for learning new behavior
  • The entire onboarding flow is succinct and focused on showing the main value of Zest
  • Lots of fun! This UX has personality in spades

Things we’d like to see next:

  • The experience kind of just ended after the final tooltip and left me hanging—it would be great to see a conclusion to this fun story!