Starting The Development of my Dream App

Week 1 of my journey. This week: thinking, design and pixel art.

Dante
5 min readMay 1, 2020

I have had the idea to make FocusByte for the over a year now, and have finally found the time to do it. I decided to document my journey starting from week one because I thought it would be cool to share the highs and lows I face while designing and developing, as well as maybe hear some suggestions from readers.

FocusByte is essentially a timer app, based on the Pomodoro Technique, which is essentially a method to study in which you focus for a set period of time (usually 25 minutes) and are not allowed to do anything else within that time span, which of course includes checking your phone. After the time is up you are allowed a 5 minute break and the cycle repeats.

But here’s the catch, after the user focuses for 25 minutes and stays off his/her phone, a chest unlocks and the user receives coins and experience. The experience will go toward leveling up their character and the coins could then be used to buy mystery boxes or clothing for their avatar. However if the user decides to use their phone to reply to a message or check facebook, the app will first send a warning notification giving the user 15 seconds to get back on the app and back to work. If the user fails to do this, the chest would be lost and the user would have to reset the timer and start all over again.

In this day and age where people cannot spend more than two minutes without touching their phones, focusing for long periods of time becomes a much more rare and important skill. FocusByte aims to gamify the process of focusing, making studying and doing work enjoyable with rewards baked into the app.

Where did I get the idea from?

I got the idea while using the app Forest, which is very similar in the aspect that it punishes users who leave the app while the timer is on. However while using Forest the only reward you received was coins you could use to buy different plant species which was not interesting to me. So FocusByte looks to fix this by making the rewards much more interesting, surprising and most importantly, fun.

Week 1 Progress

I spent almost all of the first week, designing the different screens as well as characters and items in the app using Figma and Photoshop.

Here is the outline of the app I created in Figma

The Timer

As you can see the timer is pretty straight forward, users can choose any time interval using the circular dial between 5 to 120 minutes. When the user starts the timer a map will appear as if the user was searching for treasure, and once the user successfully focuses for the allotted time period they will see the third screen displaying how much coins and experience they received. The number of experience and coins will depend on how much time they focused for. The more you focus the more coins and experience you will get.

Characters, Leveling Up and Evolving

I spent the majority of the week sketching character designs in photoshop. I am planning to use pixel art to style the items and characters. The user will first start off as a baby, and as they gain experience from focusing they will evolve into a a little boy or girl, then adults, and finally into wise grandparents. Buying clothes will only be unlocked after a player has reached adulthood. Levels will go from 0 to 100 and evolving will happen at certain levels such as 23, 58, etc.

Mystery Boxes and Inventory

Players using there coins will be able to buy mystery boxes from a range of prices. These boxes will give out completely random items, from scissors to fruits to electronics. Clothes will not be given, and will instead be bought in the store. Depending on the box bought, the rarity of items will differ. All items will be stored in the inventory tab.

User Time Statistics

I also plan to record the time users spent focusing and to allow users to add tags to their study sessions. This way users will be able to see how much they studied dependent on tags they have created over the course of weeks and months. I believe if progress is not measured, improvement will not occur. This is just a rough sketch, so it will most likely not look like this at the end.

Technology I will be using, and my experience

I plan to code this app completely in swift in Xcode. I do not plan on using storyboards and will doing everything programmatically. For the back end and user authentication I will be using Firebase. For data persistence I will be using Realm in order to minimize the number of read calls I make to Firebase.

I started learning swift about 45 days ago, I took a course on Udemy as well as made some small projects. Before swift I was doing full stack web development and before that I made an app using flutter that is currently on the app store: dreamcheck.co. Besides coding, I began pixel art about a month before this project. I truly believe that with the right mindset, you can become proficient at anything.

I am currently almost done with my sophomore year as a computer science major at university. Due to the lockdown, I have had a lot of free time, so I thought why not finally make FocusByte! If you have any suggestions or would like to reach out to me my email is tfkim67@gmail.com. Nothing is set in stone for this app, so many things will change throughout the weeks, but I am committed to finishing it!

Thank you for reading and please look forward to future articles!

--

--