#446: Onboarding UX Playbook

Choosing onboarding methods (Figma kit), guidelines, best practices, ways of working and how to onboard users on mobile devices. Issue #446 • Mar 5, 2024 • [View in the browser]( [Smashing Newsletter]( Bună seara Smashing Friends, Starting from an empty page always feels a little bit scary and overwhelming. As designers, we need to support our customers and help them get to their first success. That’s the role and the purpose of onboarding, of course. In this newsletter, we dive into onboarding UX — with useful techniques and toolkits to make a lasting first impression also a successful one. You can find plenty of design patterns in [Smart Interface Design Patterns]( and our [printed books]( as well. Happy reading, everyone — and we hope you’ll find a way to make your onboarding a little bit more helpful and a little bit more useful to your wonderful users and customers! — [Vitaly]( --------------------------------------------------------------- 1. The Complete Guide To Onboarding Onboarding is more than getting your customers up and running on day one of using your product. To help you engage them in the long term, Phil Byrne shares valuable insights into the onboarding framework that he and his team at Intercom use: the [C.A.R.E. framework](. [The complete guide to onboarding customers for long-term success]( The C.A.R.E. framework describes how onboarding shapes every stage of the customer lifecycle, with the term “C.A.R.E.” describing the four stages “convert,” “activate,” “retain,” and “expand.” To build a cohesive experience, you send different types of messages in different channels at the various points in the customer lifecycle — all tailored to the customer’s behavior. In his guide, Phil explains each stage in detail and shares tips for planning your onboarding strategy as well as mistakes to avoid. (cm) --------------------------------------------------------------- 2. Choosing Onboarding Methods Onboarding goes far beyond getting users familiar with the features of a product. It’s about helping them achieve their unique goals and creating a first impression that makes them want to continue using the product. But what is the right method to onboard your feature or service? The team behind the NewsKit Design System built a handy little [Onboarding Figma kit]( that helps you determine the best methods and components for your onboarding experience — by answering just four questions. [Defining An Onboarding Experience]( If you want to dive deeper into defining an onboarding experience, the NewsKit team also published a [Figma file that supports you in every step of the process]( — from defining your onboarding scenario to establishing your onboarding components and documenting onboarding rules. The tasks can be conducted in Figma as a part of a stakeholder workshop and take about 30 minutes per feature or service you want to onboard. (cm) --------------------------------------------------------------- 3. Product Onboarding Playbook Eleana Gkogka [compares good onboarding to a seamless hotel check-in]( You are greeted with a welcoming smile, navigate to your room with a breeze — thanks to the straightforward signage in the hotel — and find everything you’ve expected where you’ve expected it, plus some helpful instructions on connecting to the wifi, ordering food, and traveling the city. So how can we deliver an equally pleasant experience when onboarding users to our products? [Product Onboarding Playbook]( In her [Product Onboarding Playbook]( Eleana explores tips and best practices to help you offer just the right amount of guidance and support to keep users engaged. From product overview and contextual onboarding to interactive walkthroughs, email drip campaigns, and self-service onboarding, the playbook gives you an overview of different types of onboarding so that you can choose the one that best suits your product. (cm) --------------------------------------------------------------- From our sponsor Deploy Now: Code Focused. Effortless Deployment. [Ionos]( Eliminate complexities and focus on coding, while [Deploy Now]( efficiently manages the intricate aspects of deployment. --------------------------------------------------------------- 4. Onboarding Best Practices How can you ensure your onboarding is actually helpful and enjoyable and doesn’t become an inconvenience? Taras Bakusevych shares some [simple rules for designing a streamlined first-time user experience]( that takes your users toward their first “aha” moment using your product. [User onboarding best practices]( Instead of designing lengthy upfront application tours, Taras recommends providing brief in-context tips or nudges that users can disable. If your product requires a more in-depth onboarding, consider breaking it up into several stages to reduce the perceived effort it takes to complete onboarding and give users a sense of achievement when they complete a stage. In his guide, Taras also examines potential friction points and what you can do to prevent users from abandoning onboarding. (cm) --------------------------------------------------------------- 5. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [Interface Design Patterns (Spring 2024)]( UX Waiting List with Vitaly Friedman. Mar 7 – Apr 5 - [Scalable CSS Masterclass]( Dev with Andy Bell. May 9–23 - [Design System Planning and Process]( UX with Nathan Curtis. April 18–26 - [Behavioral Design Workshop]( UX with Susan Weinschenk. May 6–20 - [Smart Interface Design Patterns Video Course]( UX 10h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. Spotify Ways Of Working Onboarding is not limited to onboarding users. You might also want to create an onboarding strategy for new designers joining your team. A great example for doing so comes from the design team at Spotify. To get new designers familiar with how they organize work in Figma, they created the “[Spotify Ways of Working in Figma]( playbook. [Spotify Ways Of Working]( Apart from serving as an example for onboarding team members to an established workflow, the playbook is also a fantastic resource for making UI design more interconnected and participatory. If you want to dive deeper into Spotify’s organization system, Cliona O’Sullivan and Barton Smith share [valuable insights]( into the goals they set for themselves, the challenges they faced, and how they managed to create a workflow that truly suits their needs and company culture. (cm) --------------------------------------------------------------- 7. The Smashing Library 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [Success At Scale]( Also meet our newest Smashing Book: [Success At Scale](. Print shipping in early March, eBook now available. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 8. Recent Smashing Articles - [Waiting For Spring (March 2024 Wallpapers Edition)]( - [Reporting Core Web Vitals With The Performance API]( - [A Web Designer’s Accessibility Advocacy Toolkit]( - [Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](