Advanced Interactive Design(MLO)
Week 1
The final project for this semester is to create a thematic interactive website (microsite) around a specific concept, engaging users through interactive exploration. In class, Mr. Shamsul showed us some FWA examples, which gave me a clearer idea of what a microsite can look like.
Our current tasks are to install Adobe Animate and prepare three ideas for the Task 1 proposal. I’ve come up with the following three directions.
MLO 1:
1. About a Puppy
I have a puppy myself, so I’d like to create a small scene set in a corner of a home, featuring my puppy as the main character. Items such as a food bowl, a leash, and a chew toy are scattered around. When the user clicks on different objects, the puppy responds accordingly: clicking the bowl makes the puppy come to eat; clicking the leash makes it spin excitedly. Behind each interaction, there is a simple piece of dog‑care knowledge (e.g., suggested daily walking time). The overall style is warm and hand‑drawn, aiming to resonate with dog owners.
2. About Environmental Protection
Rather than a lecturing approach, I want to tell the story of a T‑shirt – from the cotton field to the wardrobe, and finally to being discarded or recycled. The user slides a timeline to see water consumption and carbon emissions at each stage. The user can make choices (e.g., wash with cold or hot water), and different choices change the final numbers. At the end, the T‑shirt either enters a recycling stream or ends up as waste. I hope to deliver the message without being too heavy, yet still provoke some thought.
3. About Music
I will design a virtual drawer cabinet, where each drawer represents a music genre. When the user pulls open a drawer, a corresponding music loop starts playing, and the background colour changes. Multiple drawers can be opened at the same time, allowing the user to mix tracks on the fly. Finally, the user can record and download their own mix. This idea is not tied to any specific band or album – it’s more of an exploratory sound toy.
Link to PPT of project1:https://canva.link/1bingvsn534v65u
MLO 2:
Thematic Interactive Website Proposal – T‑shirt Lifecycle
1. Concept Overview
For my thematic interactive website proposal, I chose the sustainable fashion theme. The website is called “T‑shirt Lifecycle” and is designed for a fictional eco‑friendly brand named EcoWear. The core idea is to tell the story of a single cotton T‑shirt – from the cotton field, through manufacturing, transport, daily use, and finally to disposal or recycling.
Instead of just reading facts, the user interacts with a timeline slider, makes choices about washing and drying, and sees how their decisions change the total water and carbon footprint. At the end, they can generate a “My Impact Report” to share. This makes abstract environmental data feel personal and actionable.
2. Flow Chart
Final Project:
Project Overview
My project is called T‑shirt Lifecycle: A Sustainable Fashion Story. It is an interactive educational website about sustainable fashion. The core idea is to let users walk through the entire lifecycle of a T‑shirt—from raw materials to disposal—by making choices along the way, so they can see for themselves how different decisions affect the environment. The whole project was built with Adobe Animate (HTML5 Canvas) and uses CreateJS for interactivity.
Development Process
1. Initial Research and Content Planning
When I first started researching, I came across a statistic saying that the fashion industry accounts for 10% of global carbon emissions—that really struck me. But just showing users numbers would be boring, so I decided to tell a story instead. I ended up with five stages: Cotton → Dyeing → Transport → Daily Use → Disposal. Then I added two choices at the dyeing stage (Azo and Industrial) and two at the disposal stage (Recycle and Disposal). These pair up to create four different routes, so users can compare outcomes for themselves.
2. Interface and Visual Design
For the visuals, I looked at a Japanese minimalist website that had won some design awards. Its generous white space and clean typography felt perfect for an environmental theme. I split the project into four pages: the homepage (index), the main interaction page (main), the conclusion page (conclusion), and the about page (about). I put a consistent navigation bar at the top of every page to make it easy to move back and forth. It's a small detail, but I think it really helps the user experience.
3. Asset Creation
I want to be clear about my workflow here. I did use ChatGPT to generate a few background images as references—mainly to get a sense of colour palettes and atmosphere. But all the main objects in the website—the T‑shirt, cotton fields, dyeing vats, washing machines, landfill scenes, and so on—were redrawn by myself in Procreate. I felt the AI‑generated images were inconsistent in style and lacked fine detail, and drawing everything myself gave me a much more cohesive look. I also adjusted all the icons, buttons, and animated elements directly in Animate.
4. Interaction Logic and Coding
For the coding, the hardest part wasn’t the syntax but figuring out how to link the logic together. When a user picks a dyeing method on the main page, I store that choice in `localStorage`. After they later choose a disposal method, I combine the two strings (like `"Industrial_Disposal"`) and jump to the conclusion page with a URL parameter. The conclusion timeline has 12 frames, with each Journey occupying 3 frames, and the program jumps to the correct starting frame based on the parameter.
To be honest, I revised this logic several times. At first I tried passing the final result purely through `localStorage`, but during testing I found that previous users' data would interfere with new sessions. Switching to URL parameters fixed that completely. Another trap was that Animate’s frame numbers start at 0—so what appears as "frame 4" on stage has to be written as `gotoAndStop(3)` in code. I kept mixing that up at first, causing all sorts of wrong jumps. Eventually I wrote out a reference sheet with the visual frame numbers and their corresponding code indices, and that got everything working.
5. Testing and Debugging
I tested all four combinations: Industrial+Disposal, Industrial+Recycle, Azo+Disposal, and Azo+Recycle, corresponding to Journey 1 through 4. I also checked navigation buttons, page turning, and automatic transitions. The most frustrating issue was when the conclusion page displayed the journeys in the wrong order. I eventually realised that the timeline arrangement didn't match the mapping in the code, so I re‑ordered the timeline to follow Journey 1→4 and fixed the problem.
Reflection
After finishing this project, my biggest takeaway is that interaction design isn't just about "click and get a reaction"—it's about letting users arrive at their own answers through the process. For example, when users choose "industrial dyeing" or "eco‑friendly dyeing", and then "recycling" or "landfill", they see completely different outcomes. That contrast is far more powerful than just telling them "you should be eco‑friendly."
Technically, I gained a much better understanding of state management. I used to think `localStorage` and URL parameters were just abstract concepts, but when you actually build something that passes data across pages, you realise how every piece of data affects the user experience. That afternoon I spent debugging the old‑data‑residue issue was tough, but fixing it really gave me a sense of accomplishment.
I also realised how important planning and testing are. If I had mapped out the conclusion page's frame order and route mapping clearly from the start, I could have saved a lot of time later. Next time, I'll draw a complete flowchart of all the jump logic before touching any code.
And about the boundaries of AI tools—I used AI to generate background references, and it did help me quickly settle on a visual direction. But when it came to the main objects that needed a consistent style and a "hand‑drawn warmth," AI just couldn't deliver, and I had to draw them myself. I think tools like that are good for getting you started, but the core creative and execution work has to be your own.
Overall, this project pushed me to grow in interactive storytelling, animation control, data handling, and project management. It also gave me a clearer sense of what I'm good at and where I need more work. If I had more time, I'd love to add an "Impact Report" feature that generates a shareable image at the end—that would make it even more engaging and shareable.
AI Disclosure
In line with the course requirements, I hereby clarify how AI tools were used in this project:
- Scope of use: Only in the early visual research phase, I used ChatGPT to generate a few background style reference images to help decide on colour schemes and compositions.
- Areas without AI involvement: All the main illustrations (T‑shirt, scenes, icons, etc.) in the website were hand‑drawn by myself in Procreate. All the interaction logic, animation sequencing, page navigation, and code were independently written by me using Adobe Animate and CreateJS.
- Role of AI: In this project, AI served as an "inspiration reference tool." It did not contribute to any final assets, code generation, or core interaction decisions. All creative and implementation work was done by me alone.
Project Link:
https://drive.google.com/drive/folders/1LF1OsCJ7ioubB_Ij5nzLzJcT3wGq-vyY?usp=drive_link
https://bignoboo.github.io/T-Shirt/
Comments
Post a Comment