Final Clock 1

Design process:
Step 1 – Avatar-Based Time Representation
The initial concept represents each speaker as an avatar with a fixed amount of time. Each avatar includes a timer and gradually fades away as the speaking time decreases. This establishes a direct mapping between time and visual change, allowing users to intuitively understand how much time remains.

Step 2 – Adding Speaking Status Labels
To improve clarity, labels such as “speaking” and “spoken” were added to indicate the current speaker and those who have already finished. This enhances readability and provides a clearer structure of the speaking order, helping users quickly understand the flow of the discussion.

Step 3 – Color Gradient for Urgency
To make the passage of time more visually intuitive, color transitions were introduced, where avatars change from green to yellow to red as time runs out. This strengthens visual hierarchy and urgency, allowing users to quickly assess remaining time at a glance without focusing on numerical values.

Self-reflection / future work: One improvement would be to refine the visual transitions, making the fading and color changes smoother and more continuous. This would improve readability and make the passage of time feel more natural. Another improvement would be to introduce interaction, such as allowing users to adjust speaking time or manually switch turns. This would make the system more flexible and adaptable to different meeting formats and group sizes.

Final Clock 2

Design process:
Step 1 – Time as Monetary Representation
The initial concept maps working time to different monetary units, where hours are represented as stacks of money, minutes as bills, and seconds as coins. This creates a clear visual hierarchy and makes time feel more concrete by translating it into value rather than abstract numbers.

Step 2 – Adding Structured Information Layout
To improve clarity, the design was reorganized into two sections: accumulated work time and remaining time to go home. This separation enhances readability and allows users to easily understand both how much they have worked and how much time is left, supporting better time awareness and planning.

Step 3 – Refinement with Container and Layout Design
In the final iteration, the design was placed inside a wallet-like container, reinforcing the concept of money and value. The layout separates visual elements (money icons) from numerical information, improving visual hierarchy and reducing clutter. This makes the design more cohesive and aligns the visual metaphor with the working context.

Self-reflection / future work: If I continue improving this design, I would focus on how to represent larger amounts of time more effectively. Currently, the number of visual elements on the left side is limited, so when the working time becomes longer, it is harder to reflect that increase clearly. A more scalable representation could make the design more practical. I would also like to explore using a lighter color palette and more dynamic visual effects for the overall clock. This could help make the experience feel more relaxed and engaging, and potentially reduce the sense of fatigue during long working periods.

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.