Back to portfolio

A food diary app for Android and iOS

I have a condition which means that sometimes it's useful to log both the food I eat and the trips I take to the toilet. I've searched for an app that lets me do both in a simple way, but none exist that I can find. Most food diary apps are about tracking calories to lose weight.

I decided to design my own app. Since the app is for my needs, I did not do any research as part of this project. I also wanted to practice following Google's Material Design and Apple's Human Interface Guidelines, so I designed these apps in native Android and iOS style.

Structure and flow

As I thought through what I would need to do with the app, I outlined the screens that would be needed, and how they'd be connected. You'll see later that the screens and flow changed as I was working on the design, but this first step helped figure out the general flow of the app.

As shown below I decided not to include a sharing screen, or a statistics/timeline screen. They would have doubled the complexity of the design for not much gain, since it's a personal food diary only. If I need to show it to a dietician, for example, I can simply show them my phone.

Once I knew which screens I'd need, I very roughly laid out the content on each screen. I did this for both Android and iOS, since the content would be in slightly different places depending on platform standards. Here is the iOS layout.

I named the app "Food Log". "Log" refers to a diary, but is also me making an immature pun for going to the toilet.

Visual design

I didn't want to use any kind of pre-built component library for Android and iOS, because that wouldn't teach me a lot about the platform differences. I recreated all of the platform components and styles from scratch. First, I started by creating a blank screen template that was the right size and had areas blocked out for system use.

Next I referred to Material and the Human Interface Guidelines for the proper controls in each of these cases, and designed the screens based on the earlier rough content versions.

Food log

View entry

Add food entry

Add "log" entry

The Bristol Stool Chart mentioned on this screen is a way for people to refer to the nature of their stools without having to bring in a sample. A doctor or dietician can ask a person which "type" on the chart their stool most resembles. It's a very useful standardised way of referring to these things. I avoided showing the images that are on the chart by default, because if someone is watching you use this app you might be embarrassed if they're visible. Instead, the user can reveal them if they want to.

Back to portfolio