Lovingly called “dragging you through settings,” onboarding in FullStory was a disjointed journey for users in 2017. To that point we were a company that relied on self-service subscriptions. We were incredibly lucky given the state of our onboarding.
Teaming up with a highly energetic and empathetic colleague, I embarked on an amazing collaborative odyssey between product and marketing. I was on to help design and pitch a vision for a completely new onboarding experience.
With an emphasis on consistency, focus and the barest essentials, we gained enough momentum and company support to deliver on our vision.
Design, UI Engineer, Project Management, Product Owner
[*] I dubbed the endeavor "Project Willard" based on a Seinfeld reference. The term "willard" is synonymous with onboarding at FullStory and wove itself into the corporate lexicon.
Onboarding status quo in 2017, feel the pain.
Together with my colleague in marketing, I helped craft a prove-it presentation to make the case for improving onboarding. Prove-its at FullStory were a tool for pitching ideas to do product things (like completely redo onboarding) or change operational things (like offering a free tier of service).
Where our current onboarding was full of inconsistent patterns, we wanted the new onboarding to be consistent. We also wanted to feature small, focused actions and use clear, terse copy to set our users up for success.
I created a uniform, large set of form elements and doted over microcopy. We wanted the journey into the application to match the joy of using the application itself. I worked closely with engineering every step of the way to production, crafting a “willard” style framework in SCSS to match my efforts in Sketch.
Chunky form controls and concise, on brand copy.
Gathering data about the user's role in an organization.
Adapted later for the GDPR, this step required a lot of copywriting cycles.
Allow users to name [new feature at the time] their account and set up benchmarking metrics.
The most difficult step, installing the snippet is crucial to getting value out of FullStory.
This was the next most difficult step. Later iterations swapped the image, people confused it for a real credit card form.
We buffed the zero state and added the option to email the snippet from here as a fast follow.
Sample snippet email.
We did have data going in that suggested the bulk of people signing up for FullStory accounts were not highly technical. We added an affordance to email an account's code snippet from within FullStory. I welcome any excuse to work on HTML email templates.