Roles
Product Designer
UX Researcher
Platform
Desktop
Context
8 week personal passion project
Links
Published on UX Collective: Using Video Games to Learn about Product Onboarding ↗
Challenge
Context
As the need for online communities grew, Discord exploded in popularity. All of a sudden, Discord became more than just a platform for gamers. It grew into a product and platform that became the home for thousands of different communities, and with it came new users from Zoom and Slack that didn't know how Discord's servers work.
Discord, at its core, is a developer-oriented technical platform that was made for gamers to jump into and tab out of. Discord's problem today isn't with remaking its core product (it's still fantastic). Instead, as its user base evolves, the reframed problem is how it can effectively onboard the new type of users booting up Discord for the first time.
Vision
Design roadmap
In an ideal world, the design process is linear. In practice, it rarely is.
Define
Identify onboarding precedent
Establish scope of research and design work
Research
Talk to people
Understand pain points
Design, test
Outline user flows
Identify areas to focus in on
Design, test
Create initial designs
Revisit with users and refocus on pain points
Create high fidelity mocks
Design
To better introduce a complex, technical product like Discord to a new user base, I sought to reorganize and provide a more focused flow to Discord's product onboarding model in order to elevate the experience of using Discord itself.
To do so, I reframed Discord's onboarding into three specific stages that can be thought of as onboarding "playthroughs".
Solution #1
The first playthrough is focused on getting the first-time user to the first milestone goal of simply talking to their friends in a voice channel. This initial goal affirms Discord's functionality and establishes a baseline for users seeking to use the platform at its most basic level.
UI elements such as spotlighting and tooltips are utilized to create a more linear guide through the first stage of onboarding.
By establishing the baseline, the goal is that more users having justified basic use case are more likely to open Discord a second time around.
Solution #2
Once the first user objective is reached, onboarding can begin to expand user knowledge about Discord's core product, developing the user's understanding of what a server is.
The onboarding experience begins to start moving away from linear UI elements such as spotlighting, and adds new more unobtrusive elements such as clickable "mission markers" (coach tips) and banners.
The second onboarding's ultimate goal is to help users grow into their usage, and in turn grow Discord's returning user base.
Solution #3
Given that server knowledge is established, onboarding now sits at a stage where learning and discovery should be non-linear and completely up to the user. In this third stage, the user has now ideally downloaded the native app and is now embarking on their own onboarding discovery, shaping the experience to their own needs.
In this playthrough, there's no need for extra UI elements and overlays, and components are essentially built to have integrated onboarding functions. Any extra elements should be indistinguishable from the core product itself.
It's in this stage that users start shaping Discord to their own personal preferences, and the Discord of an experienced user start to take form. At the perceived "end" of the third playthrough, the user's comfort with the product should be at an all time high.
Ultimately, by creating a "new veteran of Discord", the experienced users are now in turn able to stimulate user growth by inviting their inexperienced counterparts.
Discovery
For the sake of onboarding, Discord's user base could be broken down into two specific types. One side consists of Discord's traditional gamer user base, while the other takes into account the new, inexperienced user base.
For "server rookies", the typical starting point for most of these users is a friend invite, with most coming over to Discord to join pre-established servers. We can reframe the onboarding journey to reflect this, with each user type representing the beginning and end of onboarding.
Wireframing
Knowing our specific user base and the journey that the server rookies go through, an initial onboarding flow can be sketched out. This can be shown with linear lo-fi sketches, broken down into three stages that each reach a respective onboarding goal.
User testing
Two different forms of user testing is used to optimize and make sure the onboarding functions as intended.
First, A/B tests with specific Discord onboarding components are conducted, which help distinguish which UI elements are more useful.
Second, I wanted to test each onboarding stage as a singular test, so each of the three onboarding playthroughs were tested individually to ensure that they could reach specific user milestones as stand-alone entities.
- Run through the high-fidelity wireframes
High fidelity for 'handoff'
Once corrections, tweaks, and general tinkering is complete, final high-fidelity prototypes of Discord's revamped onboarding are created.
Reflection
I've personally always glossed over onboarding as a vital part of a product, and in really taking a step back to explore it again, I've been able to take a second look and learn things I never thought about before.
With this project, there's still more to consider ex. how onboarding can evolve in relation to future updates and patch notes. What I've identified is pretty narrow in scope, and doesn't take into consideration how onboarding can function in larger community servers that are boosted by Discord's premium paid service, Nitro.
If you're on the team at Discord with feedback on what I got wrong, ping me! :) this is a personal passion project of mine, so there are no tangible metrics or results measured.
