Twenty + Twenty
Twenty+Twenty is a browser extension that displays eye exercises which prevent digital eye strain. The extension includes 3 different eye exercises that pop up every 20 minutes on the screen for 20 seconds. This was an individual project for the course Core Interaction at Parsons.
Role
4 weeks, Parsons Core Interaction 2020
Product Design,
Development
Tools Used
JavaScript,
CSS, HTML
Project Objectives
How could I use a browser extension to alleviate digital eye strain (DES) caused by the extensive use of computers?
The user experience design of the browser extension is difficult since it could cause errors on the screen and impair the productivity of its users. In addition, the visual design should appeal to the users. I focused on promoting the ‘20-20-20 rule,’ which is taking a 20 second break every 20 minutes by looking 20 feet away, with coded eye exercise animations and utilizing engaging visual design.
User Research
Due to the increased usage of digital devices, digital eye strain, which is also known as computer vision syndrome, causes different ocular and visual symptoms to the users. According to the research paper Digital eye strain: prevalence, measurement and amelioration, over 50% of computer users experience vision-related symptoms. The blink rate significantly decreases when people are using computers. From the survey taken by 520 New York City office workers, it is reported that they experience symptoms, such as tired eyes, dry eyes, eye discomfort, eye strain, irritated eyes, and blurred vision. Therefore, I focused on developing a browser extension that encourages the users to frequently rest their eyes.
Visual Design for Animation
I created several variations of the eye icons to find the most efficient design that is minimalistic, comfortable for the eyes, and easy to animate.
Demo
Simple Eye Exercises to Follow: The user can easily follow the instructions from the titles of the pages and the short animations. Interactive Animation: The playful visual design and motion of the eye exercises efficiently engage the viewers. Soothing Visual Treatment: The green and light blue color schemes were appropriate for relieving digital eye strain as they are restful for the tired eyes.
Moving Forward
Since each of the eye exercises are downloaded individually, I am planning to create an integrated browser extension that displays different types of exercises and gives the customization options to the users. I also hope to add a skip button to the page so the extension do not interrupt the user's activity. A beep sound could be added to the extension to notify the start and end of each exercise.
