MAY - AUGUST 2016
Behance's new onboarding is a redesign of how a new user to Behance would interact and learn about the product— this project covered the pre-sign up flow all the way to the first email a user would receive after signing up. This feature now onboards more than 5k users per day, and we increased the signup rate from 19% to 32% with the redesign.
Project lead, Product designer: UI/UX design, responsive design, copywriting, end-to-end user flow, wireframes, user research
Zach McCullough · Creative Direction
Jess Lissy · Front End Development
Alex Garipan · Front End Development
Dorcie Lovinsky · Back End Development
Launched, some features still being A/B tested
FRAMING THE PROBLEM
The previous iteration of this project was completed in 2013, and the flow at the time was based on following prime/curated users upon sign in. The success of this flow, however, was contingent on users being aware of who was an industry expert that they would enjoy seeing work from, and there was little to no concept of educating the user as they went through the product.
My first task was identifying which terms and concepts were well known internally or amongst high-power users that wouldn't be transparent to new users immediately. These boiled down to:
- What is Behance, and why should I join?
- What is a "creative field"?
- What does following a user do?
- What is an "appreciation"?
Simultaneously, I had to think about what outcome I wanted the user to get out of the onboarding flow. Was it to have them appreciate a dozen projects? To learn how to discover new work? We ultimately decided that the most important thing for a user to get at the end of the flow was a well-populated activity feed that had curated work tailored to their custom interests. This also meant that new users would also get a customized email every week of the best work in the fields they were interested in.
A NEW AND IMPROVED FLOW
The final user journey is broken up into 5 parts, and we only had control over 4 of them:
- Pre-signup priming
- Sign up form (an Adobe-wide design that was out of our purview)
- Selecting creative fields
- Loading a custom activity feed
- Context-specific teaching
Each step had to be considered both for localization and responsiveness, and the final KPI that we focused on for the feature was successful onboarding completion.
01. Pre-sign up Priming
Many major pages on Behance can be browsed without needing to signup, but certain key actions required a user to be fully signed in. For each of those actions, we wanted to "prime the pump," so that the user wouldn't be surprised when they landed on an Adobe signup form. The popup we generate is context specific— if you're trying to follow a certain user, we'll populate that user's name and profile image accordingly.
The exception to these popups is a user who comes through our onboarding flow through our general "sign up" button in the navigation. Those users bypass these popups and go straight to the sign up page, as they've already made their intent explicit.
02. THE ADOBE SIGN UP PAGE
The user would then be taken to the universal Adobe ID sign up page.
03. SELECTING CREATIVE FIELDS
Between each of these steps, when possible, we try to put in loading pages that make sense to the user. If a user signed up via the following button, for example, we display copy that indicates to them that their "follow" action has indeed been completed and passed through the sign up form. The projects that the user has uploaded also starts appearing behind the overlay to indicate that the action of "following" has enacted a type of change (the user may not know what that change means, but we're just hinting!)
The user is then taken to our creative fields popup, where they can select topics that they like. We phrase the main text as "I also want to see creative work in..." without referencing creative fields to reduce user confusion— the primary goal here to demonstrate the depth of content here ("Wow, I didn't know Behance covered so many topics!") and to urge a user to select their own favorites.
Each of these topics is actually a curated gallery hand-selected by our in-house curators, which ensures that there is a consistent stream of high quality content, which gets updated daily.
You'll also see a small custom welcome message on the top right that pulls in the user's first name from the sign up form in step 2.
We also require the user to select at least two topics to continue on the flow. This is to ensure that there is more content, and over the next weeks we'll be A/B testing the order of these topics and the number of required creative fields. As you select each creative field, the background of activity reloads— its a precursor to what your actual activity feed will look like.
04. See your custom feed
The previous popup's main CTA is "See my custom feed," and to build on that, we show yet another loading state here, indicating that your selection affected a custom feed of projects, and that we registered which topics you had chosen.
Upon landing in your fully populated activity feed, we give a short welcome message, again custom with the user's name, and we invite them to receive updates from us via email (instead of adding this in the previous steps as a checkbox).
05. context specific teaching
As far as the user is concerned, they feel like they've successfully signed up! And we didn't want to introduce any additional checklists or tasks for them before they could dive into their new feed. As teaching tools, however, we did add what we call "pulse points" to two areas of the projects that would only appear as they interacted with the product, and only in the context of where it would matter for them.
Each pulse point appears only once, and they display success states if you complete the action immediately, but they disappear upon page reload (or after inaction for a certain time) regardless of whether you follow their directions or not. They're meant to be helpful and friendly, not annoying or cumbersome.
SIGN UP ON EVERY DEVICE
Again, nearly all features on Behance have to be designed with responsive layouts in mind.