Zest's updated onboarding tour: Zestier than ever
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:
And here’s how it plays out after the updates:
Zest’s home page has a single action, and makes it clear that the app is a Chrome extension. Nice.
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.
Right away, Zest shows us something important that we might not have noticed on our own: a dark mode!
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.
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.
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!