COLAB8 - Web App

EyeCare

Web app that supports users in creating habit of taking regular computer screen time breaks to alleviate eye strain.

Problem Background  

During the COVID-19 pandemic, many workers shifted to work from home and increased their computer screen time. Our team wanted to better understand the various physical and mental struggles people working from home experience in relation to their computer screen time consumption.

Research Insights & User Pain Points

We conducted 15 remote virtual user interviews with individuals ages 19-35 who were working from home to learn about behaviours and attitudes related to their computer screen usage. We concluded that 33% of users spent 6-8 hours on a computer per day, 50% spent 8-10 hours and 17% spent 12-14 hours. 60% of participants stated that the longest period of time they could work at their computer without taking a break is 2-3 hours, while 40% stated 4-5 hours. 


User Feedback

Our preliminary research concluded that the most common pain point was spending prolonged periods of time in front of a computer screen and as a result, developing physical irritations. The most common pain point was eye strain. 

Solution Explanation

Our solution encourages users to take regular computer screen breaks to reduce their eye strain. The EyeCare web app pushes scheduled notifications to remind users to take a screen break. Users are prompted to incorporate the 20-20-20 rule. Studies have shown that the best way to reduce eye fatigue is to follow the 20-20-20 rule. When you’re working on a computer, take a break every 20 minutes. Look at an object 20 feet away for 20 seconds to give your eyes a chance to relax. 

Lofi & Hifi Mockups

Iterative Design Learnings

After we showcased our prototype to the users again, we learned that we needed to level up the fidelity of the designs, including adding a color palette. Additionally, we needed to scale down our MVP and focus on one screen for the web app. We also removed the option for users to see data from their previous sessions.

This allowed for developers to omit the need to store and organize large amounts of data. We prioritized four features; track a user’s total screen time consumption, track how many breaks a user has taken in a session, customizable push notifications and the ability to pause/play notifications.

Implementation Details 

Technical implementation
  • Language: React
  • Framework: Reactjs
  • APIs: ReactPush Notifications, Socket.io
  • Storage: Firebase
  • UI: Bootstrap, Material UI, Animate.css, Figma, Miro
  • Deploy: Github pages, Vercel
  • Charts: ApexCharts

Future Steps

From speaking to users about our product, we learned that turning our product into a Chrome extension would seamlessly integrate our product into users’ everyday computer use. 

We will not be continuing this project, however we are very proud of the hard work our teammates put in the past 7 weeks. 

Team Learnings

Product Manager Learnings:

Aleksandra R.

As a Product Manager, I learned the importance of being organised and clearly communicating with all team members while organising sprints. I also learned the value of vertical slicing when building a product under time constraint.

Designer Learnings:

Allegra Glatzer

As a Designer, I learned that it’s imperative to conduct transparent conversations with developers in order to properly hand off designs. I learned that the more detailed comments about feature designs, the better to achieve a seamless handoff. Additionally, I learned to strategically design our MVP first, instead of thinking about the nice-to-haves.

Developer Learnings:

Mfon Nta

Developer's Learnings:

Fisayo Takuro

Full Team Learning