Final Clock 1

Sketch iteration documentation (paper/hand-drawn photos)

Design process: Driven by the goal to mitigate "time blindness" for the people who want to improve their time efficiency, this clock transforms abstract time into a tangible quantized grid system. The design evolved from traditional clock sketches to a 3,600-cell grid, converting the mental task of "calculating time" into the visual act of "observing volume" to show how an hour is consumed.

I applied several information visualization principles to the final form: I added a semi-transparent dark mask over the grid background to ensure the digital time and progress percentage remain the focal point and are legible regardless of the underlying cell colors. The progress bar uses high-contrast bright yellow against an hour-mapped background hue. This provides a clear visual anchor to capture progress instantly while reducing cognitive load. A dynamic pulse on the current second's cell grounds the user's attention in the "now." This rhythmic motion serves as a visual heartbeat, helping to alleviate anxiety associated with the passage of time.

Key Design Decisions: Breaking the hour into physical units makes time "weighty" and intuitive, removing the need for mental math. The semi-transparent mask effectively filters out visual noise from the background grid, prioritizing core information. And combining a volumetric grid with a linear progress bar provides two ways to interpret time, supporting different cognitive processing styles.

Self-reflection / future work: I might add the ability for users to click and drag over the grid to reserve blocks of cells for specific tasks, changing their color manually. While the current clock is excellent for passive observation, adding an interactive planning layer would turn the clock into an active productivity tool.

Final Clock 2

Sketch iteration documentation (paper/hand-drawn photos)

Design process: The design transforms a traditional clock into an ambient indicator for creative home offices. Moving away from stressful numerical countdowns, I iterated on a volumetric accumulation model where time is collected rather than lost. By allowing leaves to stack throughout a 24-hour cycle, the clock creates a sedimentary record of the day, providing a low-resolution view of time through the growing depth of the foliage.

Key Design Decisions: The pile height is mapped to the 24-hour day (TotalMinutes / 1440). This turns the display into a tangible progress bar, letting users perceive the "weight" and duration of their workday at a glance. I prioritized fluid repulsion physics. This allows users to brush through the leaves with their mouse, offering a tactile, meditative micro-break that helps clear creative blocks during the day.

Self-reflection / future work: First, I would enhance the interaction by allowing the mouse to "stir" the grounded leaves, making them swirl or rotate slightly when hovered over. This adds a "fidget-toy" element to the clock. Turning the time-tracking interface into a low-stakes interactive playground can help maintain focus and reduce anxiety during transitions. Second, I would implement a "Midnight Gust" animation where, at 00:00:00, a strong virtual wind blows all accumulated leaves off the screen. For users who work from home, the transition between days can be overwhelming. A visual reset provides a satisfying sense of closure and a clean slate for the next day, transforming a jump in data into a therapeutic and meditative experience.

Ex 10

Design process: Each shelf represents either the hour, minute, or second of the day. The number of books per shelf represents that amount, and the potted plant shows the time for quick understanding. The background color represents AM and PM by light and dark shades, respectively, helping users intuitively recognize the time while maintaining a relaxed study atmosphere. This design is meant to be used as a background webpage to use while studying.

Self-reflection / future work: Improve this design by adding more visual details, textures, and lighting effects that enhance a peaceful and studious scene.

Ex 11

Design process:

1. Square path visualization: The breathing cycle is represented by a square with four edges, where each edge corresponds to one breathing phase. A colored line progressively draws around the square, providing clear visual tracking of the 4-second intervals. The square shape reinforces the "box breathing" concept.
2. Color-coded phases: Each of the four phases uses a distinct teal-to-gray gradient color (teal for inhale, light blue for first hold, mint for exhale, gray for second hold).
3. Countdown timer with neon glow: Large text displays the current phase label. The neon glow effect on the lines creates a calming, modern aesthetic while maintaining high visibility against the starry background.

Self-reflection / future work: Add customizable breathing durations (e.g., 3-3-3-3 or 5-5-5-5 cycles) to accommodate different skill levels. Include audio cues or gentle sound at phase transitions to support eyes-closed practice.

Ex 12

Design process: For my pancake clock, I designed the layout as a pancake cooking simulator. It shows a pan frying pancakes and then dropping them onto a plate, which makes the whole clock feel like a small kitchen scene. The animation was an intentional choice because it imitates a real cooking environment and makes the passage of time more visual and engaging.

The color change of the pancakes is another key design choice. They start light and gradually turn golden brown as time passes. This helps people understand how long the pancake has been cooking without needing to read numbers, giving a more natural sense of time. I also added a countdown counter below the plate to give users a clear, easy-to-read time reference, balancing fun visuals with functional feedback.

Since I wasn’t able to hand-draw detailed pancakes due to limited time, the visuals could have looked more polished if I had more time to refine them. I also chose warm, high-contrast colors (browns and yellows) for better visibility and accessibility.

Self-reflection / future work: In the future, I would like to add more realistic pancake textures and steam effects to make the cooking scene feel livelier. I also plan to add features like letting users flip the pancakes with a click to include simple interactivity.