Kaitlyn Zou
Design technologist passionate about digital experiences that enhance simplicty and human connectivity.
Let’s make something together!
Design technologist passionate about digital experiences that enhance simplicty and human connectivity.
Let’s make something together!
Study Clock~a website that evolves over time
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
Personal Project
Personal Project
Timeline
May 2022
May 2022
Skills
Full-Stack, Storytelling, Animation, Visual Design
Full-Stack, Storytelling, Animation, Visual Design
Technologies
Express.js, EJS, CSS, Adobe After Effects, Procreate
Express.js, EJS, CSS, Adobe After Effects, Procreate
Prompt
Create a clock that lives in the web browser. Mark the passing of time in a way that is meaningful.
Concept
As a college student in New York City, I find myself spending lots of time commuting via walking, subway, campus shuttle, or bus. I often try to maximize productivity and make the most of this otherwise idle time.
I’ve tried out various 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. Study Clock combines effective task management with an engaging, transit-themed interface.
Key Features
Development
Developed using Express.js, EJS, and CSS. Artwork + animation designed using Procreate and Adobe After Effects.
Takeaways
Create a clock that lives in the web browser. Mark the passing of time in a way that is meaningful.
Concept
As a college student in New York City, I find myself spending lots of time commuting via walking, subway, campus shuttle, or bus. I often try to maximize productivity and make the most of this otherwise idle time.
I’ve tried out various 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. Study Clock combines effective task management with an engaging, transit-themed interface.
Key Features
- Interactive Onboarding: Users begin by “swiping in” with a digital MetroCard, dragging it across the screen to initiate their session.
-
Goal Mapping: Users log their goals as destinations on a timeline, setting specific durations for tasks and the breaks between “stops”
-
Dynamic Visual Feedback: A subway-themed animation shows progress. A visual of a moving train represents active work periods, while subway doors opening at each stop signifies breaks and task transitions.
Wireframe
Development
Developed using Express.js, EJS, and CSS. Artwork + animation designed using Procreate and Adobe After Effects.
Takeaways