Output

Arcade: Guided Onboarding

TLDR: I designed a completely new onboarding experience for Arcade, a desktop music-making application. Key engagement metrics were lifted 300% and conversion was boosted by 8%.

Role: Product Designer
Company: Output
Timeline: 2021 · 6 months
Website: View live

My involvement

Discover

Define

Design

Launch

Core competencies demonstrated

OnboardingDesign SystemsMotion DesignUser ResearchInstructional DesignVisual DesignCross Functional Communication

Airdropped onto Activation a month after this project's inception, I was not around for the foundational research. It was conducted by a different product designer, who transitioned off the team as I joined.

From that point onward, I was responsible for all design deliverables. I created research plans and ran moderated user tests. In addition, I facilitated workshops to gain consensus on direction en-route to all relevant deliverables.

I used components from Arcade's design system to create some screens in this experience, designing new components in several areas that were not yet accommodated by the design system.

Setting users up for success

Output is a company that creates software and studio gear for musicians. Their flagship SaaS product is called Arcade. Think of it as a robust playable instrument backed by an ever-growing library of sounds.

Arcade's first (and only) onboarding was a 1-minute-long video that could not be skipped or returned to after viewing.

While this funneled users into the product relatively quickly, cancellation surveys and analytics indicated a significant number of churning users were unable to utilize Arcade's capabilities, and so the Activation squad took aim at overhauling the onboarding experience.

Process & Experience

Research

The project began with exploratory "unboxing" research around users' first experiences with Arcade. Observing their first experience with the existing onboarding, we asked them to complete several basic tasks within the product that were explained in the video. We then gave them broader, more complex tasks in order to gather information about how other parts of the product were helping or hindering them achieve their goals and workflows.

(Sound on ☝️🔈)

(Sound on ☝️🔈)

This research was enlightening. Users were missing several key features (such as modifiers) and value propositions, despite them being listed the onboarding video. Many users also searched for a "skip" button.

We needed to ensure that we could deliver instructions at key points in the user journey, so we chose to go with a guided, opt-in tour. In the ideal experience, progress would be gated so that users could not complete the tour without demonstrating understanding of the concepts therein.

Trade-offs

Beacons & Guidance

I explored various methods for highlighting interface elements during the onboarding experience. Neither of these early solutions was ideal for the business. The intricate highlights would require excessive up-front engineering work, while the circular beacons lacked richness.

Early Iteration: The ideal highlighter would be precise, with contextual tooltips.

Early Iteration: Technical constraints drove designs towards a sidebar and more minimal, flexible beacon for highlighting.

Onboarding Flow

In the end, I struck a middle ground: a spotlighting beacon that could be drawn to encompass high-level elements in Arcade, without worrying about all the nooks and crannies.

Tour Conclusion

The tour's conclusion also warranted an illustration or animation. The main constraint was that we could only display animated GIFs within our tour sidebar -- not videos. After iterating over several solutions, I landed on one that fit the celebratory vibe while also looking great alongside our immersive and varied 3D product artwork, while retaining a low GIF file size.

Tour Completion Animation

Outcome & Impact

The key metric tracked was 30-day trial conversion, which received a statistically significant 8% lift as a result of Guided Onboarding.

We also used leading indicators as supportive metrics:

Day 1 cancellations (9%↓)
7-day core function engagement (up to 300%↑)

All of these metrics were significantly positively impacted, indicating that this onboarding experience was a smashing success for the business as well as Arcade users.

Words from my collaborators on this project

Mordechai's determination to continually drive to the why behind user needs, to diverge on problems openly and converge on solutions decisively, and to collaborate closely with us every step of the way, brought certainty to his team working in the complex, uncertain landscape that is music technology.

A listener at heart, Mordechai would continually work to not only hear the team's point-of-view when gathering design feedback but to also fully ingest, study, and incorporate it into increasingly thoughtful designs across multiple product surface areas.

When working with Mordechai, I always had a funny feeling he was thinking of ways to make my life easier as a developer. Whether it be considering development effort when producing designs, finding new tools to aid in handoff, contributing source code, or delivering a well placed pun during hard times, I always felt Mordechai was there for me. He's the positive, supportive spirit we all wish for and need on our teams.