GracieFit for iOS

2015-Sep DojoApps App Store

After leading the design project, I also programmed the iOS app. GracieFit is the companion app for those on the Gracie Diet.

What is GracieFit?

GracieFit is a digital assistant for the Gracie Diet. The Gracie family is a martial arts powerhouse that has bred champions for the better part of the 20th century, building on the teachings of Hélio Gracie and Carlos Gracie, the creators of Brazilian Jiu-Jitsu.

And according to the family members, what became known as the Gracie Diet is one of it's greatest assets. It was a life long experiment, constantly revised and fine tuned with one single goal in mind: to always be ready for a challenge. With that in mind, the Gracie's goal became making each and every meal count as much as possible, and to let food be thy medicine.

Understanding the problem

One thing that became very clear right from the start was the overwhelming nature of the rules: the diet bundles fruits, meats, dairy, vegetables, and so on, into arbitrary groups. Each group has it's own set of rules, and their ingredients can be mixed and matched accordingly.

When trying to pair a couple of ingredients this is an easy enough task, but when considering a dozen ingredients, things start to get hairy pretty quickly. This was a major barrier of entry, and became the primary focus of the project.

(Re)Grouping ingredients

One of the major complications of matching ingredients by hand was the fact that some of the eight groups were mixed together into subgroups, one example was Group A – vegetables, fats, and meats – this, besides being counter intuitive, was very impractical because each subgroup would add its specific rules in the overall group rules.

So we broke down the larger groups into subgroups and this approach allowed for a much cleaner ruleset, with almost no exceptions. Group A, for example, was broken down into three smaller ones:

  • Group A1 - Vegetables
  • Group A2 - Fats and Oils
  • Group A3 - Meats and Seafood

Then we started looking into the possible use cases and what was to be the app's core focus. After some debate we chose a lean approach, and decided to focus on recipe creation for the v1.

Giving life to groups

One of the most interesting aesthetic challenges was to define a color palette that would represent well each of the 14 food groups, as well as a meaningful iconography and despite being a fighter's diet, we tried to remain playful and fresh. Can you guess which groups theses icons relate to?

Group icons.

From the top left, the groups are: Neutral, Vegetables, Meats and seafood, Fats and oils, Carbohydrates, Cheeses and creams, Fruits and sweets, Sub-acidic fruits, Acidic fruits, Dairy products, Raw bananas, Cooked bananas, Milk, and Crème fraîche.

How groups behave visually

After defining the icons was time to define how the groups interact visually.

Ingredient pills

Then the individual ingredients.

And finally, the last animation touches. (Onboarding and Recipe editing)

GracieFit is a paid app, available on the App Store.