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.
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.
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.
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.
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.
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.