← Back to portfolio
Challenge:Design a food diary app for iOS and Android as a personal project.
My role:Mobile app architecture, visual design, research into Material and HIG.
Result:Complete app designs for both platforms, and a better personal understanding of the platform standards.
Reasons I'm proud of this project:
- This project helped me become familiar with Apple and Google's mobile design guidelines, and I feel more comfortable working with them again
- It helped me understand more directly the differences, benefits, and drawbacks of Apple and Android patterns
- I do not have many chances to work on mobile design in my job, so this was good practice
- It solves a problem that's personal to me, and that no other app seems to solve
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.
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 an immature pun for going to the toilet.
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.
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.
Before this project, I had never designed a mobile app to closely match what Apple and Google recommend for native apps on their platforms. This project has made me more comfortable with what's required of a platform-specific app.
← Back to portfolio