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 website design 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 a ton of changes to make the site intentional and strategic.
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 Register, 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:
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 using Squarekicker and custom CSS:
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
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!
