Design for VALUE: a case study on displaying the wrong information.

It was 11:35pm on Thursday night, and you entered your dinner portions into the MyFitnessPal™ app to track your day’s calorie intake. You switched over to the Today screen, and stared at a harsh pie chart glaring back at you.

Boy, that’s a lot of fat. Bright red fat. So bad. So red.

But, wait a second. Fat was registering at 62g, and protein at 73g—only 11g more. So how could the bright red fat take up sooo much more of the pie chart than protein? How could protein and carbs combined (155g) barely beat your 62g of fat?! Something’s wonky.

In practice, the pie chart in this example visualizes the percentage of your total nomming that was made up of protein, carbs, & fat. So, did you eat too much fat? Or not enough of something else? How do you figure out the right answer?

Look at the real numbers.

Hate to break it to ya, but these percentages are all a bunch of fluffy jargon. In reality, your “target numbers” aren’t percentages at all—they’re grams of nutrients. Remember? You set your target numbers just last night. They weren’t percentages. They were:

  • 180g of protein,
  • 161g of carbs, and
  • 84g of fat.

Those are the interesting numbers.

Now, you can answer the real question as you track your meals: 
“Did I eat the right amounts?”

Well, with 64g of fat, you came pretty close to the recommended 84g per day. But you skipped half of your carbs! (82g of 161g recommended) and came in far under half the recommended protein (only 73g of 180g recommended.) Now you can start making some eating decisions. Clearly, you’ll need a few more chicken breasts and potatoes each week.

The percentages weren’t going to tell you that, though. And problems like these happen all the time in the products we use. It’s because the design thinking put into this app was completely ass-backwards. The very root of information you care about — demonstrated in its focus on large, colorful pie charts — doesn’t even represent the valuable information!

A designer’s main job is never to make things look pretty.

The MyFitnessPal app leaves a lot to be desired in the category of visual appeal. It’s blocky, with too-small fonts, reminiscent of a spreadsheet graphic from Microsoft Excel 2013. But that’s not even the bad part.

That pie chart is only useful for displaying percentages of a whole. The percentages it represents are effectively useless in providing you with the information you need to intelligently adjust your diet to your fitness goals… and that’s the whole reason you’re using the app to begin with!

The real value of a graph would come in the form of some kind of bar graph, comparing what you ate each day to what you should’ve eaten.

Something like this:

Now that’s real value. You can see that you’re well below your nutrition goals, although Saturday was looking a lot better than Thursday. “Percent of meal” pie charts, on the other hand, communicate zero valuable information:

In fact, they could even be misleading, since they could be construed to suggest that your Saturday diet was almost perfectly balanced! They include no indication whatsoever of what the correct breakdown should be. And, even if they did, it still wouldn’t matter as much as the numbers of each nutrient:

180g of protein, 161g of carbs, 84g of fat. That’s all you care about. Now, are you ready to make smart eating decisions? You’re getting closer every day! 💪

In conclusion, design for value.

This is a plea to designers everywhere—even the ones in name only. When you’re deciding which data to visualize in your app, put yourself in your users’ shoes. What information is most valuable to them? In fact, even if you think you know the answer, ask them. Your users will always tell you how to design for value to them.