Country Flow Yoga
Squarespace Website Overhaul for a Yoga Studio
What they needed: a major website overhaul and redesign
Melissa came to me with a decade-old DIY Squarespace website still running on Squarespace 7.0 and ready for a major overhaul. She had been maintaining it herself since her studio opened ten years ago and she was ready to make it really work as both a tool for her business and a streamlined resource for her clients. Enter mindset: “Your website is your best employee” and I am absolutely here for it. 👏🏼👏🏼
Client: Country Flow Yoga | Industry: Wellness, Yoga
What we did: a full demolition and pro rebuild from the ground up
As a former yoga studio owner myself (I built my first Squarespace website for my old yoga studio in 2012!) I was super excited and uniquely positioned to support this project from all angles. This site needed a 7.1 upgrade and a major content restructure as well as a redesign. A good amount of content was already there, so we opted to duplicate her current site and keep the old one live while we worked on the redesign for a seamless big reveal.
Step 1: a Squarespace 7.1 Upgrade
Squarespace 7.0 certainly had its moment in the sun, but we have way better tools and technology now. I’ve said it before, but we can do about half as much on 7.0 and it’ll take us twice as long. 7.1 offers an easy drag-and-drop grid interface so you can just pull the edges of a block to adjust its size and position. A total dream compared to 7.0. No more annoying spacer blocks to nudge things into position!
There is an “automatic upgrade” button, but it’s kind of like moving house, the stuff gets inside, but you still have to go put things in the right rooms, unpack boxes, fix stuff that broke, replace stuff that doesn’t fit anymore, etc. It’s the same with your content with the upgrade button. It’s a great start but you’ll definitely need a human touch to make things look livable again.
Step 2: a major content restructure
The first order at hand was structure and organization, so we made some significant changes to site map and user flow to make the client journey intentional, strategic, and easy to navigate.
What does it mean to make a website more strategic?
I’ll do a longer deep dive on this case study, but the original site really lacked clarity or a clear user journey. It wasn’t always clear what each page offered, what you’d find on each page, and where the user should go. There were whole pages with no calls to action and pages with titles that didn’t quite match their content. For example, on the Classes page there was nowhere to purchase classes. The Start Here page took us to a Registration form, and the Registration page took us to Booking. A little confusing for someone trying to find their way around.
Don’t worry, we fixed it all up!
We rebuilt the site map, updated url naming structures and implemented 301 redirects to capture any traffic using the old urls, and then we drastically improved and clarified the user experience, the user flow / client journey, and made sure we had clarity and consistency with tons more calls to action.
Check out how we streamlined and clarified the header navigation area in this before and after:
Speaking of universal site structure, check out this footer glow-up!
One of the most common things I see on DIY sites is no footer (or footers that could do a lot more heavy lifting). As much as we love Squarespace, you do not have to advertise them in your footer. You’d be better off reiterating your main navigation links to direct your visitors further along through your website so your user doesn’t have to scroll back up the page to find your menu. This helps guide visitors along intentionally through your site and makes all their “next steps” easy. This is part of that strategic flow we’re always going for. Other helpful things that could go in your footer are often contact info and social links. We tend to put these at the bottom so people don’t immediately go clicking out of your website.
Step 3: a full website redesign
We’re talking strategy, gradient colors, custom fonts, image extraction, animations, custom code, and more. Once we had the structure nailed down we could really get creative with the styles.
Melissa’s Mandala
One fun element we incorporated into the website was the custom-painted mandala Melissa had commissioned on her studio wall. I grabbed a clear image of the room and extracted the mandala from the background to use as an icon throughout the site. We also shifted her color palette to better match the colors of the mandala and the interior of her studio.
Take a Video Tour of the Country Flow Yoga Website
Definitely take a gander at this one, you don’t want to miss all the animations!
Some Before and Afters
This is why we treat most redesigns as a full build from scratch.
Home Page Before and After
Contact Page Before and After
Purchase Page Before and After
Teacher Training Page Before and After
Customizations:
Movement, Animation, and Custom Code
Since this was going to be a BIG reveal coinciding with Country Flow Yoga’s 10th anniversary, we wanted huge wow factor.
Customizations CSS and some Squarekicker* magic:
Flat colors —> shimmery gradients
Static content —> dynamic scroll-based animations
Interactive hover effects and fixed scrolling image backgrounds
Animated custom icon created from a mural on her wall
Integrations:
booking with Mindbody, the industry standard for yoga studios
*that’s my Squarekicker affiliate link. Feel free to use it!
I may receive a small commission if you do.
But can they update it themselves?
You might be worried that with the 7.1 upgrade and so many customizations they’d be forever dependent upon me for expensive retainers for ongoing maintenance and updates. Although I’m always available to help, you’ll be relieved to know that Melissa’s been rolling her sleeves up and making her own updates since she launched a few months ago.
Some feedback from Melissa:
“Kessiah did an amazing job updating and re-designing our website! We are so happy with the finished product. Highly recommend!”
Big thanks, Melissa! This one was so much fun.
See the Country Flow Yoga website live in action
and if you’re in the area, stop by for a class!
Feeling Inspired?
Secondhand yoga can do that to you. I’d love to help you bring your vision to life!
Let’s start your project.
Your Squarespace Website Designer for Yoga Studios
Hey, I’m Kessiah, a Squarespace web designer for happy visionaries of all industries. As an official Squarespace-vetted Expert and Squarespace Circle Platinum Partner, I work with businesses and brands of all shapes and sizes, including startups, corporations, agencies, nonprofits, and solopreneurs to build Squarespace websites that convert. If you’d like to talk shop, you can email me at hello@kessiah.com, leave me a note here, or let’s hop on a call here to tell me all about what you have in mind. Let’s build the website of your dreams!
