Re-Designing Three Bite

Three Bite is a portion control / diet app has been in internal beta for a quite a while now, almost two months. The main purpose of the app is to regulate the user to eating three bites (of anything) every couple of hours.

While all of the bugs have been resolved and it's ready to submit to the app store, I was never quite ready to push it through. The reason was mostly asthetic. It functioned well and got the job done but it looks incredibly plain and boring. I'm not a designer, I'm a programmer and I've always been staunchly in favor of having professional designers create a "theme" for an app that we can work from and this case is no different.

Since my app was ugly and built mainly for myself, I was content with just leaving it to rot away on my personal iPhone in infinite beta. This was until I stumbled across the Do UI Kit from invisionapp. It was free, stunning and perfect for a simple 4-view app.

Choosing a Theme

It took roughly an hour of going through the UI Kit's 140 different views to find 4 views that I felt could be repurposed to replace the 4 views I'm using now.

You can get a decent idea of where I'm going with these already but allow me to explain.

Help View

This view is used multiple times in the app to display information to the user in a blurred modal overlay. Tapping on the question mark or the "Exercise?" and "Multivitamin?" buttons should reveal what they're all about.

Most apps now have a "walkthrough" system that tells you how to use them, so this concept became more intriguing to me. Why not just let them tap through a few views and get everything they need to know about the app at once, rather than having 3 separate buttons launch 3 different information screens?

This was the easiest view to implement. Tapping on the question mark pops up a modal and I dumped 3 views onto the storyboard with a button segue between them and a dismissal at the end.

The whole process only took a minuscule amount of time but it’s a little archaic so I know what you’re thinking, why not just use a page control?

The first problem with using a page control (other than some believe that it's an Apple UI Guideline worth avoiding) is how do they dismiss the modal? We can allow the user to tap the screen to dismiss it but then you open yourself to those pesky “I meant to swipe to the next page, not dismiss it” touch conflicts. So I’d have to add a dismiss button somewhere and make sure it appears on every page or that it resides outside of the page control. The main advantage of having a page control is to “clean up” the interface of any “next” buttons so adding a “dismiss” button instead seems like a wash.

The second issue is that page controls are a bit of a pain to implement. They’re not bad but they're tedious to get the content set up and ensure that the page control’s indicator is “in tune” with what it’s displaying. If implementing my 3 view push took a small amount of time, a page control is comparatively harder for a minor benefit.

Home View

The home view is the main landing page, which lets you look at bites over the last week, the meal timer and toggle Multivitamin and Exercise tasks as you perform them.

I removed the switches and opted for the Android style floating buttons at the bottom. I subsequently had to ensure that the bottom of the meal table can scroll above them to be fully legible when there’s a lot of entries.

In the original app, the idea was to display an encouraging / helpful message at the bottom depending on what the state the user is in. For example, if you are eating well so far, it would say something like “Great job, don’t forget your multivitamin!” or if you’re looking at older dates, it gives you a summary of how you did “Pretty good job of tracking your meals but let’s try to limit the over-eating.” In hindsight, this idea cluttered the interface and the benefit it provided was not worth the effort it took to write the logic that determines which message to show when.

The timer wasn’t very large in the old app so it now displays prominently at the top. Another thing is the old app didn’t show you the timer when you were looking around at previous days (since there’s no timer for that day). That also didn’t make sense so now the timer displays constantly once triggered.

Lastly, in the old app, when you would invoke the exercise switch, it would remove some extra bites and indicate that the meal was affected with an icon. Now, it simply makes the removed bites slightly transparent, which is cleaner and the user can better figure out what's happening to their meals.

Toggling exercise button trims down some over-bites.

Bite View

This view is used to actually make the bite count entries for the app and, as you can see, it was largely unchanged.

I removed the save button and it now saves changes automatically when you leave this view.

The date was added, since it wasn’t there before, to help prevent the user from accidentally making an entry for an older day (which happens to me quite a bit).

The delete button was removed, you now delete meals by swiping left on them from the main page. This is fairly standard and test users figured it out quickly, so this change didn't cause me any worries.

"Oops! I pigged out" was renamed to "Over-ate". I know there shouldn't be a dash there but during testing users kept asking me what the "Overrate" button does. "Does it mean my meal was overrated?" Adding the dash seemed to solve the problem.

Summary View

This view was the one I was originally the least happy with. The purpose for this view was to give people some “achievements” to strive for, where they try to beat their own historical entries and encourage them to use the app more. The problem is, not even I cared about this view. There was too much reading and there were a lot of times where my historical goal was so good that my current progress seemed hopeless in comparison. It was almost de-motivating, in a sense.

So the new view threw out that old “achievement” concept and just gave you a summary of how you’re doing so far. The idea came from the UI Kit itself, so I’m thankful.

The only tricky component was getting the percentages correctly animating in the circle at the center of the screen.

What’s Next?

For my purposes, the app works just fine. However, I do know that other users on the App Store will likely want to tweak the settings. Perhaps they want to track five bite meals instead of three? Maybe they want the wait time for each bite to be lower? Maybe a particular user exercises very hard and thinks the toggle should remove more than just three bites? This is all easy to implement and I’ll likely get these customizations in there when I come across some free time.

Other than that, I’d like to try this diet a bit more personally. It’s based loosely on “The Five Bite Diet” made famous by Dr. Alwin C. Lewis in his book “Why Weight Around?”. The purpose of the Three Bite app is to relax Dr. Lewis’ bite restrictions slightly and spread them more evenly throughout the day. While I’ve had some success with Three Bite, I admit it has its weaknesses, primarily that you have so many meal times in a given day resulting in that many more opportunities to cheat.

Look forward to a future blog entry with results from a week of following Three Bite religiously while trying to max all three activity bars on the Apple Watch every day. Dr. Lewis' Five Bite Diet brags about losing 10 lbs per week, we'll see if I get even close to that on Three Bite.