Ep. 13: Blueprint for a Modern, Easy-to-Navigate Fitness Website

I talk to fitness studio owners daily about their web presence and through all the vision boards, feedback calls and rounds of revisions, it boils down to this. Everyone wants the same thing: a website that is modern and easy to navigate. In this episode we’ll break down those 2 things with a look at what your boutique fitness studio website needs to be doing right now.

If you’re a fitness studio owner, chances are you want to make sure your website looks modern. No one wants a dated looking website— it makes people question your relevance.

What actually makes a website modern? 

This question IS closely related to the actual year your website was built, but not entirely. I’ve seen older websites that have aged well and newer ones that don’t look very modern at all.  

Here are the top 5 things that in my opinion signal a website is up with the times:

  1. Mobile responsive - this means that your site looks and works well on a variety of device sizes.  this is hardly new but it still gets many website owners, especially when you’ve added things on over the years and haven’t paid attention to how everything is looking on a mobile device. If your site doesn’t adapt to different screen sizes, or if things overlap unintentionally or are illegible on mobile devices  it’s not a good look for your studio.

  2. Big beautiful imagery. Full width images or video backgrounds have been very popular for years - to the point of being I’d say the single biggest indicator that a site is built on an old template  if there are no full width images. So avoid that boxed in look that was the only option years ago and get some full width content blocks on your site. While we’re on the topic of images, you want to avoid stock photos or obviously old photos (as in.. you need to replace those photos with people wearing masks assuming you don’t still require masks in studio) 

  3. Large font sizes is another design trend that has evolved over the last 5 or so years. If your website has big paragraphs of text and a tiny text size, it’s likely to look old. Instead, modern sites have good size contrast between headlines and paragraphs, making the page easy to skim and the overall size of text on everything is larger than it used to be. This does depend on the font itself but as a baseline, the normal paragraph font size used to be 15 pt, now you’ll see the baseline being more like 17 or 18 pt.

  4. Simplified navigation - Over time websites tend to accumulate lots of links in the navigation… I get it, its easy to just throw a new page up there and assume people will see it and click on it,  but an overwhelming or complex navigation with lots of dropdown menus is going to do just the opposite. Too many things to sift through and people will at best give up and call you, or at worst click away. For these reasons cleaner, simpler navigation menus are the way to go for a modern website.

  5. Simplified color scheme. Just like there tends to be more contrast in font sizes, good color contrast is also a hallmark of modern websites. Accessibility trends are a big reason why as it’s a lot easier to have high contrast colors, and therefore easier to read text, when you have a more simple color palette. If your current branding has a lot of colors in it and you’re trying to work them all into your website, it might be time to eliminate a few to create a cleaner, more crisp look.

What makes a website easy to navigate?

now that your website looks modern let’s define what it means to have a website that’s easy to navigate.

This is a big one… and is a little harder to visualize for most, but we’ve all been on sites that are confusing and well, not very helpful…it stinks… and doesn’t make you think too highly of the business! So let’s make sure that’s not the experience people are having on your site! 

To determine if your website is easy to navigate or not we first need to accept the fact that not everyone thinks and acts like we do so we can step into the shoes of our website visitors and make sure we have the right paths laid out for them  To help with this we can use a tool called website personas… which are kind of like the ideal client exercises you  may have done before but this time we’re specifically looking at how those clients use our website… thinking about what they need at different points in their buying journey to make sure our website is meeting their needs.  The first website persona is Returning Client Rachel.

Returning Client Rachel:

Your existing clients, like Rachel will either use your app (if you have one) or will hone in on only a few pages: she’ll go directly to your schedule, events page and (possibly) your pricing page. And in many cases she’ll have these pages bookmarked so she’s not scrolling or clicking around much at all. Knowing that, let me be very clear, you are NOT designing your website flow for your existing clients. For Returning Client Rachel, you simply need to make your Schedule and Event pages obvious in the main navigation AND provide links to download your app (if you have one).. I like to do this on the thank you page, in your website footer as well as in your welcome emails (and via a QR code in your lobby). For RCR, having your schedule very easy to find is the real key to an easy to navigate website. This means it should be called Schedule or Timetable (depending on where you are in the world) and should NOT be in a drop-down menu in your navigation. It needs its own spot in the navigation.

New people on the other hand are more complex but they are who the majority of your website is really for… non-client visitors will enter your website  at 3 different places in their client journey: they are either problem aware, solution aware or brand aware. Depending on what phase they’re in, they will be looking for different information and therefore will be navigating around your website in different ways.  Someone may move through those 3 phases very quickly, like in one website visit and others may take months or even years to move through those phases including multiple different website visits or other brand touchpoints. A well/designed website that’s easy to navigate provides information and action opportunities for people at each phase. 

Problem-Aware Paul

If someone is in stage 1 they are Problem aware, we’ll call this person Problem Aware Paul - he’s  just beginning to research ways to improve problems he’s experiencing. Maybe he’s gained weight, is experiencing back pain, high levels of stress or wants more energy. In this phase, that’s all Paul knows for sure… that he has something that’s nagging at him that he’s looking to improve.  The most important part of your website for people in the problem aware stage is your home page. You want to make Paul feel like he’s in the right place (literally and emotionally), and that your studio understands his problems, and has experience solving them. And you want to do all this relatively quickly.

Since he’s not yet convinced even in the style of your general services yet, this is not the place for a deep dive into any aspect of your business. The average time total spent on a website is just under 1 minute, so Paul’s not spending a lot of time digging. He’s likely to scan your home page and then leave to think it over or do more research so first impressions are big here: great photos, headlines that call out his problems and a concise preview of your services will grab his attention. This is also where offering a valuable freebie in exchange for contact info, can come in handy…if the freebie is designed with Paul in mind and is educational and actually valuable. (free beginner video class, quiz or educational email sequence)  We’re not going to go into that too deep right now, because I have some mixed opinions about the value of these for fitness studios. But if you do have a purposeful subscriber welcome sequence, this is the guy you should have in mind when creating it. Alternatively, highlighting your most active social media channel is also a option to further engage Problem Aware Paul. Following you on social media is a low-commitment ask that can help you continue to show up as Paul moves into the solution aware phase.

Solution Aware Shannon

Phase 2 of your buyers journey is being Solution aware, we’ll call this person Solution Aware Shannon. Shannon now knows and believes that your general service can solve their problem. So… Shannon’s sold on the idea of trying Pilates but now she isn’t sure what type of pilates or what studio to start with. Connecting with prospects in this phase is all about building trust and communicating why your studio and services can help the prospect reach their goals better than competitors.

Solution Aware Shannon is likely to move around your site more… from your home page to your About page, class descriptions, schedule and pricing pages. From looking at the analytics of hundreds of fitness studios sites, I can tell you that the most frequently visited pages, after the home page are usually the Schedule, About page and Pricing pages. That traffic is largely thanks to Solution Aware Shannon.  She’s looking for information to let her know if your studio’s classes fit with her goals, values, personal schedule and budget. Website FLOW is important here because you don’t want her to get stuck at any point in her research process. Make sure these core pages are not visually overwhelming with long paragraphs of text. Make good use of your headlines, utilize bullet lists and accordion text when appropriate (accordion text is what you commonly see on FAQ pages where the main paragraph is hidden behind a topic title) and then use photos or other visuals to illustrate your points.

You also want to make sure to have those core pages (About, Schedule, Pricing) clearly titled and visible in your navigation. And have  a logical button at the bottom of each page guiding Shannon to the next most important information.

Additionally, make sure there’s a clear way for Shannon to contact you with any further questions. You should have your contact info in the footer of your website at a minimum. Chatbots or other pop-up contact forms can help here as well.

Last, the quality of your website design as she navigates to these core pages (does your studio seem organized and professional?) will be a key influencer to whether she moves into our last phase: brand aware.

Brand Aware Beth

We’re going to call this website visitor Brand Aware Beth.. she knows she has a problem that your services can solve AND knows that your studio is one of the better brand choices to consider. This is the phase where your prospect is right on the cusp of taking action. Your website can close the deal here with a clear and direct CTA, some solid social proof and by addressing any hesitations she has.

By this point Beth has spent some time on your site already, either today or on a prior visit (or she’s a quick decision maker and coming directly from a friend or family member’s recommendation) Either way, she needs to see the first step to getting started plain as day. It’s go time and we don’t want her clicking around trying to figure out what to do. (you know how this feels if you’ve ever been on a government website!). To do this you’ll want your intro offer everywhere on your site and obvious. I like to put it in a button at the far right of your navigation so it’s on every page as well as having it promoted across your site lower on pages. These site-wide CTA’s can lead to a New Client page where you can lay out your sales conversation. This is where it all comes together for Beth and becomes an obvious Yes.

Your new client page’s sole goal is to sell the intro. So you’ll want to lay out the benefits of that particular offer: is it a 3 week unlimited? Then it’s a great way to sample all the class styles you offer. Is it a free first class? Then it’s a risk-free way to try something new…. This page should include several add-to-cart buttons as well as a small FAQ section. The FAQs on this page should be addressing hesitations someone has to buying that intro. Things like “what do I wear” “where do I park”... Leave off the questions about canceling your membership etc… again the sole responsibility of this page is to convince Beth that the intro is worth trying.

Last, while client testimonials are important to have across the site, Beth will pay special attention to testimonials on this page to see if she can see herself achieving the same results.. A 2023 survey by Power Reviews found that 98% of shoppers say reviews are an essential resource when making purchase decisions…..so pick some great beginner relevant testimonials, to show with the sales copy for your intro offer.

Let’s recap… so now that we know WHO is visiting your website here’s how we make sure that the website is easy to navigate for all 4 personas:

  • Path 1 - Returning Client Rachel: Obvious Schedule and Events page and links to your app (if using) in your footer 

  • Path 2- Problem Aware Paul: Home page on point—great messaging and design to draw him into what you do. CTA to follow on social media or subscribe. 

  • Path 3- Solution Aware Shannon: simple navigation that contains the info she needs to trust your brand: About your studio, Class Descriptions, Schedule and Pricing. And an obvious way to get in touch with other questions.

  • Path 4- Brand Aware Beth: New client page with a clear call to action to your intro offer, plus client testimonials and FAQ section.

Those 4 use cases or website personas is what your website is all about. No matter where you build your site or who builds it, coming back to those 4 website personas will help guide your design and content choices. 

When you combine the design tips at the beginning of this episode with the website structure needed to serve the needs of Rachel, Paul, Shannon and Beth, the result is a modern, easy to navigate website. 

If you know you need a new website or you’re opening a new studio soon, I’d love to help with that. I have several web design packages, all of them come with training on the platform, on site SEO as well as content prompts to help you craft a website that is engaging and easy to navigate. If you’re like to talk about a new website for your studio, fill out the form here to get started.


Never miss an episode!

If you found this article helpful, subscribe to the show on Apple Podcasts, Spotify, Google Podcasts, or wherever you listen to podcasts. Your 5-star rating and positive reviews are greatly appreciated!

Connie Holen

I'm a Digital Strategist + Squarespace Web Designer for yoga, fitness and wellness studios who need a strong brand presence both on-line and off. I specializes in creating clean, modern and easy-to-manage websites that smoothy integrate online scheduling softwares and are optimized for local search engine results.

http://www.pixalitydesign.com
Previous
Previous

Ep. 14: Building an Employee Brand with Katie Santos

Next
Next

Ep. 12: Ultimate Studio Start-up Checklist with Michael Jay