Fall 2018 - Human Computer Interactions

Procraster-ly

A group class project for Human-Computer Interactions elective. The objective was to tackle the problem of procrastination and design a potential and functional solution by using what we've learned about HCI. The result was a web prototype that was used to gather data and perform user studies in order to gauge if the solution worked efficiently.

Procrastination and the Digital Era

Procrastination has always been an unsurprising visitor to many of our lives at some point, and especially as students, and there's an interesting correlation that with advent of the Social Media Age that accompanied the Information Age, comes also a more easier way for procrastination to take root in our lives. For our Human-Computer Interactions class,this is a textbook problem that directly touches on the nuances we can manipulate and design how humans interact and interface with computers in order to achieve bigger tasks.

Fighting fire with fire?

As the previous section has noted, alongside confirmation through various ongoing HCI research, social media seems to have a correlation with procrastination. Upon various brainstorm sessions, our team decided to attempt to solve the problem, simply by designing a formidable social media that focuses on fighting back procrastination by encouraging productivity using the very same peer pressure social media applies. In order to encourage productivity, the simplest way to get organized and combat procrastination is a to-do list, hence being inspired by a popular productivity app "Procraster," as well as taking social media elements, born the name "Procraster-ly," where the "ly" part derives from "Musical.ly" (One of our team members missed Musical.ly and was obsessed with it).


Main home page and hub for Procraster-ly

TODO: explanation of some of the social media aspects and turning some of negative social media reinforcement into positive social media reinforcement.

Reinforcing motivation with more motivators

On top the website that serves as as a to-do list and a social media platform, was a second layer that functionally made the most effect in supporting this HCI design. A browser extension was developed and tailored to block specific websites assigned by the user in order to help support a productive conscious of web activity. The browser extension then effectively blocked websites the user registers beforehand as daily social media platforms or timesinks as well as time limits, and whenever a task was engaged by the user, the browser extension prevents the user from accessing the webpage until timeout or task completion. Upon successful task completion or timeout, the extension communicates with the server in order to reward points depending on the amount of time spent blocked, similar to another studying/productivity app called "Pocket Points."


Registering Facebook to be blocked by the extension via scheduling using timestamps and days of the week

Final Product

After conducting both a preliminary and main user studies on the design, most of the data and statistics collected point toward a measurable positive effect on users' productivity when using Procraster-ly. However, it was difficult to discern the individual efficiency of the components of the design, such as the social media component, or the website-blocking extension. Given that the user studies were not as fully extended as they can be (we observed members during a 15 minute period) due to time constraints, we were still able to achieve success in other areas such as usability and visual design. And most importantly, we actually gained positive support from users who were eager in seeking a platform like this, which may translate into a potential market entry for a design like this, after a few more cycles of refining of course, or maybe more haha.


Blocking a website using the extension

Potential future work and alterations

Even though this is just another take on a to-do list app, there was a certain angle with this HCI application that may take the current iteration of the social media market for another spin. Some things that still needed to be worked on includes:

  • A more fleshed out page navigation
  • System to utilize points gained from the website-blocking extension
  • Better friend system
  • Better chat system

Links

- To the final project video (made by Fernando)
- To the project repository


more projects!