Petman BARF Calculator
A web app to calculate the recommended amount of food for pets. The easiest of its kind.
In 2014, German pet food manufacturer specializing in BARF Petman contacted me for some marketing materials. From that, a long-term relationship formed. Looking to promote their products by solving the complexity of mixing the various components that make up a BARF meal, the BARF-Calculator was one of the first bigger projects I did for them.
According to the practice, a balanced diet for a normal healthy dog consists of multiple ingredients, all of which are traditionally sold separately - what Petman among others are known for. They came out with a new product line called BARF-In-One, which sought to provide a ready-made complete solution that was still providing a balanced diet without having to manually mix every meal. And to promote this new product line, and to provide an easier start for beginners trying out BARF raw feeding for the first time, the idea of an easy to use calculator was conceived.
The Status Quo
Existing calculator websites were way too complicated for anyone but the most dedicated pet owners. Some solutions were paid (and quite expensive at that), while others required tedious to acquire data, like the body fat percentage of your dog. Data points that maybe vets would be able to provide, but definitely not the sort users would know or could easily measure at home. Others had easy to determine inputs, but output so much data that the result became hard to take action upon. Of course there were also multiple Excel-based solutions floating about, with similar issues.
So this is an example of what we were up against:
A community-made calculator with many, many outputs (scrollable because it’s long). Note the plethora of results at the bottom. Source
Our Response
We decided that, while it’s likely very useful to experts in BARF raw feeding, it wasn’t clear-cut enough for beginners, and made BARF raw feeding feel like an endless rabbit hole.
Compounded by long articles and books and the aforementioned existing calculators aimed at slightly different target audiences, it was time to offer an easier and more polished alternative. So this was the first version that went online in 2014:
Petman worked closely with experts and vets in the field to nail down a minimum set of criteria to input and we worked together to create formulas that would cover most beginner’s needs. What was condensed down into three simple steps was the result of months of back and forth between everyone involved before the first version went online.
The site launched the same year Germany won a FIFA World Cup, so we featured our mascot with a soccer ball in the background on the results page.
The task force provided me with matrices of expected amounts of ingredients which I turned into formulas used for the calculations. The output was designed in a way that was more actionable by providing users with a list of ingredients or product categories to shop for, instead of a long list of nutrients. That’s essential for owners wanting to go deeper on their pet’s diet, but not so much for someone just starting out and making their first steps.
Immediately after launch, the Petman BARF-Calculator garnered attention in the community. It generated quite a bit of controversy, because it didn’t cover many edge cases - something especially dedicated community members with chronically ill or allergic dogs weren’t happy about. On the other hand, we got tons of positive feedback from people starting out with BARF raw feeding, and even new pet owners, because the calculator provided them with more insight into their dog’s diet in a simple way. After the launch we worked on refining the outputs to cover more edge cases.
One requirement the team at Petman insisted on was enabling purchasing products in stores based on the calculator’s output. Because of Petman’s target audience at the time being older, and because mobile internet coverage in Germany wasn’t as wide in 2014, we suspected people wanting to print out the calculator’s output and take it with them to stores as a sort of shopping list. Or, of course, to stick it to their fridge as a guide. In addition, clerks in pet stores could use the calculator to quickly advise customers.
The feature turned out to be a success with over 30% of users who got a result calculated also generating a PDF from it.
The BARF-Calculator’s PDF output (scrollable because it’s long).
One technical differentiating feature was that the BARF-Calculator ran fully client-side, without necessitating round-trips to a server for the calculation or generating PDFs (solved via jsPDF). Once the page was loaded, it didn’t require an active internet connection and ran as quick as devices allowed. User feedback highlighted that they were really thankful for that. For Petman, it meant that hosting was going to be very easy and portable, with no backend server required.
The Redesign
Based on gathered user feedback, at the end of 2015, Petman commissioned a new look for the BARF-Calculator focused on bringing it to mobile devices and incorporating their newly done rebranding. The calculator should provide the same functionality as before in a new, prettier, package and further refine the formulas. Additionally, they wanted to add support for new products that came out in the meantime, enabling calculating food for cats as well.
Given these requirements, we decided that it was best to redevelop the website from the ground up, only keeping the code for the calculations themselves intact.
The redesigned website is based on fullPage.js and effectively brings the previous experience to mobile devices and small screens. I revamped the design and moved it away from the skeuomorphic-ish previous style, keeping the dog mascot and adding a cat!
Using scroll jacking to cleanly separate the steps from each other meant getting to the results was going to take more time. So I decided to at least make the journey more visually appealing, by having reactive SVGs front and center when inputting the parameters, instead of the PNG graphics with simple swaps based on input in the old calculator.
SVGs Galore!
This was my first foray into getting complex SVGs with multiple moving parts to work cross-browser.
One of the more complex setups was the weight visualization. Increasing the weight input turns a dial on the scale and scales up the pet (we decided against scaling up singular features like their belly), pushing down the little platform they’re sitting on at the same time. All animations seen on the site are achieved with pure CSS transitions and properties applied to groups in the SVG graphics.
Additionally, the codebase was fully reworked, which allowed for full translation support - including loading and swapping in translations without triggering a page reload.
Conclusion
When it first launched, the Petman BARF-Calculator was the first of its kind that was as easy to use. Without knowing the ins and outs of dog diets, users could easily get a starting point on their BARF journey. This brought in a wholly new clientele for Petman to sell their products to.
After a while, the BARF-Calculator became the defacto standard for quickly assessing the dietary needs of dogs and cats when considering BARF raw feeding. This made it one of the most popular BARF raw feeding websites on the web.
Nowadays, there are lots of other calculators on the web following the same blueprint set forth by this one (meaning the three steps of activity, weight and age). But even still the BARF-Calculator stably garners more than half a million hits per year - a stat that reliably ebbs and flows with rising and falling interest in the topic. Petman uses it as one of the metrics for determining plans for their marketing campaigns and product launches.
