Fitter 365 is a membership site of Fitter Food, a health and fitness company founded by Matt and Keris. It’s jam-packed full of healthy recipes, meal plans, training videos, workouts and e-courses.

Jo created an approachable and fresh brand for Fitter Food, and we worked together on the site. With such a wide range of content, a big emphasis was around structure and navigation. Making sure we could make everything easy to find, while also surfacing fresh or relevant content.

Site structure

We kept the structure to the site simple, using top-level pages for their main areas of expertise – food, exercise, education and mindset. Content from each section could bubble-up to the logged-in home page. Within each top-level page, we used a stack of carousels, to surface each of the different types of content in the section. The carousels are a great way of allowing the user to browse through more content without committing to a category, so they can quickly find what interests them.

Surfacing relevant, recommended content

We wanted the content to always feel fresh so users can stumble upon a recipe or training plan they hadn’t come across before. But we also didn’t want it to feel completely random or automated. The Fitter Food brand is all about Matt and Keris’ personal touch. So we created a system that allowed them to customise what shows up on the top-level pages, giving them editorial control.

The design we created uses a stack of content carousels. Each can surface the latest or a random selection of any type of content, and the content selection can be narrowed down by filtering them by the content’s taxonomies. So if Keris wanted to add a carousel of gluten-free recipes on the home page, she could. The carousels can also be accompanied by a friendly message about why it was chosen or how to get the most out of it.

Archive pages and filtering

The archive pages allow users to view all of the content in specific areas.

We set up taxonomies specific to each type of content. For recipes, they include Ingredients, Meal Type, Recipe Type, Calories, Dietary Model, Free From (allergies). We used a comprehensive filtering system to enable users to filter the pages based on these terms. Great for finding recipes using ingredients you have in the house.

Search

We used the SearchWP plugin to power the search. It can search posts based on their content, metadata, and taxonomy terms. We added search boxes to each section of the site, as well as a global search. We also used SearchWP to power the “related posts” carousels on the site.

Ecourses

The Fitter 365 e-courses are each split into several video lessons. Users can hit a “mark as complete” button to track their progress through the courses, and courses in progress show up in their profile.

Profiles

The profile section of the site contains the user’s stats, favourites, courses, and preferences. The stats section includes a comprehensive calorie calculator, based on the Harris-Benedict equation. It gives users their Basal Metabolic Rate (BMR), Total Daily Energy Expenditure (TDEE) based on activity level, and a Calorie Target, based on the user’s goal. It also includes a protein intake guide.

Sales page

We built a sales page to show off the content included within the 365 site. It includes videos, an animated meal plan cover carousel, autoplaying screencaptures and iMessage-style testimonials.

Read more about the Fitter Food and Fitter 365 projects on the a dozen eggs website. Or visit the Fitter Food site to browse through the free content on offer.