Study Clock
~a website that evolves over time
A side running study clock, designed to keep you on track as you study or complete a set of tasks. Map out your goal tasks and time frame, allowing yourself for breaks in between. The study clock will curate your ride and keep you on schedule.
Type
Project
Role
Web Designer, Developer Intern
Timeline
May 2022
Skills
Full-Stack, Storytelling, Animation, Visual Design
Technologies
Express.js, EJS, CSS, Adobe After Effects, Procreate
Project
Role
Web Designer, Developer Intern
Timeline
May 2022
Skills
Full-Stack, Storytelling, Animation, Visual Design
Technologies
Express.js, EJS, CSS, Adobe After Effects, Procreate
Prompt
Using HTML, CSS and Javascript, create a clock that lives in the web browser. Mark the passing of time in a way that is meaningful to you.
Concept
As a college student in NYC, I find myself spending lots of time on commute... subway, campus shuttle, bus, etc.. I often try to maximize productivity and make the most of this otherwise idle time.
I also drew inspiration from online production tools such as LoFi girl, a 24/7 livestream of an anime girl studying in her room and listening to lofi hip hop. Also, time management methods like the Pomodoro Technique---25 minute focus periods followed by 5 minute breaks.
I designed Study Clock, a side running production tool inspired by working during commute.
1. When users first open the web page, the website will prompt users to “swipe in” by dragging a metrocard across the screen.
2. The following screen prompts users to log their destination timeline → setting goals/events as destinations and specifying the amount of time to elapse in between + the length of each stop(breaks).
Between each stop is the time for a task to be completed → visual of subway running, moving background
Each stop represents a break and a change in task → visual of subway doors opening
Wireframe
![]()
Development
Developed using Express.js, EJS, and CSS.
Artwork + Animation created with Procreate and Adobe After Effects.
![]()
![]()
![]()
![]()
Using HTML, CSS and Javascript, create a clock that lives in the web browser. Mark the passing of time in a way that is meaningful to you.
Concept
As a college student in NYC, I find myself spending lots of time on commute... subway, campus shuttle, bus, etc.. I often try to maximize productivity and make the most of this otherwise idle time.
I also drew inspiration from online production tools such as LoFi girl, a 24/7 livestream of an anime girl studying in her room and listening to lofi hip hop. Also, time management methods like the Pomodoro Technique---25 minute focus periods followed by 5 minute breaks.
I designed Study Clock, a side running production tool inspired by working during commute.
1. When users first open the web page, the website will prompt users to “swipe in” by dragging a metrocard across the screen.
2. The following screen prompts users to log their destination timeline → setting goals/events as destinations and specifying the amount of time to elapse in between + the length of each stop(breaks).
Between each stop is the time for a task to be completed → visual of subway running, moving background
Each stop represents a break and a change in task → visual of subway doors opening
Wireframe
Development
Developed using Express.js, EJS, and CSS.
Artwork + Animation created with Procreate and Adobe After Effects.
