Welcome to our Best-in-Class Onboarding series, where we’re exploring the top SaaS companies that drive product-led growth. (Check out Chargebee’s sales-assist onboarding here.) Each blog includes a DIY no-code template based on the featured user experience.
If Amazon is the everything store, Shopify might be the everything storefront. What your local mom-and-pop and a global fashion brand might have in common: Odds are, they’re both on Shopify.
If asked to build a self-service experience for multiple personas, most PMs would throw their hands up. I can hear them now: “Are you kidding me!?”
It’s hard enough to get an onboarding flow right for one persona with one product in mind.
Not so for Shopify! Shopify’s onboarding is a case study in making a highly configurable product feel attuned to every new user. We’ll unpack the Shopify user experience (UX) and show how you can tackle the "configurability challenge." If your product is serving different user personas, get ready.
For a better onboarding experience, Shopify asks better questions
If the problem is users with diverse needs, combining your sign-up survey with a tailored onboarding experience is the answer.
If you think about it, this is the same playbook we would use when onboarding a customer with a customer success manager. The CSM would ask the new customer questions and then point out which pieces of the product are worth exploring—helping the customer make a few important decisions. Shopify takes this interaction and builds it into its UX.
No. 1 Mistake: You aren’t using your sign-up questions to personalize your onboarding checklist.
Ask questions within the sign-up flow that you then use to tailor the implementation. Too often, we see a half-baked version of this flow, where we ask users intake questions before emptying them into a one-size-fits-all product experience. Here’s how to do it right.
Tip: Start with simple questions
Shopify opens with straightforward single and multi-select questions: “Which of these best describes you: I’m just starting out. I’m already selling online or in person.” From there, it begins to get deeper into the use case. From a user research perspective, it’s doing several things right. “Which of these best describes you?”—a question that lets the user select an option without feeling that they don’t fit within the answer choices. It also includes helpful explainer text, “We’ll help you get set up based on your business needs.” This text reminds us of the value we (the user) will get from answering the question. At later points, Shopify uses this explainer text to remind us that we can change our choices later, reducing the fear of choosing wrong.
Note: The first question plays double duty as a sales qualification question. If my store is already operating, I’m a much tastier lead for a sales rep.
Tip: Showcase new features in new questions
Shopify has a dropshipping product, which they ask about in their onboarding flow. This onboarding question is an excellent way to announce a new offering. It feels like a natural part of creating a store and the explainer text reinforces why I’d want to take advantage of it. We’ll come back to why this question is so smart later in the flow. One more tip: The answer choices include an “I’m not sure,” which allows users to answer honestly without skipping.
Tip: Discover what your users will need to integrate with
Often, our users will need to integrate our product with their existing tech stack. If your product offers integrations, you should find a way to ask this question in the onboarding flow. Shopify reframes the integration question for the user: “Where is your existing audience?” Said another way, “What do we need to be sure you integrate with so you don’t churn?” This simple, multi-select question helps us discover the critical activation path for this specific user. We’ll want to use this data when personalizing this user’s onboarding checklist.
Shopify makes a few smart choices with this question. Adding colorful but small logos reduces the cognitive load on the user. It also limits a 3x3 grid of 9 options before adding a “View All” button. Finally, it’s multi-select, allowing users to select as many options as they need.
Sign-up flows dos:
- Start with easy questions. Begin with closed questions (e.g., “Yes, No”) that are easy for a new user to understand.
- Use your explainer text. Write explainer text to remind new users of the value they’ll receive from each question. Similarly, this text can soften any fear of doing something wrong.
- Showcase new features. Need to announce a new feature? Drop a new question into the sign-up flow.
- Put “I’m not sure” as an answer choice. Where appropriate, let users answer that they don’t know the answer to the question.
- Show progress, not steps. Include a progress bar, but remove the step counts within sign-up flows. If the user perceives too many steps, it can cause drop-off.
- Allow skips. If users aren’t ready to reveal themselves, let them plow ahead. You can demphasize this option so users don’t skip through.
Get your Shopify-style onboarding sign-up survey flow template
Build a product-led onboarding experience like Shopify's. Check out our Candu-built version of the sign-up survey. Explore the interactive onboarding template below.
Build a personalized checklist into your homepage
Rarely do we see an onboarding checklist this good. Magnifique! And what makes Shopify’s onboarding flow so good? Because the onboarding checklist is tailored to each user. Instead of a one-size fits all approach to onboarding, Shopify personalizes each user’s checklist based on their answers to the sign-up survey. Let that sink in for a minute (thanks, Elon!). How many of our products have an onboarding checklist that adapts based on a user’s needs? Just wow.
The core checklist has an excellent UX—it auto-opens the checklist to the next step the user needs to complete. Opening one step at a time allows the user to focus on the selected action while still being able to explore. The checklist also has a progress bar and shows the remaining steps. Note: Shopify is happy to show how many steps remain in this context but hides them in the sign-up survey. The difference is that, by now, our users are committed to getting the service up and running and want a clear understanding of what they need to do to get set up.
Each of these checklist items has a similar pattern. They include an explicit action for the user to complete. Some description text links out to a further resource if a user wants to learn more (the link is a nice choice, this secondary CTA should not compete visually with the primary CTA). And Shopify adds a helpful illustration so the user intuitively understands each step.
Importantly, each of these steps is only marked as complete after a product event is fired. Often, getting your activation events in order is half the battle.
To achieve expert status, look at this first checklist item: “Find dropshipping products to sell.” Because Shopify learned we were interested in dropshipping from our sign-up survey, it places this configuration option seamlessly into our personalized checklist. Brilliant. 💎
Dos for the checklist:
- Check off steps with product events. Ideally, onboarding checklists should be event-driven.
- Include a single call to action (CTA): Each step has one primary CTA for the primary action and a secondary link for supporting resources.
- Illustrate the action. Why describe when a picture paints a thousand words?
- Auto-advance each step. Help focus your users’ attention one step at a time.
- Show progress. Give users a sense of where they are in the overall process.
Hero status: Personalize the checklist items based on the user’s sign-up survey. Putting resources in their proper place
Put resources in the proper place
Finally, we love this Resources Card. It contains links to critical resources, such as the help center, academy, and community. We appreciate that instead of being hidden away in a tab or hamburger menu, it’s plopped right into the homepage—just below the onboarding checklist.
Build an even better user experience
Shopify’s checklist contains an unusual UI pattern as that the user is able to access the checklist both on the homepage and as an expandable drawer. While we don’t have anything against either pattern, we don’t love when the same UI is implemented in two places. Doubled UI is double the trouble because it creates twice the maintenance work. Shopify could improve its homepage design by embedding critical configuration choices within the checklist or a model pop-out. Alternatively, Shopify could commit to the drawer design by having it auto-open when a user first comes to the homepage.
Optimize your onboarding and sign-up experience. Create no-code dynamic surveys, wizards, and more that personalize UX by persona, use case, and more.
Explore Flows