Showcase: How Shopify and Etsy onboard their sellers
E-commerce platforms are all the rage right now, enabling small businesses to sell globally. Two prominent companies in this space are Shopify and Etsy. In this post, we’ll take a look at their onboarding flows.
E-commerce platforms like Shopify and Etsy allow anyone to sign up, upload a catalog of products and start selling them online. These sites face some unique challenges:
- Mostly non-technical users
- Substantial amount of setup to be performed before a store can go live – setting up a catalog, updating the design, configuring shipping and billing etc.
- For most, it is their first experience selling online
Shopify and Etsy need to guide new sellers through the various steps in setting up their shop. At the same time, they need a low-touch process that makes the onboarding as automated as possible. To do this, they both make heavy use of in-application tours. Both Shopify and Etsy have roughly similar onboarding flows. Lets see what it looks like.
Once you sign up and you’ve validated the account, you come to this page. This page has THREE calls to action on the next step
- A “Next Step” message that tells you what to do next
- A link in the description, also pointing to the next step
- A “setup progress bar” that shows the 7 steps before you go live
When you click the Products link on the tutorial bar, Shopify doesn’t take you to the products page. Instead it pops up a little notification box that shows you where to click in order to add a new product.
Once you’ve done the action, the setup bar updates to show the completed action in green.
Clicking the second step then shows you how to change the design.
Once of the nice things about showing the location of the Theme Settings and making you click it, instead of directly going to the URL is that it teaches you where the setting is located on the Menu. Should you need to change the theme later on, you know where to find it in the UI.
Once you set up the theme, the setup bar updates and you can proceed to the next step. This process repeats through all he remaining steps of the setup.
Etsy’s onboarding process is very similar to Shopify. Like Shopify, there are three calls to action
- The good, ol’ setup bar
- The Next Action message
- A direct link to the next action, highlighted with an in-application tour box
Once you click the call to action, and you perform the action, the setup bar is updated.
Etsy uses a more subtle check mark to indicate completed steps. Clicking the next step, then takes you to the page to add items. Unlike Shopify, Etsy redirects to the destination page instead of pointing the navigation element in the UI.
Throughout the process, Etsy uses a number of tour boxes to show tips that might help you in the process. In this example, the tour box links to a video that shows you how to take quality photographs of the items you are selling.
The Setup Bar
The most interesting part of the onboarding processes for both Shopify and Etsy is the use of the setup bar in combination with in-application tours and messages.
- The setup bar gives the user an idea of which steps they have done, and how much is remaining
- Unlike a regular progress bar, the setup bar is not a passive display of progress. Clicking any step of the bar triggers a set of in-app popups that lead you through the completion of that step
- The setup bar also gives the user the freedom to perform the steps in any order. They can skip steps and come back to it later, and the bar will show them exactly where they in the whole process.
These three features make the setup bar a very useful onboarding pattern for guiding the user through products that require multiple steps to be performed right at the start.