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:
Create a more consistent blog layout with value-centric CTA's for our lead magnets
Distill the sitemap to our key pages and simplify our nav menu options
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 :)
