Recently I’ve had the opportunity to make a couple of apps just for me. Why not solve my own problems?
One of the things that bother me is a little bit of extra weight that I just can’t lose. Frankly, I just eat too much, or rather, snack too often instead of having a proper meal. I thought, why not track my meals and see if it gets better? Surely, there’s a ton of apps on the App Store to track meals, calories, water and what have you, even suggesting meal and shopping plans. Yet I didn’t need any of that.
What I needed was a low-key food tracker that only required one or two choices to make and did’t think it knew better than me what to do. I already had a pretty good food routine and had no problem maintaining weight, what I wanted to achieve was a slight calorie deficit. Now, what it was about was basically a variant of intermittent fasting, but one that I controlled, not one that controlled me, like e. g. the 16:8 diet where you don’t eat for 16 hours every day. I wanted to slightly raise awareness about my food intake, not obliterate my routine with a new shiny diet.
Thus the idea for “Not So Fast” was born: a low-key food tracker which only asks you for meal size and nutrients (protein, carbs, fat) – and that’s it. No counting calories or weighing food or browsing for meals in the DB. In return it tells you how long ago you have eaten and shows all meals from the past 24 hours.
I whipped up a rough version in a couple of days and it looked like this:
There are four meal sizes that you can choose from: a bite (like a candy), a handful (like an apple), a plate (like a usual meal) and a bucket (like a huge bowl of ramen). As for nutrients, there is also a choice of four, but you can choose multiple: protein, fat, slow carb and fast carb.
What I was doing was snacking too much on “fast carb”: fruit, candy, bread, you get the idea. I used the app for three or four weeks and it worked like a charm, see the last acute drop on the graph:
Now came the time to add some polish and release the app on the App Store – the very first app of my own in the 5 years that I’ve been doing iOS development. Of course, it should be perfect!
As it turned out, the UX struggle was real and designing even such a simple app which only had three screens (even two without considering the “generic” calendar) was a true challenge. I spent days thinking about it.
Since the very beginning I’ve had the idea that besides a simple table view I should somehow visualize the meals during the day. I doodled some designs on paper, broke out Figma and made this:
This, let’s call it v1, has a few nice features:
- It prominently shows how much time passed since the last meal, and it’s the most useful piece of information as I have determined from using the app for weeks.
- Unfortunately, what you often want to see is how much time passed since you had a proper meal, not a snack. I provided for this use case by giving the ability to select a specific meal. When a meal is selected, it becomes larger on the screen, its nutrients are shown in words and you can tap a second time to open the meal editing screen. And the most important of all, the time display would show how much time passed since the selected, not the last meal.
- Meals are visualized on a 24-hour circle. I asked a few people, and they told me the circle was weird and confusing – just as I expected deep down. We are just not used to seeing 24-hour clocks.
- Meals in the past day before midnight (e. g. it’s 6 pm now and you had a meal yesterday at 8 pm) are displayed in the interval from “now” (the blue indicator) to midnight. Remember, we’re displaying the past 24 hours. This also turned out to be confusing.
- The meal card shows the portion size as a word and an optional single emoji title as a phrase. I really wanted to just allow selecting a single emoji from the food set instead of a proper title to keep things clean.
- I tried drawing icons for meal sizes but they turned out pretty bad, so I decided to just use words.
- As the circle is so large, it would fold to about a third of its size when scrolling. The time since last meal would slide to the right.
- The calendar icon opens the calendar. Simple!
- One of the things I that particularly liked was indicating nutrients at the bottom of the meal card by color.
Why did I want so badly to have the meals visualized? Probably because this app was to be my portfolio piece and I just wanted to show off. I didn’t quite get rid of the idea by the time I made v2:
Let’s start from the top:
- I got rid of the calendar icon and inactive title by borrowing this part of the design from the Health app. Now you can cycle days by tapping left and right, and open the calendar by tapping on the title in the nav bar.
- The new visualization is also from the Health app. It’s still showing 24 hours but it seems easier to understand than the circle, and most importantly, it’s taking way less space.
- For today, there is no need to show the hours up until midnight, so I can show meals only up until the next hour (because you can’t have meals in the future) and show some meals from the past day on the left.
- I kept the selection state and double tapping to open editing. I didn’t like that I had to select something, at all, but I saw no other way to display elapsed time for a particular (selected) meal. The idea that I could put it in the cell itself didn’t come to my mind for some reason.
- In this variant, the table became the major element, so now in the cells I had time on the left and numbers on the right.
- When a meal was selected, I showed it on top by displaying a bubble with its time. I thought this was a nice touch.
- I showed this design to a UI designer friend of mine, and the first thing he said was that it was very colorful. From the beginning, I thought coloring the numbers would make it easier to distinguish them, but after adding color to the cells in the form of nutrients, I should have removed color from the numbers and make them all just black.
- Because of the changes at the top, I moved the add button to the bottom. I wanted it to be at the bottom from the beginning, but v1 didn’t have a bottom toolbar.
- I always display the time since the last meal at the bottom left. This way it makes it less relevant which meal is currently selected in the table. Still, I didn’t like the concept of selection.
- In this design, colored nutrients just stack inside of the cell in a semi-random order, so it doesn’t really help you see what’s inside the meal at a glance.
- This designed looked well on the screen but after I viewed it on the phone, I saw that it was very cramped, and the fonts were too small. I fell into the same trap as some designers I have worked with: what looks good on the screen looks much smaller on the phone, you absolutely have to preview what you’re doing on a mobile device.
I took a break for a couple of days to think some more about the design. I admitted to myself that visualizing the meals was not necessary, it was just me showing off, both my skills as a developer and the possibilities of a design tool: “I’m designing UI, so I have to design something cool!” I guess professionals pass through this stage early in their career, but I felt it strongly inside me. It was hard to resist designing something else. Meanwhile my wife took my previous designs and drew cats on them. I thought this was a great idea :) And so I made v3:
- I kept the top calendar navigation. I think it’s simple and intuitive. “Today” shows the last 24 hours. If you go to the past, it just shows that day.
- No more visualization. The app works just fine without it, it’s not necessary.
- A breakthrough in this design was that I removed the concept of selection. Suddenly I thought that I could display both elapsed time and actual time, so I didn’t need to press anything to see how long ago each meal was. So now the size of the portion and how long ago the meal was became the two main pieces of information, always available at a glance. I’m quite happy with that.
- I decided against using any sort of manual input, which means there is no title. I think it’s good enough for the first release. At the same time, if I feel there is a need for it, I can move the actual time or the portion size somewhere else and put the title there, so I’m leaving myself a way out in case I change my mind.
- Nutrient indicators now take the whole width of the cell and they are always in the same order and in the same place. This way you can see immediately, even though there is no text, which nutrients are in which meal.
- The meal cards react to touch and expand (rather than push a new controller) to display the add/edit meal screen.
- The add meal button is on the bottom. As there is no need for a toolbar, it’s hovering in a convenient place so you can quickly add a meal.
- I thought cats were a really great idea of my wife’s! In my mind they don’t quite look like this, rather we attach them directly to meal cards and they provide jokes and maybe some tips. There will be about 10 variations, and they won’t be attached to every card. I think we can have no more than two of the onscreen at the same time or it will be too distracting.
- Another benefit of the cats is that they liven up the otherwise bland design. Bland is not bad though, the app should be functional rather than gimmicky, and I’m happy with how it turns out.
Finally, I made the add/edit meal screen. It is practically identical to what’s in the alpha app:
- It’s a feature that the screen comes empty when you add a meal, i.e. it doesn’t have a portion size or nutrients selected. Just tap Done and you’re done! The main thing is that a meal is tracked at a particular time, you can always add details later as all the meals are editable.
- I wanted to design a custom control to select the size of the meal, but after a couple of attempts I gave up, it just didn’t look good. Simply four options with a checkmark look not bad at all, to my taste, and are easy to understand. In the future I may add icons and this choice will be complete.
- I tried to clearly indicate which nutrients were selected and which weren’t. A dotted line is often used to indicate vacant space, so I went with that.
- Nutrient item width is based on the relative size of the words on one line measured in the number of letters. “Protein” takes 7 units while “fast carb” takes 9. I thought this would be a nice feature, as the app will be localized and simply having four identically sized buttons may not be enough. If it doesn’t work, I can always go back to a list of four elements!
- For the date line, I display two times again: absolute time and relative time. I think this form of display is not distracting.
- When you tap on the date line, a standard drum type date selector is displayed, no magic there. I decided to require a tap to access it because editing dates is a rarely performed action. You would prefer to just see the date rather than accidentally edit it.
I’m pretty happy with how everything turned out. Of course, font and color choices are subject to change based on use. For example, why not use a Trello-like patterns on the nutrients, which are easier for colorblind to discern? Or maybe there is a better minimalistic way to display the nutrients in the meal cell?
Any suggestions and thoughts are welcome!
