Welcome to My IMT 561 Portfolio

[Your name] ([optional pronouns])

I am a master’s student in [program], focused on [interest area or domain].

This quarter I want to get better at [analysis, storytelling, interaction design, etc.].

One dataset or topic I am excited to visualize is [topic], because [short reason].

Documenting iterative process

Replace placeholders with your own notes and images.

Context of use: Explain where your clocks/timers would be used, by whom, and what problem they help solve. [add 2-3 sentences]

Final Clock 1

Sketch iteration documentation (paper/hand-drawn photos)

Clock 1 sketch photo 1
Clock 1 sketch photo 2

Design process: In 1–2 paragraphs (or bullet points), explain how this clock evolved from sketches to final form. Name the information visualization principles you applied (readability, hierarchy, color, layout, interaction, accessibility). [mention 2-3 design decisions and why]

Self-reflection / future work: What would you improve next, and why? [add two improvements you'd make and explain why]

Documenting iterative process

Replace placeholders with your own notes and images.

Context of use: Explain where your clocks/timers would be used, by whom, and what problem they help solve. [add 2-3 sentences]

Final Clock 2

Sketch iteration documentation (paper/hand-drawn photos)

Clock 2 sketch photo 1
Clock 2 sketch photo 2

Design process: In 1–2 paragraphs (or bullet points), explain your iterations and final decisions. Make explicit which visualization considerations shaped the result. [mention 2-3 design decisions and why]

Self-reflection / future work: What would you improve next, and why? [add two improvements you'd make and explain why]

Adapted from Golan Levin, 2016-2018

Documenting iterative process

by Raizel Lagunero — source code

Context of use: This clock is based on a bookshelf that adds to the cozy, focused ambiance of studying.

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.

Sketch evolution

Ex 10 sketch evolution step 1
Step 1 — This sketch depicts timer that is represented by books on a bookshelf. It had features of representing a student's classes and the amount of time that was studied per class. However, this design was too cluttered and did not fit the ambiant visualization that I had envisioned.
Ex 10 sketch evolution step 2
Step 2 — I simplified the design to only include three simple bookshelves, and instead of a timer, I implemented a clock. However, I recieved feedback that it was difficult to immediately count how many books were in each shelf, and it the clock did not show whether it was in the AM or PM.
Ex 10 sketch evolution step 3
Step 3 — I added numeric labels on potted plants at the end of each shelf to allow the user to quickly understand what time it was. I also added a background feature that reflected what time of day it is; light background represents AM, and dark represents PM.

Documenting iterative process

by Yongxi Chen — source code

Context of use: This sketch represents the rhythm of box breathing, a meditation technique used to calm the mind and reduce stress by maintaining a steady 4-4-4-4 breathing cycle: breathe in, hold, breathe out, hold. It is designed for mindfulness practice, stress management sessions, and focus exercises where users need visual and temporal guidance to regulate their breathing.

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.

Sketch evolution

Ex 11 sketch evolution step 1
Step 1 — Initial layout
Ex 11 sketch evolution step 2
Step 2 — After peer feedback
Ex 11 sketch evolution step 3
Step 3 — Final refined version

Documenting iterative process

by Teresa Wang — source code

Context: This clock is designed for people who love making pancakes. It works as a fun, visual timer to use while cooking, helping users track how long their pancakes have been frying through animation and color changes.

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.

Sketch evolution

Ex 12 sketch evolution step 1
Step 1 — initial layout and annotated design decisions
Ex 12 sketch evolution step 2
Step 2 — second layout after peer feedback
Ex 12 sketch evolution step 3
Step 3 — refined visuals and annotations

more details next week