There are four meal sizes in Not So Fast: bite, handful, plate and bucket. From the very beginning I wanted to have icons matching the text to help the users choose the right one. I was thinking about abstract forms and different representations, but nothing came to mind that I found sufficiently attractive and simple, so the beta version of the app was released without icons.

As you can guess, I did come up with something :)

tl;dr: here’s the final version live in the app at this moment:

Drawing is not my forte, to say it mildly. I guess I have the eye but not much skill: I can see that what I draw is bad yet I either don’t know or am unable to fix it. One day it hit me: why not draw a direct representation of what the user sees? A bite is something small held between the fingers. A handful is just that, something in the palm of your hand. Same for plate and bucket. I thought using a hand for scale would make the icons self-explanatory. So I sat down, picked a few items lying nearby and made some shots.

I liked the idea, but how to translate it onto the screen? My first approach was to trace the photos directly and see where it took me. I quite liked how the first icon turned out, it worked really well on my big display.

You can see that I didn’t bother tracing all but the first photo, the reason being it didn’t work in small size at all. I underestimated the level of detail. On iOS, table view cell icons are just 32 by 32 points in size. There is no way such a detailed icon would work.

Do you know how iOS toolbar icons look? They are very simple, with widely spaced lines stroked 1 point wide. I thought it was just a minimalist design choice and more complex icons would work too, but after trying myself I know now that it’s necessary to simplify icons as much as possible or they won’t work in small sizes.

I tried a simpler, but still lifelike approach by tracing the photo again in a much smaller size, or if you prefer, in a much thicker line with way less detail than before. Again, on the big screen it worked well, but the lines would be squished together into an illegible mess on a device.

I was ready to give up on this icon idea, because at this point I had to draw something from scratch, not trace a photo. Even in such a small size, 32x32, it proved quite difficult.

Eventually I used a bit of tracing, using photos as reference, but not as a direct guide. This version turned out pretty well! I decided to use a filled shape for food and an “empty” shape for the palm. The hand didn’t fit on the edge of the bucket so I put it inside, which created the feeling of a cavity and unnecessary connotations, and some users told me about it. At this point, though, I was creatively spent and needed a break to reflect and decide what to do next with the icons. I also had several features not yet implemented and I wanted to finish them first before making a second pass on the icons. These would do for now.

I found it funny how the first, “bite” icon turned out to only have two fingers, despite three being visible in the photo. I tried drawing the ring finger multiple times, but it just wouldn’t fit or would be jumbled in small size. My wife suggested just cutting it from the icon, I did, and lo and behold, it was actually unnecessary. Up close, the hand with just three fingers looks weird and a bit alien, but in small size it works quite well. Thick lines, when positioned near other thick lines, alter their perceived dimensions, so what looks boxy and unproportional when magnified, looks great when it’s very small. It’s a really interesting optical effect, and probably has a name.

In the app the icons looked pretty decent in small size despite my concerns, but the filled shape felt very heavy and pulled too much attention.

After a few days I made another pass on the icons, using suggestions from the users. I made the meal shape empty and it immediately improved the overall look and feel. Now the icons looked a lot more like stock iOS icons, which was a good result.

The plate icon got a bonus in the form of a finger which covered the edge. I couldn’t do that with the filled shape, because I would have had to use a white outline inside the shape and a blue outline outside, and their joining would not look good at all. With the shape empty, I didn’t have this problem any more and the hovering finger made the icon more believable.

I kept struggling with the bucket icon. At least with the empty shape, I could cross the bucket edge and added a sort of a handle. I really wanted to keep the top-down look, but clearly this idea wasn’t working out. I even understood why: people often have to deal with bites, handfuls and plates, but when it comes to larger sizes, there is nothing common and instantly recognizable. I couldn’t draw a bigger plate because it wouldn’t fit, I didn’t want to make the hand smaller to account for scale, I hated the literal “bucket” metaphor because you don’t really deal with buckets of food, and if you do, they are somewhere in the middle of a table and you still use a plate.

I shared my woes with my social circle and got back a few promising ideas. I thought of them before, but now it was obvious that the top-down look wouldn’t work.

I reluctantly agreed to use a side view, and with that at least I had some choice. I could now draw a convincing “bucket” but this hadn’t been my intention in the first place. I got an idea to reuse the “plate” hand: notice how on the new bucket icon the hand is mostly directly mirrored with some minor adjustments.

I also wanted to keep the circle metaphor for a meal, and what better sideways view, than a slightly bigger plate, but with too much food piled on it?

Still, I don’t like the new bucket icon _completely_, but it’s the best I can do for now that keeps the style coherent across all the four icons.

If you have ideas about what could be made better, you’re welcome to share them!

After just a couple of days in review (maybe beta review helped?) Not So Fast has been released on the Apple App Store.

You can find the link on the website: https://notsofastapp.com

As usual, this version is temporary, made with Carrd, to be replaced later with a simple static page.

I have already found a few bugs and got some valuable feedback from users. There’s also a huge backlog of features I’d like to implement, but everything takes time! I’m happy to have released at this very first version, it has been a lesson in what corners can be cut and what features are absolutely essential.

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!