March 5, 2024 Smashing Newsletter: Issue #446
This newsletter issue was sent out to 206,428 subscribers on Tuesday, March 5, 2024.
Editorial
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 and 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 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 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.
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?
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)
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.
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.
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 of 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.
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 →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.