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 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.

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)

From our sponsor

Deploy Now: Code Focused. Effortless Deployment.

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.

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.

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.

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 →

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