Research, CRO, Testing
December 4–15, 2020
Figma, Miro, UserBit, Whimsical
Test the current onboarding flow to identify the most problematic parts
Present a concept on how to increase the number of free users with a finished website
Wireframes, flow charts, lo-fi screens
Disclaimer: To comply with a non-disclosure agreement, I have omitted or changed some confidential details and product screens in this case study. All information in this case study is my own and does not necessarily reflect the views of the company.
Focus on onboarding is critical.
No matter how good your product looks, it won’t be successful unless the onboarding experience captures your users' attention and immediately shows the value that you can provide.
Onboarding is a process that happens over time, instead of a single event
That's the same issue for the SaaS company in this case study.
They wanted to find out how to improve the onboarding flow and increase the number of their free users with a finished website.
I had a chance to help this great company during a recent project and now I will show you the exact process we went through together.
In this case study I will cover the following topics:
Let’s get started.
The business goals and requirements were the following:
So, after clarifying the goals and requirements above, I examined the current onboarding flow and came up with the following hypotheses.
However, since these were only my assumptions, I wanted to support my hypotheses with qualitative data.
First I mapped the onboarding user flow and then conducted usability tests with 5 users on the current onboarding.
My goal was to testing the functionality of the current onboarding flow to identify the most problematic parts of the onboarding.
If you want to learn more, you can dive into the full research data here:
After the tests, the following insights emerged.
New personalized templates based on typical user markets
Further personalization with multiple choices
I suggested that we might spend more time investigating what is the best way to customize a website in the builder because nearly all users struggled to perform this task.
It turned out that the users needed more professional and more customizable website templates. Some typical reactions to the current templates:
New layout options with real-time preview
New typography options with real-time preview
New color options with real-time preview
These were the main insights. But what could be the root of the problem? Let's look at this below.
Considering that most business problems are not neatly defined, let's state the problem first.
It's a fact that there's a fast-growing demand for simple, all-in-one website solutions for busy but non-techie small businesses, solopreneurs, and freelancers.
On the other hand, website builders are bound to become more accessible.
The TOSCA framework
To solve complex problems I suggest using the TOSCA framework to formulate a core question first.
Based on the above facts, I defined the core question as follows:
What actions can we take that would result in an X percent/week growth rate for users with finished websites, taking into account user needs, as well as financial, time, and technical constraints?
Based on my hypothesis, the solution is a complete redesign of the onboarding flow from the ground up.
I present the rationale for this through designing, testing, and iterating the flow concept.
I based all my decisions about the concept on data obtained from user research and usability testing.
My goal was to develop an onboarding flow concept that the company could later develop—as fast, efficient, and value-added as possible—into a thriving, full-featured solution.
A new starting point with generated and personalized templates
You should provide value first before asking for personal data
After having defined the problem and created a hypothesis for the solution, I sought answers to the following questions to build concepts for idea validation:
How might we redesign the current templates and create new pro templates for the users' typical markets so that they can customize to their needs?
During onboarding, how might we recommended pro templates based on audience (e.g. "Restaurants"), goals (e.g. "Promote a physical business"), layout (e.g. "Split screen"), typography (e.g. "Modern"), and color palette (e.g. "Monochromatic")?
In the website builder, how might we limit typography, layout, and color choices to keep the professional quality in design?
How might we show the block name (e.g. "Text", "Image", "Logo") in the website builder?
How might we make it possible for our users to add blocks next to other blocks and inside other blocks, not just below and above?
In the long term, how might we experiment with a 7- or 14-day trial model and abandon the free version?
A new welcome screen that provides useful tips to help new users
Contextual tips should help the user in the website builder
I suggested starting with the following ideas because of the potentially high impact, the easy implementation, and the strong evidence:
New contextual videos and a search feature in the website builder
The website builder with a new highlighted Save option
After testing a current onboarding flow, defining the problem, and generating product ideas, I created various user interface sketches and wireframes.
Each screen had to go through the usability heuristics, so I evaluated them one by one and fixed them if something was wrong.
At the end of each iteration, I performed rapid usability tests and implemented the next iteration insights.
Thus, the screens gradually changed in parallel with the tests.
The scenario was that one of our personas, a solopreneur, would create a website for their small business.
In the next section, I will show the validating process and the results.
I validated the concept with 3 users. It worked except for two issues.
This was the first issue I had to fix:
Users were not able to go back to the previous screen
I had to move the logo to the center and add a Back button
And this was the second issue I had to fix:
It's confusing to have two options to start playing the video
I removed the small link and changed the button copy
I fixed all of these problems and tested the concept again.
And when the process was completed by all users, I was ready to present the concept to the stakeholders.
The concept is under investigation by the client. As soon as I have any new details, I will update this case study.
Onboarding is a critical process. It's hard to do it right but the core idea is to create a flow that supports all sorts of new users from all sorts of situations.
What motivated me deeply during this project is that I was able to impact the experience of thousands of users for this product. If I could help these people just a little, it's all worth it.
Yes, it's a big responsibility, but I think the payoffs are well worth it.
* * *
Thank you for scrolling!
Let's build something great together