From James Van Dyne
Jump to navigation Jump to search
Foodgram icon.png

Foodgram was originally designed to allow you solve the age-old problem on iOS: photos of my food are getting mixed in with photos of my family. The basic idea in v1, besides being used as a means to get back up to speed with iOS development, was the give you a place to store and view your Foodporn.

The second release refined the design and changed the idea: track your food intake with photos. The main premise being that what gets tracked gets monitored. So if you’re taking photos of everything that goes into your mouth, you’ll be less likely to go for that midnight slice of pizza.

The two versions of Foodgram were really 2 different applications that just shared a name. Either way, let’s dive into their history and considerations made during its design.


Empty State[edit]

When you didn’t have any photos we wanted to make it getting started a single tap. As touch interfaces are fairly poor at discoverability, we also doubled included tips for how to use the app.

Foodgram 1 empty state.jpg

The Main View[edit]

The main interface was list of all of your photos sized at 1/3 of the height of your screen.

Scrolling through your history was quick and you could view any photo full screen by tapping on it.

Foodgram1 main view.jpg


99% of the time we take photos of food we’re going to share it on social media. This is especially true for Foodporn. Rather than clutter the interface with share buttons, we decided to hide it behind a swipe. Swiping on a photo would show two buttons: share and a more options. The only other option was to delete the photo.

Foodgram 1 share.jpg

Photo Food Diary – Foodgram[edit]

Foodgram 2 icon.png

Foodgram 2 was a complete re-imagination of foodgram. Rather than being a place to keep your food porn, it was instead diet focused.

The primary view was a week view of everything you consumed and to encourage you to log everything in real-time, you could only log things on that given day and in sequential order.

Tapping on the section headers would let you cycle through your total calories, protein, fat, or whatever you were tracking.


Tapping on any photo would let you view the details. From this screen you could view a larger view of the app, a full nutrition profile, and a description of what you ate.

Foodgram 2 details.jpg

You could view past weeks as by tapping the back button. Weeks started on the localized start of the week.

Foodgram history.jpg