In our planning process, we started by brainstorming problems that we faced in our day-to-day lives. One prominent theme we discussed was the lack of motivation and focus from students with remote learning. As a result, we explored the idea of building an application that incentivizes studying. Our survey on productivity validated this problem, as out of 117 responses, 81.2% stated that their level of focus was reduced due to COVID-19. Looking at available productivity apps, one that stood out was a website called This website lets users select a time for a break, and before their break timer runs out, they can access a variety of links through the website. Then, once the timer ends, the website self-destructs all the tabs that were opened on the website. For our productivity website, we wanted to mimic the self-destructing tab feature, adding an aspect of task tracking and rewarding break time when a user completes their tasks.

What it does

Our website promotes productivity by rewarding the user with break time based on their completion of tasks. Using the results from our user research we determined a reasonable amount of break time, as the amount of time rewarded is proportional to the size of the task completed by the user. Therefore, users can follow the break time without feeling guilty. Furthermore, having a defined value of break time prevents users from succumbing to their distractions for extended periods.

How we built it

Tony, our team’s UX designer, created medium-fidelity prototypes on Figma, laying out the structure of features such as the timer, task list, buttons. Jerry worked on creating the JavaScript for the timer that would allow the user to keep track of how much time is left on their break. Gordon and Nathan focused on managing the HTML and CSS of the site to be able to incorporate all the features such as the to-do list, pop-ups, and task buttons.

Challenges we ran into

Since our team members do not have experience writing in JavaScript, one of our biggest challenges was implementing the main functionality of the timer such as adding and subtracting from it based on completion of tasks. This was because it was challenging to understand new syntax and interactions in a short amount of time. Another thing we struggled with was the fact that we couldn’t complete all the components we originally planned to implement. As a result, we were forced to adjust our plans and sacrifice some functionality to meet the deadline.

Accomplishments that we're proud of

For 3 out of 4 members in our group, this was the very first hackathon that we attended! We were proud that we were able to identify a problem, analyze competitors, find a hole in the existing market, and follow an accelerated design process to ideate and build an innovative concept. It was also most of our first times making a project using HTML, CSS, AND JS, as well as using technologies such as Bootstrap and Jquery. Furthermore, it was meaningful to build a product that helps students like us and create something that we, ourselves, could use regularly.

What we learned

Completing this project, we learned about the importance of setting clear goals and having a plan when working with limited time. Creating timelines for our project and staying in constant communication with each other in a call helped us to manage our progress. It was also important that we acknowledged early on that there would be hiccups along the way, and we should not expect to accomplish all that we set out to. As a result, we were able to establish the priorities, so that when we inevitably experienced bumps, we were able to easily adjust our plan and continue.

What's next for Break Bank

We're looking forward to implementing a user login system and building a back-end system to track the user's study habits. We would not only provide users with data about how often they take a break and their average break length, but also to survey users about their productivity during the end of each study session. Eventually, we strive to integrate machine-learning algorithms to suggest an optimal, customized study plan for each user.

Share this project: