day.ly
SD Hack 2021 Special Category Award
Project Date: February 2021
Technologies: React Native, Expo, React Native Paper, Node.js
Role: Front End Developer and Designer
Team: Elias Arghand, Theodore Nguyen, Wesley Wang, Vivian Wu
With COVID-19 and the transition to online education, students have found it
harder to pay attention to lectures and homework assignments, resulting in increased procrastination
and decreased productivity.
Background
With the COVID-19 pandemic, students have made the hard transition from in
person
to online classes, leading to an decreased rate of motivation. Students who often went to cafes to
study
could no longer due to lockdown restrictions, resulting
in this need for different ways to combat this unmotivated mindset. We found that with reliance on
Pomodoro
techniques where there are allocated work and break times, students could set their schedule back on
track.
Prior to the pandemic, my friends and I often did our homework at UCSD's Canyon Vista (dining hall). Given the nature of a cafe, we were able to focus and get a lot of work done. However, with COVID-19 and lockdown restrictions, we were no longer able to study and do our work in public cafes. We were introduced to the Pomodoro timer but found that it was just as easy to “pause” the timer and go back to taking breaks. We figured that students need something that would keep them on schedule while having allocated break times
Prior to the pandemic, my friends and I often did our homework at UCSD's Canyon Vista (dining hall). Given the nature of a cafe, we were able to focus and get a lot of work done. However, with COVID-19 and lockdown restrictions, we were no longer able to study and do our work in public cafes. We were introduced to the Pomodoro timer but found that it was just as easy to “pause” the timer and go back to taking breaks. We figured that students need something that would keep them on schedule while having allocated break times
Solution
day.ly - find your productivity (iOS)
Inspired by online education that leverages Pomodoro strategies to
effectively balance
work and relaxation. day.ly promotes time management and users are able to attack their time
management problems
head on by cutting down interruptions and defining set objectives. day.ly takes the Pomodoro
technqiue and integrates
it with a schedule planner in order for students to visualize what exactly needs to be done within a
timeframe.
Features:
Features:
- Study sessions with recurring days - create recurring study sessions with custom or preset Pomodoro timer
- Dayly view of sessions - view what is needed to be accomplished for the day
- Weekly view of sessions - view what is needed to be accomplished for the week
User Research/Needfinding
When asking our peers, we found that students often side tracked from their
current
assignment, distracted by other tabs running or by their phone. They told us that the environment at
home was too
comfortable and hard to concentrate. This led us to investigate what has currently been done to
alleviate this. According to focus booster blog, the pomodoro technique enhances
productivity in four core ways:
The pomodoro technique, with its allocated work and break time, seems to find productivity for some, however issues arrise when a student decides to take more break than needed. We found that students then needed a variant of a schedule integrated with the timer to effectively keep them on track.
UI Design
We used Figma to design our app's UI. Starting with the Mockup, we gauged
what elements we wanted on our screens and refined that to our Final.
Mockup
When drafting our Final designs, we found that we wanted to maintain the same elements from our Mockup
so the only problem was choosing a color palette. We decided on blue and purple, as from our Research
in How These Colors Affect Your Productivity, the color blue is
often used to increase calmness and boost productivity by stimulating the mind. It is calm yet mentally stimulating.
The color purple is used to increase the perception of value through heightening mental awareness. It helps
build confidence as purple has often been associated with royalty.
We further maintained a simple layout as people who use these types of apps are more likely continue using it if there is not too many features or buttons that make it hard to navigate. We overall looked to build something simple yet useful.
We further maintained a simple layout as people who use these types of apps are more likely continue using it if there is not too many features or buttons that make it hard to navigate. We overall looked to build something simple yet useful.
Final
Screen Descriptions
- Home - After Signing Up or Logging In, directs you to your dayly tasks with subject and time
- Create a Study Session - Create study sessions with the subject, start time, pomodoro type, times, and repeating days
- Your Study Sessions - View study sessions for the week
- Session Details - View a more specific details about a session
- Work Session - Interact with the pomodoro timer to start a session and reset if needed
Programming
For our technologies, we used React Native, Expo and Redux.
I focused more on the front end, leveraging React Native and React Native Paper library to code various screens of our UI. I further tested our functionality through syncing with Expo and Node.js. In the back end, I worked on creating the Pomodoro timer using React Native.
I focused more on the front end, leveraging React Native and React Native Paper library to code various screens of our UI. I further tested our functionality through syncing with Expo and Node.js. In the back end, I worked on creating the Pomodoro timer using React Native.
Walkthrough
Below is a video demonstrating a simple walkthrough of our application and its key features:
Challenges we faced
Given the remote setting of this hackathon, we found it rather difficult to
resolve any merge conflicts and debug together. However, we were able to resolve this through being
verbal in our call and communicate every step we took to produce certain errors. Aside from
communication issues, we were also challenged by the frameworks. For all of us, it was our first
time using React Native and this was a great learning experience! We had two first time hackers who
were able to adapt to the hackathon environment.
Reflection
Being that this project was for a hackathon, I found myself pulling my first
all nighter to
work with my group members and learned to build an MVP given a 1.5 days. This was my first time
working
on front end with React Native and I learned how to leverage its libraries to create cleaner looks
efficiently. I also found myself delving deeper into the idea of the Pomodoro technique itself and
became
more knowledgable on study habit techniques and the psychology behind it. Possible improvements this
project
could have expanded on given more time include more extensive user testing to find bugs in our app
and a cleaner
organization to our view (so it's not just a long scroll of tasks).
Sources