Fitter 365

Tablet showing the design of the Fitter 365 website

I worked on this project at a dozen eggs in .

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.

Tablet showing the members home page of the Fitter 365 website

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.

Tablet showing the exercise sesction of the Fitter 365 website
We gave each type of content a distint look. Different styles and aspect ratios for their cover images. Training plans had landscape covers with images, with eBooks using portrait text-only covers.

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.

Tablet showing the recipes page of the Fitter 365 website

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.

Tablet showing the Recipe filters on the Fitter 365 website
The filtering system on the recipes page.


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.

Tablet showing search results on the Fitter 365 website
The search results use a simple list view.
Tablet showing a recipe page of the Fitter 365 website
The recipes pages include a table of nutrional information.
Tablet showing the related recipes on the Fitter 365 website
The related recipes on a recipes page - the results powered by the SearchWP plugin.


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.

Tablet showing the Ecourses on the Fitter 365 website


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.

Tablet showing the user profile section of the Fitter 365 website
The stats section of the 365 profile page.

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.

Sales page for Fitter 365

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.



Tablet showing the design of the Memo website

I worked on this project at a dozen eggs in .