Squarespace 7.1 Redesign Case Study: +75% form submissions, +22% session length

I am a long-time Squarespace builder and digital creator.

This year I've seen lots of people exploring the merits/limits of Squarespace 7.1, their newly revamped WYSIWIG builder.

Today I'm sharing a website overhaul case study that might be useful to some of you as you consider whether to make the swap. As a quick aside, I've already built 5 or 6 sites on Squarespace 7.1  during the quarantine so I'm pretty familiar with the new platform's  pros and cons. I've also built around 30 sites on Squarespace 7. Feel free to AMA via email -> shep@hellobeaumonde.com.

First: a little bit of the big picture.

I'm currently the Creative Director at TomiLlama.com, a digital-first  self-help project my family launched in 2017. We are a top Google result  for tons of keywords related to personal growth.

When we first launched our brand and website on Squarespace, we didn't know  what we were doing. Over time, we developed a strong understanding of  the search intent behind new visits to our site.

Once  we started to align our blogging strategy with that intent, our site  took off. The last 18 months have been a rocketship of organic growth  via search, and in 2020 we've already had 45,000+ unique visitors and  about ~950 new email signups in the last 30 days...

With this deeper knowledge of the intent behind our visits, (and knowing   that we're planning our first e-course launch for July) I figured it was   time to revamp our CSS-laden TomiLlama.com from Squarespace 7 (Rally template) and make some crucial improvements.

While  building the previous website in 2018, I only had a basic understanding  of UI/UX principles and SEO/CRO best practices. Over time the site got a  little better with tweaks here and there, but eventually, it had become  a CSS Frankensite.

I had to be  painfully careful with my styling changes because I might randomly break  something on a page without realizing for days or weeks.

Still,  by matching our site's content to customer intent we were able to  overcome a mediocre site layout and deliver clear value to visitors,   reaching email signup rates of 5-8% on our top blog posts.

My hypothesis for rebooting the site was that if we tackled the following  objectives, we would see a lift in our website KPIs of time on page,  pages per session, and email signups:

1. Create a more consistent blog layout with value-centric CTA's for our lead magnets
2. Distill the sitemap to our key pages and simplify our nav menu options
3. Improve our internal link structure to connect the dots for visitors (and search engine crawlers) on our related blog topics

As   I got started planning the new site, the decision became one of  building out a new version of the old site on Rally again, but scrubbing  much of our clunky custom CSS, useless meta tags, weak image captions,   etc...

OR

Tackling  the reboot on a fresh Squarespace 7.1 template and simply leaning into  the new aesthetic + builder functionality, troubleshooting along the  way, and trusting in the process.

I ultimately decided Squarespace 7.1 was the way to go, and here is some of my reasoning.

With our 7.0 site,   we couldn't incorporate our design system into the website aesthetic  very easily... we basically had to choose between one or two colors at  all times because by default you either have your background color or   you have an alternate color that is overlaid on whatever background   image you've uploaded. The 7.0 Squarespace builder isn't very versatile   for someone who wants to build a website with a variety of   customizations without getting into the use of CSS/Javascript.

With 7.1, you can get more granular control over your site design before you need to use CSS.   More specifically – with the Color option added to the new Design page   layout, we were able to create section layouts with very specific  design  customizations.

For example, we don't use our alternate color of dark purple on our default palette very frequently... or ever actually.

So I took that specific Color option and fully customized it with a  unique newsletter block layout, image block layouts, a different color  background, etc.

Basically with   7.1, you can make independent customizations for different elements in   each color palette. That's up to 10 on-call page design themes you can   potentially work with while building a site, or even a single page!   Sure, Squarespace defaults these palettes to automatically match the   colors you've selected... but you can absolutely break that mold and   repurpose the palette system for your own creative benefit. I used the   specific customized section I mentioned for our lead magnets so site   visitors who hit multiple pages get a consistent experience.

An interesting twist: I opted to manually build our blogs out as pages, instead of using the actual Blog page layout provided by Squarespace and a /blog URL slug:

This may seem  like a strange thing to people unfamiliar with Squarespace, but working  within the limitations that are baked into the Squarespace platform  often becomes a constraint you need to creatively address. For example,  blogging on Squarespace generally requires you to use a page type  called... "Blog". However, the Blog page format is not very versatile in  terms of page design.

So there are two reasons for me choosing to build my own blog page layout with breadcrumb navigation.

The first is that the new index page builder in Squarespace 7.1 is extremely powerful.   It's highly customizable (see previous explanation of using various   color palette themes on the same page) and I feel empowered to make a   beautiful layout when I look at it. Drawing inspiration from Brian   Dean's site Backlinko, I made sure our blogs each had clear section   titles with anchor links as well as alternating color backgrounds in the   body text of our content.

The   hypothesis here is that the visual separation of information makes it   easier for readers to chunk and consume. It's extremely clear as you   scroll down one of our blogs that there is a finite number of sections   that are smartly labeled, and the general impression for new visitors is   that the info is well-organized and easy-to-access. This is something   that would be a massive pain in the ass to do on Squarespace's default   blog page layout. The caveat here is that now I need to set up Disqus   for each blog page if I want to regain the use of a comments section on   our blogs. Still troubleshooting this piece.

The   second is that in terms of page weight for SEO, Squarespace weighs  home  pages at 1.0, standard pages at .75, and blog posts at .5.  By manually  creating my own blog page structure with breadcrumb  navigation, our  best content will now be weighted more heavily in the  eyes of search  engines (at .75 instead of .5). I'm not entirely sure  about the science  behind this, but I couldn't find anything telling me  NOT to do this and  as far as sitemaps go I could see that high-ranking  sites like backlinko.com and jamesclear.com   don't have /blog in their URL slugs either. I'm no supreme SEO god, so   don't take this as a divine mandate. Again, it's just personal   experience and good research leading me to this decision.

Overall, the new site is blowing the old one away on all of our KPIs.

For us the swap has been absolutely worth it, bugs included.

Breakdown of my goals, the post-launch results, and my checklist for getting there.

Goal 1: Improve our rate of email signups with better blog layouts & clear CTAs for our lead magnets

Goal 2: Keep people on our site longer with more intuitive and aesthetically pleasing user experience

Goal 3: Simplify our design & content management system

Goal 4: Make it visually clear that Tomi Llama is a world-class digital brand in the self-help industry

Results after launching:

• +75% increase in form submissions on TomiLlama.com from 307/week before to 537/week after.

  • This metric is measured in Squarespace's analytics and it's very useful from a CRO perspective. It tells us what specific forms were submitted, which page they are on, as well as the # of unique views, submissions, and the conversion rate for each form. Some of our forms are now converting at >18%! 😮

• +37% increase in actual Mailchimp subscribers from 210/week to 288/week.

  • The big disparity between form submissions / new subscribers is due to Tomi Llama superusers who sign up for multiple lead magnets during a site visit. Our new site is more intuitive to explore, and we define each lead magnet's value in a prominent location on-page.

• +22% average session duration

  • Most of our essential pages now average over 1min per session. We restructured the information on each blog post to follow a similar system that lets readers go as deep as they want on a topic. Simpler content at the top, deeper stuff towards the bottom.

• +18% overall page view

  • Users are finding it easier to explore more of our site since our internal linking structure dramatically improved with our blog revamps

My checklist for reaching this goal:

• Review   our highest converting forms to see what insights I could gain about   alignment between the content and the perceived value of a lead magnet
• Review   actual anonymous user visits to the site using Lucky Orange, an   analytics tool. I was able to see heatmaps of user interactions on our   pages to learn what was being clicked and what was being ignored, how   far down a page the average user was scrolling, as well as understand   how new users were exploring the site. From there, I tried to condense   all the best parts into the higher visibility parts of the blog.   Basically, if only 25% of people were actually scrolling down to   discover the lead magnet, we were functionally losing 75% of visitors   who didn't even know there was more value for them to receive. We now   have lead magnet forms in the first 10% of the scroll on all posts.
• Study   some of the best SEO-oriented websites on the internet to understand   how they structure their content to look good and also hit their on-page   SEO keywords. I heavily dug into Brian Dean's site, Backlinko.com, for   inspiration. You'll notice our blog layout is adapted from Brian's   fantastic definitive guides, down to the alternating background   sections.
• Map   our entire site's SEO plan using Airtable. This way I could see that  we  were hitting all the appropriate keywords for H1/H2 and body text.
• Use   Ahrefs to scour the top pieces of content for our best keywords and   effectively incorporate the best of the best into our own materials.   This tool also gives you an idea of how easy it can be to create a   definitive piece of content that's better than what else is out there.   Without Ahrefs, I would still have this looming sense that I'm missing   something or that someone else is going to outpace us with better   content. Ahrefs Content Explorer let me easily review hundreds of blog   posts across our niche, and ultimately I came away feeling really good   about the quality of our own content.
• Use   Ahrefs again to audit our site once it was live to find any broken   links I may have missed. I ended up finding 4 broken links, 4 incorrect   redirects, and a handful of anchor links that needed a little update.   This was the final house-keeping piece of the site launch for me.

My findings from the research and review stage:

The   old site ultimately wasn't very intuitive to navigate – our nav menu   included slugs like "Llama Store" and "Meet Tomi" that were unfamiliar   and thus not compelling to new visitors. Additionally, there were so   many different things in the overall UI of the site and our blog posts   that NO ONE was clicking. I'm talking ZERO people clicking a button,   link, image, product, etc., out of thousands of visits. So I decided we   would streamline and build out the new site around what was working the   best for us – our top six blogs / lead magnets.

Rather   than peppering forms throughout our blogs willy-nilly and hoping   someone might sign up, we restructured our blogs to follow a 3-step   informative process that is logical for someone who is first exploring a   topic and also useful for someone who is returning to explore again.  We  added anchor links and clear section titles to all content. And we   added a lead magnet signup at the top of each blog, and again around the   30-50% mark of a blog.

With this   new structure, each section has a clear explanation of the value to  the  reader that also ties back to our lead magnets.

The   results have blown me away. Before our new site was live, we saw   between 250-300 form submissions per week as measured via Squarespace's   Form Analytics. At the end of the rainbow, this was resulting in  roughly  180-200 new subscribers being added to our Mailchimp list  weekly. The  true tally of new subscribers has never aligned with our  actual forms  submitted tally on Squarespace, due to users signing up  for multiple  lead magnets during one visit. I won't say there's any  sort of maxim you  can extrapolate from this for your own venture – it's  just what I've  learned to expect from the Tomi Llama audience.

With   the new site live, our first week of submissions totaled 537 form subs   on Squarespace and 288 new subscribers in Mailchimp. Compared to the   week before our site launch which had 307 form subs on Squarespace and   about 210 new subs in Mailchimp. Some quick maths here to get the   increase in conversion rates:

Our increase in on-site form submissions is ~75% (537/307=1.749)

Our increase in new subscribers is ~37% (288/210=1.371)

This   wasn't a fluke by any means. We planned out our digital overhaul and   executed it with zero hiccups. Even flipping our old site over to our   new site had less than 1 hour of downtime, meaning we lost minimal   subscribers during that down hour on our site. Once the site was fully   live, I made sure to submit the new sitemap to Google Search Console and   do a site audit with Ahrefs.

Here's what I attribute these improvements to:

• Significantly better UI/UX
• A deeper understanding of our customer journey.   The goal for us at this point is to give people amazing free content,   offer them a supplementary resource that improves their experience with   the free content in some way, and add them to our email list. We're   launching a premium e-course next quarter that is built specifically for   our 5k+ subscribers.
• High level of clarity for site visitors as to what the value we are offering them is… breaking it down with smart copy and clear value propositions with our lead magnets
• Better creative.   I've been working with an illustrator/watercolorist in Atlanta for the   past few years to create Tomi's signature Studio Ghibli-esque  aesthetic.  On this project, everything finally came together. I had  lots of great  resources like hi-res watercolor paintings, vector  graphics of our llama  characters, and many digital mockups of our  physical goods like books,  values cards, and worksheets.
• And yes, building on Squarespace 7.1!   I love the new Squarespace builder. I've already built 5-6 sites using   it and it makes it much easier to maintain a consistent brand  aesthetic  across many different web pages. I used the new Color palette  feature to  create a series of customized page layouts that my other  team members  can easily replicate as our site continues to grow and  expand with new  content. I think ultimately 7.1 represents a leap  forward in terms of  using Squarespace to underpin the design systems of  a business. 7.1  makes establishing that system a much easier process  than before. Just  be sure you take notes while you design so other's  can replicate the  work.

Bugs I observed during the project:

• For some reason our billing is buggy and won't update to recognize a new credit card. I've contacted support.
• During   the site swap, the first time I submitted the sitemap to Google I got   an error. I assume this was because there was a hiccup in our /sitemap.xml link from Squarespace as the site got flipped over. I waited 6 hours and resubmitted successfully.
• For   some reason about 0.5% of form submissions return a "form submission   error" even though we've double-checked all our form connections to   Mailchimp/Zapier. I usually add these folks manually and send them their   lead magnet personally.
• The   analytics page isn't showing Mailchimp referrals very effectively...  if  100 people click a link via email and arrive on the site, the unique   Mailchimp click ID only registers a couple of visitors in the referral   section of our analytics.

Hopefully this breakdown of our site revamp is helpful to you as you consider whether to make something on Squarespace 7.1.

Cheers :)