Onboard Users — Get Them Grinding
UX Planet — Medium | Gercek Armagan Onboarding. You can check out my evolving obsession with minimalism here.
Onboarding should seamlessly engage the user with the product starting at t=0.
User onboarding is often overlooked in user experience design. Indeed, it is a crucial and ever-evolving part of UX. This article covers best practices in onboarding with simple examples and a detailed breakdown of Dropbox Paper. Let’s jump into it!
When people arrive at your product:
- They intend to “gain”— this could be in the form of benefits, entertainment, information, financial, business-wise…
- Their intentions are usually correlated with their needs. For example, we are unfortunately leaning to “needing” entertainment, rather than simply “wanting” it.
- They expect for the digital product to address and cover their needs.
- They’re at different levels — starter, regular, power user or anything in between.
Remember that user onboarding is not a way to fix the poor and lacking UX/UI of your product. Onboarding should familiarize the user with a properly designed experience presented in slick pixels; in a matter of seconds.
Onboarding should feel as natural and as “human” as possible. The best way to achieve this is by integrating it with the readily available actions and tasks in your product. “Show, don’t tell” translates to “CTA, don’t explain” here.
Safe to say it is now an industry standard, Trello does this fairly well:
Trello Welcome Board. Yes, I changed the background color, not Taco.
The cards that you can create are there with useful and purposely guiding information. Instead of going through a video or flow of features (which might be more suitable/beneficial in some products), Trello engages the user with the platform’s capabilities right after they sign up. The user is called to act.
How to design the onboarding approach?
Onboarding should be present even in the first version of your product, following along all updates with continuous testing and iteration. Combined with focused thinking and best-practices, qualitative and quantitative research and analysis, based on user, competitor, market data, and insights are key.
Besides evolving with updates, onboarding should also follow-up user actions. If a user leaves a key task unfinished, an email or push notification to remind is very helpful. Surely a reminder should take the form of a hint or helpful suggestion, — while showing some benefit — instead of being put out there as an order. For instance, if setting up a profile is left half at a dating site, it would be much more convenient and effective to say “people with completed profiles have a 60% more chance of finding a match” instead of saying “please complete your profile”. Don’t try to lure in your users, but definitely show the value in what you’re offering.
Onboarding differs according to the platform it is delivered. There is truly much more space to play around and present your features on larger screen dimensions. Pointing out some features in an engaging way is possible in mobile apps too, but compared to web apps, having a flow of a few card swipes with illustrations and information could be suitable for mobile app onboarding.
Whether it is qualitative, quantitative or both, data is your best friend in shaping the onboarding process (and most probably your product).
If your product is not live yet, you can still collect valuable qualitative data from user research and prototype tests. It is not that hard to guess and elaborate on potential user demographics, given that whatever you’re cooking targets specific user groups. Before coding the whole thing, you can use tools like InVision to get user feedback. Simply set up a prototype, add some links and transitions. Test it with a small user group with screen sharing. There are details on how to maximize results from user research, however, that is another article’s topic.
If you already have a product out there, you should be receiving analytical data. Combining it with results from qualitative research creates the basis for developing UX and onboarding as one of its parts. Regardless of the research method and product status, you should continue until you become tediously uninterested in repeating usage patterns. This ensures that you know them by heart.
By utilizing your knowledge on the product and the findings through research, you can decide on the significant and value bearing actions. While paving the way for the users to reach their goals, these actions should also underly product goals. An image being posted on Instagram is a simple example where the target is met for both parties.
While designing the onboarding process, don’t assume anything that could lead you down the wrong path like “the user already knows how to create a post”, “oh, my users can definitely figure this out on their own”. As I briefly mentioned before, try to integrate it with the natural use and flow of the product. It is readily engaging if a user is asked to “tweet” instead of showing it as “this is where you can tweet”. Try not to leave it in the user’s hands.
Congratulate users when they complete a task or reach a milestone.
Invest time and effort into UX writing. Even searching for “UX writing” on Medium and reading the first few articles boosts the level of your valuable contribution to copy. This is also advantageous in other aspects of your business like it allowed me to draft at least twice-as-effective marketing emails. “Good” and “bad” UX copy could literally mean win or loss for your product and eventually company.
Breakdown of Dropbox Paper User Onboarding
Dropbox Paper uses a combined form of engaging activities and explanations. Simple and important tasks are taught by making the user take action. Explanations for these actions are kept present at sight. Secondary-level features are also visible and accessible on the page, where further guidance is supplied before use. You receive different lifecycle emails while creating documents. There are also sample documents which beautifully show the capabilities of the product.
On the welcome screen, Dropbox goes with a slightly bold but empowering slogan: “Bring ideas to life”. This is followed by their targeting of collaborative creative work, supported by a screenshot of a document. Below the ss, main features are laid out for the user to see. The CTA button here is more on the cliché side of copy, “Get started”. I think this is probably the only mediocre part of Paper onboarding. Even “Create” would probably do better. Nevertheless, everything follows seamlessly.
While actually adding 0s and 1s to our world, Dropbox implies that you are creating a baby who is already talking: “Give me a name”
Perhaps this is Dropbox’s take on designing a more “human” experience. Instead of pointing out where the title should be, the product teaches the users by making them directly adding a title. Text follows in an empowering aspect — you can create “brilliant”. Five Ws are laid out here in an instant, and more importantly, in an engaging way. A non-intrusive, very natural feeling instruction area is also present as a reminder, but you can easily skip.
This came up the second time I wanted to create a new document.
UX copy changes in order to reflect product features and to spark ideas.
After typing some text.
They “highlight” the possibilities of formatting. A “bold” statement follows to empower and assure the user. It also helps to eliminate second thoughts.
First email from Dropbox Paper.
As a crucial part of the onboarding process, Paper reaches out (is that a person?) in an email, focusing on a particular aspect of the product.
Last update time, shortcuts and help.
Easy and permanent access to last update time, keyboard shortcuts, and help. This could count as static or passive onboarding since if accessed, the user would learn new information on the product. (They are kind of marked in blue at first opening, missed for the screenshot.)
Keyboard shortcuts expanded.
If you are using similar products on a daily basis, you most probably use some shortcuts. While some shortcuts are the same on other platforms, some are unique to Paper. Keeping them easily available enables micro-onboarding (I think I made this up).
Paper guide expanded.
I’m going to call this next-level onboarding. I think this is the most unique and powerful part of Dropbox Paper. Not for just onboarding, but for the product as a whole. Yes, the platform has very detailed options and possibilities. But these features are worth nothing if they are not served on a silver platter while being kept affordable.
When you click any feature, a simple GIF showing exactly how it is done, along a brief explanation appears. Bang — you again learn how to use a feature in seconds. And it’s very, very accessible.
As a note on Paper, folks at Dropbox are targeting a clean visual representation of type, but there is more to it. They want to get a large chunk from the pie in the cloud document collaboration arena — aka Google Docs (I know there are other options too). They focus on user experience and design a lot, which in return creates a product that you would want to use.
Decent onboarding is hard.
Yet, it could be designed and presented as much as your resources can supply. Read and research. Walk in your users’ shoes. Test and iterate. Ship once, continue shipping forever. Be ready to onboard yourself to this journey. Design is creation, create. I literally ask myself this question every night: “Have I created today?” And most importantly, have fun at what you do! Have fun!
If you came this far, thank you! I hope this was helpful. You may hit the recommend button (which is weirdly a heart) and follow me if you liked what you read. Feel free to comment. You can also follow me on Dribbble!
This is the first article of my UX series. I am going forth with onboarding since I am onboarding my readers to the series (would this count as a pun?). The second article will be on Information Architecture and there’s more to follow.