Clixflow: An Onboarding Flow
-
ClixFlow is a no-code website builder that allows users to use drag-and-drop features to easily create their own website.
As the UX Writer for this project, my role was to design an onboarding flow (post sign-up) that would ask users a short series of questions to better understand their website-building needs and goals.
-
After signing up, the user would be ready to start creating their first site.
To help them get started, Clixflow wanted to present users with a quick form that would help customize the user’s experience and help them build the type of site they would benefit from most.
The information needed from this form was the following:
Who they are and what their site would be used for
Their experience level in building websites
What type of site it would be (portfolio, e-commerce, blog etc.)
Their role in the business/brand
-
Before designing the flow, I briefly explored similar sites like Wix and Squarespace to see their approach to getting user started in building their websites.
From this research, I knew my flow needed to be conversational, concise, and avoid information overload (as I experienced with Wix).
My design would also include more white space and a color scheme that would be easy on the eyes.
Design
Rationale ^
Clixflow: Ready to get started?
User: “Yes, how do I do it?”
Clixflow: “Tell us why you’re building a website”
User: “Why?”
Clixflow: “So we can provide you with a CUSTOM experience!”
User: Heck yes! Let’s “Get Started”
Conversational, concise, helpful, and excites the user as they start building.
Rationale ^
I added progress tracking at the top so the user knows where they are and what to expect next. It’s safe to assume 4 questions won’t take long to complete, encouraging the user to complete the form.
When a user clicks on the option they want, the light blue will change to dark and the bubble will be filled. They will automatically be taken to the next screen but will have the option to come back to this page if they selected the wrong option by accident.
Rationale ^
At first, these answer options were longer. For example, the first option read, “No experience, I’m a beginner”.
After reading it a few times, I cut the “No experience” part. To me, shorter and more direct answers felt more human.
The remaining answers evolved like this:
“Moderate, I have some experience.” —> “I have some experience”
“Very experienced, I’m an expert” —> “I’m an expert”
Rationale ^
I bolded “Select all that apply” so users would know they could select more than one answer for this one. Once they selected all relevant answers, they could move to the next question by clicking the “Next” button.
The user’s eye would flow through these answers from top-down, left to right, and the “Next” button would meet them right where they are after checking all the relevant answers.
Rationale ^
Again, I bolded “Select all that apply” so users know they can select multiple answers.
Originally, the CTA button said, “Start building my website”, but I shortened it for emphasis.
Conclusion
Since this task was for a class project, I wasn’t able to test with real users. Given the opportunity to test, I would A/B test different versions of copy on these screens to gain insights on click-through rates, and if different copy choices would be more successful.
I feel users of all experience levels would get through this form easily and quickly.