Squarespace Onboarding
In Q4 2017, the conversions team formed to tackle some of the most complex problems facing new customer acquisition. I joined this team for the first year and a half, giving design direction for the company’s first linear onboarding experience.
Role
Design Lead
Responsibilities
UX, UI, Visual Design
Date
Spring 2019
Delivering a build-your-own template experience
The objective of linear onboarding was to increase the number of paying customers on Squarespace. This was accomplished by giving users a starting point that felt customized and easy to start with.
Step 1
Choosing a Starting Point
After clicking on Get Started from the frontsite, users are given a choice to start by answering a few questions or browsing templates. Choosing ‘Start by answering a few questions’ will take users through linear onboarding, and choosing ‘Start by browsing templates’ will take users to the template store.
Step 2
Defining the purpose of
the website
Before getting started with linear onboarding, users are prompted to input their site intent. From the site intent, we used machine learning to either recommend a template, or send them down the linear onboarding path to create a custom website template.
Step 3
Path 1: Starting with a Recommendation
Here is a view of the satellite template store, which surfaces when a user enters a keyword or keywords that match the categories that Squarespace serves very well through staged content in templates.
Step 4
Path 2: Choose a Homepage Layout
The first step in the linear onboarding flow is selecting a homepage layout. Users were given 4 choices for the MVP launch: stacked layout, gridded layout, text-only layout, and full-bleed layout.
Step 5
Choose a Font
The second step in the linear onboarding flow is selecting fonts for the website. Users were given 4 choices for the MVP launch: modern, classic, bold, and clean. These fonts were representative of a majority of fonts used in the staged content in the template store..
Step 6
Choose Add-On Pages
The third step in the linear onboarding flow is selecting a add-on pages for the website. Users were given 18 choices for the MVP launch, which were representative of a majority of pages users might need when creating their first website.
Step 7
Start a Trial
The last step in the linear onboarding flow is the preview and start editing page. From here, a user can view their entire website by clicking ‘preview website’ or create an account by clicking ‘start editing’.
Beyond the Template Store
Building a Supervariant
Supervariant is the term used to describe the template that would house every page type, every collection, and every type of homepage that would be used in Website Builder. Pages would be turned on or off based on user selections.
Credits
Hayley Muth - Product Manager Chris Ramirez - Design Lead Adriaan Balt - Engineering Lead Nick Ellsworth - Creative Developer Steve Rubinstein - Software Engineer Tom Duggan - Software Engineer
Stakeholders
Anthony Casalena - CEO Andrew Bartholomew - VP, Strategy Laura Dobrzynski-Gessner - Group Product Manager Andre Ribeiro, Tom Sears - Design Managers Nessim Higson - Creative Director