15 Looking Back &
Moving Forward

This final week was a test of resilience. Facing an unexpected housing crisis during submission week, I had to balance packing boxes with polishing code and documentation. Despite the chaos, I managed to finalize the tool's styling, compile the Catalogue of Making, prototype, and reflect on a semester of intense growth. I am ending not with a perfect product, but with a powerful direction.

  • Week-fifteen
    24 ~ 30. Nov, 2025
  • Journal-by
    Choi Yerin
  • Keywords
    • Code-Preview-Styling
    • Catalogue-of-Making
    • Retrospective
    • Future-Roadmap

First Prototype &
Final Polish

Following last week's functional implementation, I focused on the experience of the tool itself. Raw code blocks can be intimidating, so I updated the code preview area with syntax highlighting and a minimal layout that matches the tool's dark aesthetic. Also, I added more functionality to it with React and Interactions-only export features, for a better implementation and wider choices

First Prototype of Tool for Sketching Interaction (Code Export Function Demo)

Debugging

I also spent significant time squashing bugs introduced during the React migration. While not every edge case is solved, the core functions—adding states, customizing feedback, and exporting code—are now stable enough for demonstration.

Documentation &
Catalogue of Making

The most significant task this week was assembling the my work into Catalogue of Making, Prototype, and Presentation. As discussed in Week 12, catalogue of making serves as the documentation of visual outcomes from my experiments.

Documentation deck for prototype

Above is the prototype documentation. I chose to work with a deck, compiling my works. The contents include my diagrams for tool building and tool case study, as well as the demonstration videos. In addition to that, I also added some break down of the tool's architecture and user flow with screenshots and captions.

screenshots of catalogue of making

I gathered the semester's key artifacts from the p5.js sketches, the diagrams, the frame-by-frame deconstructions, tool demonstrations, and organized them to tell the story of the process.

Reflection:
The Reality Check

I want to be honest in this journal: this week was chaotic. My landlord suddenly asked me to move out for renovations, so instead of sitting calmly in front of my code editor, I spent the critical pre-submission days packing luggage and moving boxes.

The Aesthetics vs. Topic Trap

Looking back, I often struggled with the desire to achieve a "very pretty outcome" immediately. It was hard to resist the designer's urge to beautify and instead stay focused on the topic—the systematic, invisible parameters of interaction.

State of the Outcome

To be honest, I am not 100% satisfied with the outcome right now. It's a little buggy, and I think I could have designed the UI better if I had more time.

But this dissatisfaction is actually positive. It means I have a clear vision of what "better" looks like. It means I have a lot to go, and importantly, I still have time. I was a little lost during the middle weeks, overwhelmed by the amazing work of others, but now I have a direction. I am proud of my technical growth, from fear of code to building a React application.

Moving Forward:
Plans for Semester 2

After taking a break to spend time with family, I have a clear roadmap for the next phase.

  • Advanced Tech Integration (GSAP): I plan to integrate GSAP to allow users to design complex events like ScrollTrigger or TextSplit animations. This will expand the tool from micro-interactions to macro-experiences.

  • Loading Animations: Returning to my Week 6 experiments, I will build a dedicated section for "Loading States," applying the same parametric rigor to wait times.

  • The Invitation (Publication, Implementation, Tutorials): A powerful tool is useless if no one knows how to use it. I will create visual assets (e.g. different design system created with my tool) and Videos(e.g. Tutorial, Documentation) to make the tool accessible and cool. ಠ◡ಠ