BaseKit Onboarding
Designing an onboarding flow for the BaseKit website builder.
Project Overview
Basekit is a white-label website builder, e-commerce, and booking software used by millions of small businesses in over 40 countries. The previous onboarding flow had an outdated user interface and experienced low user retention rates.
The goal of this project was to design a new onboarding flow that prioritizes the user experience, with the aim of improving the onboarding retention rate.
Role
Lead Product Designer | BaseKit
User Research, Interaction, Visual design, Prototyping & testing
Project Outcome
This new onboarding flow was showcased to our partners at CloudFest in Germany, where it was well-received, added to the roadmap, and released in 2024, being widely considered a success. As a result of this project, our onboarding completion went from 78% to 93.9%.
Improved theme picker included in the new onboarding flow.
Design Process
We utilized the User Centered Design process to assess user reactions to the existing onboarding flow. Guided by user research, we brainstormed and designed various solutions, which we then tested through usability tests. Our findings led to the development of a high-fidelity interactive prototype.
Research
Synthesis
Evaluation
Research
Ideate &
Design
Final Design
Competitive Analysis
To start the research process, we analysed the onboarding flows of 25 competitors in the website builder industry. These included some of the larger website builders such as Wix and Squarespace, as well as our direct white-label competitors such as Duda.
We learned that:
-
Successful site builders stand out in a competitive market by offering high-quality content sets for their templates, complemented by striking professional photography.
-
Numerous site builders are adding AI to their onboarding experiences; however, much of it appears to be superficial and has minimal effect on the end result. It appears to be simply enhancing the overall premium perception of their products.
-
The market is shifting from longer onboarding processes aimed at creating more customised sites to shorter, more inspiring flows that enable users to start building websites quickly.
Event Data Analysis
To assist us with this project, we integrated event tracking into our current onboarding process, enabling us to collect crucial data for informed decision-making. Upon analyzing the data, we uncovered several significant insights:
-
50% of users will choose 1 of just 20 business categories.
-
20% of business category searches don't yield a match.
-
Only 33% of users entered a business name.
-
31% of users went backwards in the flow to change their selected theme.
-
The template selection screen has the highest drop-off rate of 15%
Useability Interviews
We conducted useability interviews of the existing onboarding flow to gather qualitative data about how we could improve the onboarding flow. In total, we conducted interviews with 12 applicants.
a. Users were often unable to discover
the skip button for each page.
b. Users were confused about what impact selecting a business category would have.
Do I have to select a theme? At this point, I have not yet decided. I would much rather start adding products to my website and decide this later.
- A user that ran a business selling crystals
It's asking me what type of website I want, but 'yoga website' is not here. I don't really know why this matters.
- A user that ran a yoga class at their local village hall.
Design Requirements
We analyzed our collected data to establish the design requirements for our new flow. This approach allowed us to consistently refer back to our findings, ensuring they guided our decisions throughout the ideation process.
Inspire the user
Our competitor analysis highlighted this clearly. We want users to complete our onboarding process and engage with our product. One of the best ways to retain them is by keeping them engaged and inspired with great content.
Move forwards, not backwards
We want to keep the option for users to go back a step in the process, but our goal is to minimize the need for them to do so. Currently, several actions that directly affect one another are spread across multiple screens, which leads to users frequently navigating back and forth to achieve their intended outcomes.
Actions have consequences
Usability studies revealed that users wanted immediate feedback regarding the impact of their choices on their websites. Therefore it is essential to demonstrate this feedback during onboarding.
User's should not have to onboard
Many users are either skipping or attempting to skip the onboarding process. If users wish to do this, we should make it as easy as possible for them. Currently, the skip buttons are not easily discoverable, and there is no option for users to skip the entire onboarding flow.
Make it short
Our updated flow should be shorter and less burdensome for our users compared to the current flow. The current flow has too many steps, and we want to keep it concise to sustain user engagement.
Make Business Categories
easy.
We found that most of our users utilize the same 20 business categories. We should prioritize these categories and make it extremely easy for users to select them quickly.
Ideation
We brainstormed the possible user experience for the new onboarding flow using quick, low-fidelity drawings. We created multiple versions of the user flow, discussed them, and decided to run another usability test on the prototypes.
Concept 1
Concept 2
Concept 3
Prototype Useability Test
We conducted usability tests on the new concept flows with six users, testing two users for each flow. We chose this approach to prevent any user from applying knowledge gained from their experience with the first flow to their test of the second flow.
Our goals for the test were to:
-
Test the useability of the new flow.
-
Understand if users understood the decisions we were asking them to make, and what impact it would have on their site.
-
Test the effectiveness of the new component suggesting popular business types to the user.
Conducting a remote usability study
Key Findings:
- In concept 2, we experimented with categorising templates by mood. However, users preferred to see all templates at once without needing to drill down, and they did not find much value in this concept.
- Users generally responded better when they had the ability to change their theme while viewing the site preview, similar to concept 1. However, the close proximity of the button to revert to the template style and the tab above led to some confusion.
- Users appreciated the ability to choose the content set for their site images, but the discoverability of this feature was greater in Concept 1 compared to Concept 2.
- Users responded positively to the top business category pills. This not only helped them find a content set without searching but also provided users with ideas on what to search for in the accompanying search field.
Moving to a High-Fidelity Prototype
I used findings from our prototype usability tests to create a high-fidelity Figma prototype based on Concept 1, incorporating the most well-received elements from the other concepts.
Working with the Dev team
As part of my design process at BaseKit, I find it helpful to collaborate with the development team and project stakeholders toward the end of a project. This collaboration allows us to assess whether our deliverables are technically feasible within our codebase and to identify any areas where the technical effort required may outweigh the benefits for the final product. This approach not only helps us stay on track with our overall roadmap timelines but also provides the involved developers with a sense of ownership in the project, leading to a smoother transition during the development handover.
Resulting Iterations
It was decided that the second screen of the onboarding flow could be developed to also function as the site builder's theme editor. This approach offered multiple benefits, including providing users with familiarity with the theme editor, which they would likely use frequently while working within the product. Additionally, this decision allowed us to incorporate a major feature into the site builder with minimal extra effort.
To achieve this, we had to make some minor adjustments to this screen's design:
Removal of theme categories
Supporting theme categories was no longer technically feasible, so these had to be displayed as a single list.
Before
After
Mobile Design
We have a separate onboarding flow for mobile users, so the design screen is now dual-purpose, which means we need a design for the mobile breakpoint.
Splitting Colours & Fonts
To provide users with more design freedom for their site, we decided to separate the options for colour and font selection. This allows users to utilize a preset font pairing while using custom colours and vice versa.
Before
After
Project Outcomes
This design was ultimately showcased to our partners at CloudFest in Germany, where it was well-received, added to the roadmap, and released in 2024, being widely considered a success.
As a result of this project, our onboarding completion went from 78% to 93.9%.
Reflections:
-
Although we did not observe an improvement in the user experience with the integration of AI into the onboarding process of other site builders, we did underestimate the marketing value that the inclusion of AI would bring. We are currently designing an additional AI version of this process for partners who are interested, with the goal of delivering it as part of the 2025 roadmap.
-
One area that could have benefited from more attention is the addition of theatrical elements to enhance the overall experience and create a more premium feel. While the user experience we offer is strong, we could have made the onboarding process more exciting and engaging for users, making them feel like they are on a captivating journey.
Next Case Study
Shipped