Role

Research, CRO, Testing

Timeline

December 4–15, 2020

Tools

Figma, Miro, UserBit, Whimsical

Scope

Test the current onboarding flow to identify the most problematic parts

Goal

Present a concept on how to increase the number of free users with a finished website

Platform

Desktop, web

Deliverables

Wireframes, flow charts, lo-fi screens

How to Optimize an Onboarding Flow

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.

Introduction

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.

Also, if your user onboarding experience fails to activate and retain enough users, your product will never grow.

  • You need to illustrate why the product is a good thing for the user, how they can make the most of it, and help them get the ball rolling.
  • You want to leave users feeling like they have known your product for a while, and they can start building up a habit of using your design in their everyday lives.
onboarding-01

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.

  • The product is an all-in-one solution, designed to enable solopreneurs and small businesses to build websites without any web design skills.
  • However, from 100 new promising prospects, only 5 of them are creating a user account.
  • And from these 5 created accounts only 3 users end up with a finished website in the core product (as free users).

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:

  1. Testing the current onboarding flow (Empathize)
  2. Defining the problem (Define)
  3. Brainstorming ideas (Ideate)
  4. Creating a concept (Prototype)
  5. Validating the concept and iterate (Test)

Let’s get started.

1. Testing the Current Onboarding Flow (Empathize)

The business goals and requirements were the following:

  • Promote user activation and user retention.
  • Improve the UX of the onboarding flow.
  • Improve conversion rates (e.g. increase the number of their free users with a finished website).
  • Integrate the AI-based website and logo builder into a complete SaaS product, which is created specifically for solopreneurs and small businesses.

So, after clarifying the goals and requirements above, I examined the current onboarding flow and came up with the following hypotheses.

Hypotheses

  • The user gets stuck in the flow between registering an account and publishing the website.
  • The onboarding flow might be optimized but the key to retention is a great product.
  • Users are busy people and typically are not tech-oriented. They want professional-looking websites for their business.
  • Since they are not design experts or coders, they are not able to create professional-looking websites with the website builder, if they can customize everything.
  • If the result is not a professional-looking website as soon as possible, they will abandon the product. No published websites, no upgrades.

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.

user-journey-01

Onboarding user flow

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.

Value Proposition

  • The unique value proposition doesn't reflect the all-in-one offering (website, online store, domain, logo, SEO, etc) right above the fold.
  • It is not clear immediately what the product is about and how to use its main features.

Onboarding

  • People don’t read long explanation texts.
  • You have to answer the same questions in the website builder and logo creator twice.
  • Domain and SEO upsell is irritating.
  • The topic selection doesn't cover more relevant options.
  • It's not clear which option should be selected at the purpose refinement.
  • The result is weird at the Facebook Page connection and business listing section.
  • The “Who are you creating a website for?” screen is confusing because you can think that this question is about the website owner instead of your business target audience.
  • It's not clear what you should do if you want a website AND an online store AND a blog.
  • It's not clear why there is an option (Sell online) in the goals section if earlier you selected explicitly that you need a website instead of an online store.
  • The function of the “Surprise Me” button is a mystery.
  • There are too many questions to be answered in the onboarding flow.
  • It's frustrating that a separate Continue button should be clicked instead of a single click on a selected choice.
  • It’s not always clear where you are in the onboarding flow.
  • Sometimes the search function returns weird results.
  • In the search field, the cursor loses focus when entering letters with the keyboard.
whats-your-site-about-01

New personalized templates based on typical user markets

what-are-your-goals-01

Further personalization with multiple choices

Website Builder

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.

  • A proper Save, Undo, and Delete feature doesn't exist in the builder.
  • Image logo and text logo appear at the same time as default.
  • Colors are not changed consistently (e.g. headlines and buttons changed, header and navbar not changed).
  • Due to the large margin, the header seems to be separated and it confuses the users.
  • It’s not always clear what is edited in the builder.
  • The function of the Animations feature is not clear.
  • It's not possible to place elements/blocks next to each other, only above and below.
  • It’s not clear how to add a single button.
  • The search feature is missing from the Image Library.

Templates

It turned out that the users needed more professional and more customizable website templates. Some typical reactions to the current templates:

  • “Too boring”
  • “Not bad, but stock feeling”
  • “More templates in other website builders”
  • “Some elements can be deleted, some elements cannot be deleted”
  • “Layout looks messy”
  • “Is this the natural style?”
  • “The text is too small and difficult to read”
  • “I don’t like the font”
  • “Too dark and black”
  • “The contrast is too large”)

Logo Creator

  • The logo download page is a dead-end with no navigation back.
  • It's not clear which logo size and format should be uploaded to the website builder.
  • The logo starting point is randomized and useless.
  • The function of the Logo + Website button is not clear.
  • The logo creator is not smart enough to know that the user already has a website.
  • The Logo Creator button is missing from the Dashboard.
  • The “Upload Logo” feature is missing from the design section in the builder.
  • If you create a logo first, then this logo disappears after you create an account.
  • The logo creator steps are not emphasized visually, and you can create an unfinished logo by clicking on the Preview and Download button prematurely.
choose-a-layout

New layout options with real-time preview

choose-a-style

New typography options with real-time preview

choose-your-colors

New color options with real-time preview

Assistant

  • It's not clear which are the indicated three steps in the Assistant.
  • The content looks messy.
  • The Assistant is too intrusive but if you close it automatically, you cannot find it again later.

Dashboard

  • It's not clear why there are two buttons for creating a new website.
  • The name of the free package (Play) is confusing in the dashboard.

General

  • The Back button is missing from several screens (e.g. Wizard start, Logo Creator).
  • There are no status indicators when a screen is loading.
  • It's frustrating that the user session is terminated without any previous notification.

These were the main insights. But what could be the root of the problem? Let's look at this below.

2. Defining the Problem (Define)

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.

tosca-01

The TOSCA framework

To solve complex problems I suggest using the TOSCA framework to formulate a core question first.

Problem Statement Checklist

  1. Trouble: Only 3 out of 5 registered users (100 prospects in total) end up with a finished website; fast-growing demand for a simple, all-in-one website solution for the busy but non-techie small businesses and solopreneurs; the emergence of website builders in the market
  2. Owner: Management of the company
  3. Success Criteria: X percent growth rate for finished website users in a week
  4. Constraints: Duration and sample size for A/B testing, development and operational resources, user adoption rate for new and features, profitability
  5. Actors: Growth team, designers, engineering, users, management

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.

07.-Pick-a-Starting-point-v2-1

A new starting point with generated and personalized templates

sign-up

You should provide value first before asking for personal data

3. Brainstorming Ideas (Ideate)

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:

  • Where do the website visitors come from? How much time do visitors spend on the landing page? If it's a low number, does it indicate that there might be an inconsistency between the ad and the landing page?
  • Who are our user persona and target audience? How might we improve the value proposition based on that data?
  • If our users hate tech or busy enough as small businesses, how might we offer simpler, more elegant, and more professional templates?
  • If our users are expert designers or coders how might we provide more customization so that builder is not limited in features?
  • How might we use an email sequence to educate our new users (especially inactive users) about the website builder and professional-looking websites? Competitors already use this method to increase the adoption and use of core product features.
  • How might we provide as much value as possible?
  • Do registered users get stuck in designing their sites? How might we provide a network of experts who can help them build a professional website?
  • Do we have an affiliate program? How might we allow users with a finished website to earn commission on sales referred to us using specially tracked links?
  • 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?

09.-Website-Builder-Welcome-v2

A new welcome screen that provides useful tips to help new users

start-editing-02

Contextual tips should help the user in the website builder

Low-hanging fruits

I suggested starting with the following ideas because of the potentially high impact, the easy implementation, and the strong evidence:

  • Fix the unclear value proposition above the fold.
  • Present real-time previews at the right-hand side of the onboarding wizard when selecting styles and colors.
  • Present a welcome screen and/or contextual tips with triggers (e.g. mouse click) and custom events (e.g. show a tooltip) in the website builder.
  • Show a checklist with the basics in the dashboard.
  • Improve UI copy to avoid technical jargon (e.g. resizable SVG, SEO, hi-res files, block editor).
  • Improve CTA buttons to avoid confusion (e.g. "Logo + Website").
  • Avoid redirecting to a dead-end when clicking "Create a logo" in the website builder.
  • Create more professional-looking templates for typical business requirements.
  • Avoid asking the same questions twice in the website builder and the logo creator.
  • Implement a Save, Undo, and Delete feature everywhere.
editor-assistant

New contextual videos and a search feature in the website builder

editor-save-button

The website builder with a new highlighted Save option

4. Creating a Concept (Prototype)

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.

  1. First, they register a user account on the site.
  2. They create and customize their first site and logo with the website builder and the logo creator.
  3. They finish and save their website after having completed the tasks suggested by the Assistant.

In the next section, I will show the validating process and the results.

5. Validate the Concept and Iterate (Test)

I validated the concept with 3 users. It worked except for two issues.

This was the first issue I had to fix:

07.-Pick-a-Starting-point-v1-1

Users were not able to go back to the previous screen

07.-Pick-a-Starting-point-v2-1

I had to move the logo to the center and add a Back button

And this was the second issue I had to fix:

09.-Website-Builder-Welcome-v1

It's confusing to have two options to start playing the video

09.-Website-Builder-Welcome-v2

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.

Summary

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!

Want to Optimize your Onboarding Flow?

Let's build something great together