Bites:

Structure Your Day to Get Things Done.

Role:
Developer & Designer

Developed in:
Swift, JavaScript, Lottie

I was frustrated because I needed to jot down my daily tasks somewhere, but all the to-do/task managment apps I tried never worked for me. So, rather than adapting to the apps, I simply created my own.

I don't want to be able to add an infinite number of tasks in a day, and I don't want any fancy detailed features. I don’t want to group or schedule etc... I just want to get things done because there are only so little time in the day.

I needed a to-do list app that forces me to think the urgent and the important tasks, and doesn't allow me think about all the unnecessary details!

As a response, Bites was born, with its 4 tasks and 45 character limit.

1- The Flow:

Our mascot is a cookie, I changed the word "task" to "bite" because I imagined myself eating it in four bites throughout the day. His name is Walter, and he assists the user(me) throughout the app. 

Initial screen: The top portion of the app displays the current date. Walter begins by asking us what the most urgent task is today. If we are having difficulty figuring it out, we can simply tap the "Need Help?" button to launch the "Brain Vomit" page.

Second & Third Screen: We see a task limit indicator on the top area after adding a bite. We can also see that there is a bold text ("Must") above the bite we added. This is because the Bites app arranges tasks based on their importance as; Must, Should, Could, and Would.

Above the buttons, we can also see a message box, which will assist us decide which task to add next.

2- Brainstorm Vomit:

Brain vomit is a rather straightforward description for what this feature does; instead of brainstorming, you write down your ideas quickly and without structure. It's like the day after a night of heavy drinking when you let it all out and then clean up. This was quite useful to me because I always write down what I need to do for the day before deciding the tasks I need to do.

3- Add a Bite:

The anatomy of adding a bite:

• Message Box: Helps to decide which task to prioritize.

• Buttons: Reminder, Info, Brain Vomit and Lock/Unlock which makes the list editable or not.

• Input Box: There is a visual indicator to show the remaining character limit, and as the user types, the indicator font weight becomes bolder and eventually turns red when it reaches the 45 character limit.

When the user activates Reminder, the button expands and informs them that they will be reminded in 45 minutes. After many iterations, I concluded that keeping the reminder settings limited and without an option to cancel it encourages the idea of completing four urgent and important tasks. As I previously stated, I simply want it to work; don't make me think too much about when and how long, just do it.

The Info button displays app information, while the Brain Vomit button opens the Brain Vomit page.

The Lock button is interesting since I could have used the open lock symbol to indicate that it can be unlocked, but after doing some testing, I found that I preferred to see the closed lock symbol to signify that it is locked and can be unlocked.

---

“Don't make me deal with all of these complicated settings; simply remind me after a while so I return to the app, and check my progress.” 

---

5-Branding:

I prefer clean and minimalist interfaces, but the tasks I have to complete may cause stress, and I may be reluctant to complete them if I'm not in a good mood. So I asked myself, "What would make me feel better and smile?" I created several cute cartoonish characters, but in the end I decided to use "Walter" which was my favorite drawing. Walter is a cookie with a purple grape filling and a star-shaped centre.

---

Typography

The fun and expressive branding of “Bites” wasn’t really achieved with the default sans-serif font I used initially. So, I developed a brand new typeface for it.

This is “BM Walter”, a more expressive Cooper Black alternative!

Motion Graphics

To make the app even more interactive and fun I decided to animate Walter and figured that Lottie would be the best way to implement motion graphics to the app.

6-Metrics:

I learned a lot about how I approach an app and what my needs as a user during my two months of testing and reiterating. I also learned a lot about how to create an app in Swift. I plan to learn more about this language and use it to express myself more creatively.