Behind the Carbonmade onboarding UX (a case study)
by Tobias van Schneider
Designing an effective onboarding experience is a balancing act between solving as many potential questions or roadblocks as possible, while at the same time not overwhelming the user with too much information.
Onboarding flows might be my favorite part of a product. It's one of the most crucial elements of the entire experience.
A great onboarding experience can increase your conversion rate, engagement and brand recognition while lowering the barrier of entry – meaning, how fast someone can start using your product the way it's mean to be used.
Our usual onboarding requirements:
✅ From a technical perspective, we need to collect a minimum amount of data for operational purposes. Usually that's the email address, a username, a password or other information we need to create an account and maintain contact with the user.
✅ From a brand perspective, we can use the onboarding experience to set expectations and help the user understand what our product is all about.
✅ From a UX perspective, onboarding should guide the user through basic functionality, making them familiar with essential features or highlighting important parts of our product. Almost like a little tour – not too long but not too short.
I ultimately like to see the onboarding experience in three parts:
Part 1: Account creation - There is no way around it. It can be right at the beginning or further in the experience, but it has to happen at some point. Account creation is usually boring, but it doesn't have to be if done right.
Part 2: Core onboarding - What preferences do we need from the user to make the experience as personalized as possible from the start? What information does the user need to know upfront to have an optimal experience? The decisions here depend on your product.
Part 3: Extended onboarding - Here we make use of progressive disclosure, meaning we slowly reveal important information where the user needs it the most. The extended onboarding can be time or drip based, or it can be triggered by specific achievements or "experience levels."
While there are best practices for onboarding experiences, every product is different and benefits from different approaches. So as I walk you through our onboarding experience for my portfolio tool, carbonmade.com, keep in mind that all of our decisions here may not apply every product. It just depends on the nature of your product and what you're trying to accomplish or solve.
But before we dive into it, here's the entire onboarding in one single video:
Behind the scenes of the Carbonmade onboarding experience
Step 1️⃣ — Minimize forms and cognitive load
For Carbonmade, we decided to go with a phased approach to minimize forms and cognitive load. Meaning, we keep decisions bite-sized, so you don't have to think too hard.
The majority of people don't enjoy filling out forms. It feels like work seeing a dozen input fields all together on a page. The more forms, the more your user needs to work. And the more work your user needs to do, the higher the risk of dropping out.
So we start light. Just one simple question: What's your name?
Everyone has a name. That's easy.
Step 2️⃣ — Commence hyper-personalization
Following our minimal approach, we're asking another simple question: What do you do?
To make it even easier, we autocomplete up to 130 professions and support the user with placeholder text inside the field and help text below the field. (Whenever possible throughout this experience, we aim to use actionable placeholder content in place of additional UI elements.)
The majority of people will pick one of the most popular suggestions. But those who type in something more specific like "Photo Editor" are pleased to find we thought of them too.
Step 3️⃣ — The effort heuristic & perceived value
After you complete the first two steps (your name and your profession), we take over and start personalizing your experience based on the preferences you entered. This third phase takes you through a journey of "creating your portfolio" on the fly and preparing a couple starting point layouts created for your profession.
Here we very intentionally create suspense to make use of the effort heuristic and increase the perceived value of our product. Our goal here is to communicate that magic that is happening in the background. And we don't want to rush through it:
"When a performed action happens faster than expected, users may not appreciate the effort put into it or believe that the action happened at all." (Great article here that describes how the perceived value and perceived functionalism can be explained through the effort heuristic.)
Ultimately, personalization and custom layouts for each profession is one of our biggest features, and we want to make sure that value is highlighted and understood.
Step 4️⃣ — Unpacking the goodness
This is where the real experience starts. There's a lot to unpack in this screen but every single little detail has its purpose. Let's break it down:
Personalization in copy — We add your first name as a logo to each preset option. It's a little detail that feels special once you notice it. We are specific about the headline copy, emphasizing that this is now all about YOUR profession.
Visual identification — Each layout is personalized for your profession. If you sign up as a 3D artist, you'll see 3D work everywhere. If you sign up as a photographer, all verbiage and layout designs revolve around photography. Another small (but big) detail, and if I didn't point it out here you wouldn't even notice. But subconsciously you feel understood seeing work you can identify with on the screen.
Aspirational identification — Each layout option has a title specifically designed to align with a certain personality type, or at least one we aspire to. Instead of using quirky layout names or generic terms, we use titles you might use to describe your own work. Again, a small detail but subconsciously you'll lean into one direction, based on your personality and aspirations.
Value verbiage — We take care to make every word in this experience relays value. Once again: it's the tiny, seemingly negligible details that add up to a lot. When you hover over layout options, for example, we use the word "Customize" instead of "Select." The word "Customize" implies you have control.
The paradox of choice — To avoid overwhelming you with options, we limit your choices to four layouts. But we know making this foundational decision can still introduce a little bit of panic if you fear being locked into your choice. To avoid drop-off at this point, a friendly note appears in the lower right corner that looks like a personal message. We wait a second or two before it pops up. Our goal? Circumvent this potential barrier by telling you this is not a final decision. You'll be able to customize everything later, so you don't need to worry about making the "wrong" decision. Existential crisis averted.
Everything you see in the above screen is designed to motivate you to pick a layout and feel confident in your choice, which keeps you moving onto the next step toward conversion. It also serves as a primer for what you can expect from the Carbonmade experience moving forward.
Step 5️⃣ — The final step
We made it! All we need is your email address and you have an account. That's right, no password. The "magic link" login is yet another intentional decision to make this experience as effortless for you as possible. But we're not done until we're done. Here's how we get you to the finish line.
Employing the sunk cost fallacy — Here we take advantage of a very human tendency: When we've put in effort and time into something, we feel the need to see it through to the end. Otherwise, all the investment we made was for nothing. It's a nuanced psychological behavior; if we would've made this any longer, you may have dropped out. If we would've made it much shorter, there wouldn't be enough "investment" from your side to justify an account creation.
A progress bar is an example of another UI element that makes use of the sunk cost fallacy. It reminds you of the effort you've made and subconsciously prods you to keep going. "You're almost there," we're trying to say. "Why give up now?"
In Carbonmade's case, we achieve this with a simple headline: "Don't lose your progress." With goal-oriented language, we're telling you that you're almost there. You'll be able to edit your portfolio in just seconds.
Social proof — Social proof, also known as informational social influence, is a way for us to connect with other humans by gaining insights on what they approve or disapprove of. It's used in advertising, product design or even social situations.
At a critical moment (the final step of onboarding), we use social proof to give you that final nudge to the finish line. It's at this point we choose to feature user reviews. When we see other people we respect are using a product we're about to use, we know we're joining the pack. It might also help us understand that this is not a scam (although, even scams these days know how to use psychological UX principles).
The last act: Extended onboarding
At this point, you already have an account. The first big part has been completed. Now, our extended onboarding comes into play to address any potential roadblocks and introduce essential functions of our product.
We didn't have extended onboarding for Carbonmade at first. We simply dropped users straight into the app. But soon we learned people were experiencing an overwhelming sense of information overload. They completed the initial onboarding, but it was too much information at once after that, so they procrastinated on building their site and ultimately dropped out.
Since then, we've added contextual tips and explicit affordance (visual cues that help you know how or when to use a feature) to progressively lead you along, rather than dumping it on you all at once.
Think of it like a video game. Instead of watching one long tutorial and attempting to memorize everything upfront, a computer game usually gives you small little tasks to complete and accomplish along the way. And before you even notice, you're playing the game and using shortcuts you didn't know before. That's progressive disclosure. It's a way of carefully designing an experience that only gives you the most necessary information at the time you need it the most.
The visual design itself can play a part here too. When you're first hopping into Carbonmade after sign-up, we fade the UI a little bit in the background as we introduce key concepts. You can't interact with the UI just yet, but it gives you a spatial sense of what you're about to see without overwhelming you.
Every product is different, but when it comes to the extended onboarding, you have to decide which two or three things your user actually needs to know, of the hundreds of things you think they need to know. Anything more than 2-3 bits of information will annoy your user and lead to drop-off.
It's important here to focus on communicating holistic concepts – that is, the foundational elements or philosophy behind how your product works – rather than narrow features or functionalities. In our case, we only need you to know this: 1. Everything revolves around blocks and 2. Everything is drag and drop. Just have some fun and try it.
Our onboarding experience is constantly evolving and always changing. It's a never-ending process of improving messaging and making (and changing) decisions based on the data we collect. For Carbonmade, our onboarding decisions so far have served us well – you can try it out for yourself here. I hope it will inspire you for your own designs.