Product

All onboard! How Zest developed its funky new onboarding process

February 15, 2019

All onboard! How Zest developed its funky new onboarding process

Last January, AppCues featured our previous version of onboarding as an example of really good UX. They said our funky onboarding really packed a punch. 😉

You’d think we’d be happy. We had won the recognition of a group of peeps who really knew their stuff. But as we approached the end of 2018, something felt off.

Although our WAU cohorts were strong, we were bleeding members

Over a twelve month period, we had 80k installs to our Chrome new tab extension, yet only 20k stuck around and became MAM.

We felt and knew that we could and should much better.

And we knew that churn prevention starts with a groovy, dopamine generating onboarding experience.

When the le-moon hits your eye like the big pizza pie

Zest is designed to help marketers improve their professional knowledge by getting into the habit of visiting and consuming the Zest Stream’s high-value content regularly. But to help marketers develop that habit, we realized that the new onboarding would have to help them fall in love with Zest (just like I had many moons ago).

How could we make those 60,000 lost members fall in love?

We decided upon a twofold approach.

In order for a marketer to unlock their full lemon potential, we wanted them to:

  1. Enjoy The whole experience. Zest’s onboarding had to be comfortable, amusing, and just stimulating enough to make them want to see what else was going on, or want to discover how their involvement could contribute to the Zesty grooviness;
  2. Succeed in the process. The onboarding should demonstrate to marketers that they have full control over what happens on the platform. If they see that their initial interaction are making a difference, they will continue interacting with the platform–customizing their feed and their learning experience.

And before we even kicked off our research to uncover just how to make this happen, we found this article on Zest: Welcome onboard(ing)!

This point from the article particularly struck a chord with us:

Modern onboarding techniques like swipe-through screens and force-focus walk-throughs fail because they increase cognitive overload and forget to take the human element into consideration.

When it comes to onboarding or anything else human beings would rather avoid being told what to do.

What did this mean for our onboarding design?

Well, we that having more physical touchpoints would increase each user’s engagement. And, we knew that increased engagement would help us achieve our goals.

But!

The onboarding process should always make new lemons feel that they are the ones pulling the strings.

We knew that would be the only way to close the viral loop and propel Zest’s growth: If a new members hits all the goals we think they should, they’ll complete the loop by inviting their colleagues to join Zest.  

So when Maya (our very cool product designer) and Idan came up with a new sleek, gradual onboarding procedure made up of a number of micro-interactions, and shared it with us during our Zesteam meeting in November, we knew we were onto something.

In the meeting, they pointed out these two things:

  1. First, our onboarding should clarify the purpose of the platform and the message we would like to communicate to users.
  2. Second, the onboarding process should actively engage the user at every step–micro-interactions keep the user moving forward as they learn.

So the two of them scored the features on Zest versus their engagement level, and used the results to map the initial flowchart we used to guide our onboarding project:

If you’re reading this, you’re probably a darn good product marketer or at least an onboarding geek and you want to know more behind their thought process.

🧞‍♀️ Wish granted!


Here’s the actual brief we used along the way:

Brief

As part of our growth-based retention strategy, we know that onboarding users in a perfect, unique way has a direct impact on their stickiness level, LTV and the way we are going to move them within their micro funnels and sub-segments.

We want to revamp our onboarding and improve the overall first-touch feeling users have today.

Goals

Retention: Increase the numbers of Power WAM

Growth: Increase the numbers of WAM

Target

Making the users understand that Zest should become a professional learning habit in their weekly marketing workflow.

Way

Our new onboarding will be a trigger based, gradual procedure. It is a continuous experience that last for the first few interactions of the users within the platform, spread on several days and interactions.

We will reach out to 5-7 current members and create micro tribe of onboarding experts that will be part of the process. Users who are onboarding experts have a great PoV of the onboarding they experienced on Zest already.

One last thing- DOPAMIN! (keep it in mind for later on)

Methodology

First, we have to clarify the purpose of the platform and the message we would like to communicate to users.

Second, we should make the onboarded user understand the interactions in our platform in a VERY interactive way. We will do it by using micro interactions.

Third, we should make the user sign up (WAC) AND/OR suggest content (WACO) AND/OR invite more users

Number 2 above will be broken down into stages and will be introduced to the user based on their usage of the product in their first few visits..

Inspiration (MUST WATCH)

Onboarding on Drift

Onboarding on Duolingo

Score of Features vs Engagement Level

This (incomplete) list should map for us what features we should show the onboarded user and in what stage. I’m using the same score methodology we used in the Product Roadmap

A combination of [highest Dopamine Level] + [Lowest Engagement level the user should have] = The first features we need to show them in the onboarding process.

SectionFeatureDopamine Level(1-5)How Engaged the User need to be in order to feel the Dopamine rush (1 not Eng.- 5 hyper Eng.)Extension, Mobile, WebSession
SidebarTheme41E,M,W1 (link to YT)
SidebarMode41E,M,W1.1 (design element?)
SidebarTags (sidebar + selected + on-card)41E,M,W2
GeneralWant a tee?41E,M,W3
Nav BarPodcasts filter31E,W4
Nav BarVideo filter31E,W4.1
StreamCard – Saves32E,W5
StreamCard – Shares32E,W5.1
GeneralRefer a friend55E,M,W6
Nav BarSuggest a link55E,M,W7
GeneralSignup55E,M,W7
GeneralReview on Chrome55E8
Nav BarSearch21E,WNA
Nav BarShares sort21E,WNA
Nav BarClicks sort31E,M,WNA
StreamCard – Clicks32E,WNA
StreamCard – Profile32E,WNA
SidebarGoogle Apps21ENA
SidebarRecent Sites21ENA
(Other)Become a VIP Contributor44E,M,W
GeneralBecome a Chief55E,M,W(User Rank)

Okay, moving on…

Now we had the idea, the brief, and all of our product people were fired up and ready to go:

So we jumped into it.

We defined the ideal number of interactions.

  • We struggled with this one. On one side, we wanted to show new members everything Zest had to offer them. But on the other, we didn’t want them to feel overwhelmed.

Prepared the copy.

  • The first set of copy for each step was comprised of two parts.
    • A short message describing the feature and how to activate it .
    • And another groovy message to celebrate a successful action.

Adjusted the interactions.

  • We, of course, realized it was a bit too much.

Adjusted the copy.

  • Because, well, ⤴

Boogied.

Adjusted the interactions once again (it was still too much).

Reworked that copy some more.

Decided to hit publish on the desktop version of it.

Ran the alpha test with the team.

Made some cooler adjustments, aaaand:

After testing it a few times and getting the feedback from the nanotribe of testers, we eventually ended up with 6 interactions: 5 during the first session, and 1 (the one for closing the viral loop) in the second session.

Let’s have a look at them:

  1. The introductory popup (we have to officially meet, right?)

2. Once you hit that CTA, the first tooltip appears at the lower right (but not for long–we’re about to adjust that) and helps you customize your theme colour.

3. Next up, customizing the feed by choosing tags relevant to you.

4. Then, we move to the different content forms.

5. And the saving option (for when you want to save that content gem close to your lemon heart).

6. The final step is visible once the member comes back for a second session. That’s when we suggest that they invite their marketing buddies to the party.

And then we were ready for the next big step in our lemony lives.

We were ready to show Zest’s new onboarding to the biggest onboarding brains in the Zest community.

Yam and I assembled a very modest list of amazing onboarding authorities and longtime Zesters and asked them to check it out. We weren’t asking for anything specific (because we all know Karolis is the mastermind for that kind of feedback), we just asked if they had any thoughts about design, copy, and flow.

The results started rolling in

And it was awesome. Though we were laser focused when we assembled the list, we still weren’t expecting 90% completion rate.

(Beat that, Karolis)

We even received some cool video walkthroughs from our testers that made our yellow hearts melt.

For example, Claudiu managed to unleash his full lemon power here:

Wilco made the case against the Boogie, and Matthew was his awesome kind self (even though I forgot to point out that we still didn’t have new onboarding on mobile in my email).

Next, we assembled the feedback, went over the results and prioritized our biggest pain points.

Here’s what we found:

  • The initial onboarding step was located on the lower right, which made it hard to see (You can see what I mean by looking at Claudiu’s video). Since most members start scanning the stream from the upper left,  it took our testers some time to notice the initial step. Thanks for reminding us about that, David and Massimo. <3
  • The size and the font of our tooltips was also not optimal. On 13 or 15” screens it looked okay, but it was too tiny for screens larger than that (You can thank Despina for nudging us in the right direction on this fix.)

In addition to naming our pain points, we received some cool suggestions from our onboarding experts such as:

  • Showcasing examples of good content to help new members improve their suggesting skills
  • Including an intro to the member Success Score as one of the micro steps
  • A/B testing the CTA (that was actually the only feedback we received about the copy. Whoa!)
  • Adding some gamification to the process (Is this a teaser? Maybe 😏)

What’s next for us

Over the last several months, we have turned into real metrics nerds. So you bet we’ll share more numbers about the new onboarding as time goes by.

However, if you’re an existing Zester, but want to see the new onboarding yourself, open distilled.zest.is in the incognito mode and give it a ride. You can even send me your feedback at katarina@zest.is