Advanced Interactive Design / Thematic Website Design Proposal & Final Website

Thematic Website Design Proposal / DST60804 / Advanced Interactive Design

-

Low Xin Er / 0374596 / Bachelor of Design in Creative Media

Advanced Interactive Design / Thematic Website Design Proposal

Lecture: Mr SHAMSUL

---

MODULE INFORMATION

---

REQUIREMENT

Description

Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that it is a movie, the site can simulate movie universes offering virtual tours through time and space, or any other subject previously created in the movie. The aim of any such site is to keep the user engaged in the medium through interactive exploration.


Requirements

Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:

• A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
• Movie promotion
• Game release promotion.
• Gallery/Museum exhibit launch
• Band/Artist latest release.
• Or anything else you have in mind (subject to the module coordinator’s approval)

Submission

• Completed UI/UX proposal document.
• All processes (concept, wireframes, mood board, flow chart/site map)
• Prototype

---

FINAL

Final Website Link

Document Drive Link

PROGRESS

Week 1 (April 23, 2026)

The professor explained the goals and requirements of our assignment by showcasing previous students' work: creating an animated website. There are few restrictions on the theme; it can cover various fields, but the content must not be too superficial or uninteresting.

We need to prepare three themes and ultimately choose one to develop. Task 1 requires an idea proposal, including the theme concept, mood board, and references. I have a few ideas:

Idea Draft

1. Crop Circles

I previously did a report specifically researching crop circles, so I'm not only interested in this topic but also quite knowledgeable about it. Therefore, I think having a solid foundation of information will allow me to focus more on designing the website rather than researching the data.

2. Chinese Taro Mooncakes

Since my family used to make mooncakes, I'm quite interested in this topic. I can research the origin, history, and methods of making these mooncakes.

The three themes can be revised and adjusted before week 4. Before that, there will be an exercise assignment to learn Adobe Animate.

Week 2 (April 30, 2026)

Advanced Interactive Design by xiner low

After discussing with the professor, I ultimately felt that the taro mooncake theme was the most interesting and visually appealing, and the professor thought both the crop circle and taro mooncake themes were excellent. I started planning the specific style and presentation of this theme. I wanted it to be in the style of a cooking game, cute and heartwarming, allowing users to experience and understand taro mooncake.

Week 3 (May 7, 2026)

Alongside completing our class exercise for Adobe Animate to get familiar with motion design, I started sketching the visual assets for the website. I decided to aim for a style heavily inspired by Cooking Mama—using thick outlines and a warm pastel palette to give it a cozy, healing vibe. I spent time planning how to represent the mooncake layers and cooking tools visually, ensuring they look chunky, cute, and inviting.

Week 4 (May 14, 2026)

This week, I focused on the site architecture and user flow. I made a firm design decision: the entire website will be 100% click-based with zero scrolling. I feel that a pure click-based interaction model is far more suitable for this cooking game theme, as it forces the user to actively "participate" in the baking steps rather than just mindlessly scrolling through information. I mapped out a linear 5-page structure to guide the user from the kitchen entrance to the final cultural card.

Week 5 (May 21, 2026)

With the user flow established, I moved into the pre-production phase. To make the development stage efficient and polished, I decided to use a unified, fixed kitchen background where only the central workbench elements swap out during the game. I also mapped out repetitive, universal feedback loops—like making elements "squash and stretch" dynamically when clicked. This repetition will keep the interactive experience highly responsive and visually tight without cluttering the screen.

taro_mooncake_proposal.pptx by xiner low

Week 6 (May 28, 2026)

I began translating my layout blueprints into a digital draft using Figma. It is important to note that the text and imagery in this current prototype are not fully perfected yet, as I plan to formally flesh out the detailed cultural descriptions and final artwork later. For this stage, my main objective was to test and demonstrate the "walkthrough flow" of the website, making sure the step-by-step navigation feels logical and smooth from a user's perspective.

Week 7 (June 4, 2026)

This week was all about polishing the high-fidelity UI components. I adjusted the primary color scheme to a soft taro purple and warm cream yellow to match the pastry theme. I also decided to change all text elements to English to ensure the interactive experience is accessible to a broader audience. While the text copy remains a draft placeholder for now, the functional button triggers are fully set up so anyone can click through the entire game loop seamlessly.

Week 8 (June 11, 2026)

The design and prototyping phase is officially wrapped up. I spent this week doing a final review of the Figma prototype to ensure all "On-Click" navigation pathways work flawlessly. This draft serves as a perfect architectural blueprint for my presentation to the professor. Moving forward, I am excited to take this exact user flow and start building the real, live website using code and custom animation tools.

🎮 Interactive Figma Prototype (Draft)

Open Prototype Layout

Week 9 (June 18, 2026)

Before jumping into coding and animation, I spent this week kickstarting the full UI/UX design process in Adobe Illustrator. I established the overall visual tone, focusing on a cozy, healing Cooking Mama style. I designed the core visual assets, including the customizable interactive buttons ("Start Cooking", "Back", "Next"), ingredient cards, and the central chef mascot, ensuring all vector graphics had thick, charming outlines and warm pastel coloring.

Week 10 (June 25,2026)

I continued dedicating a second full week to refining the detailed UI/UX layouts in Illustrator. Designing these visuals required a significant amount of time, as I needed to craft the entire kitchen background, the step-by-step dough mixing graphics, and the night-mode lantern scene for the cultural section. I carefully organized, grouped, and layered every vector element so they could be seamlessly imported into animation software without losing quality.

Week 11 (July 2 ,2026)

With two solid weeks of UI/UX design wrapped up, I imported all my Illustrator assets into Adobe Animate and organized them in the Library. I set up a structured multi-layer timeline—separating background elements, character animations, UI components, and text frames. I then built the Landing Page (Page 1), configuring the spinning giant taro mooncake and scripting the interactive "START COOKING!" button trigger to transition the scene forward upon being clicked.

Week 12 (July 9,2026)

I developed both the Ingredients Overview Page (Page 2) and the Mixing Interaction Page (Page 3). For Page 2 ("The Secret Ingredients"), I set up interactive cards showcasing Lipu Taro, Pure Lard, Salted Egg Yolk, and Soft Flour with click navigation. For Page 3, I created a hands-on mixing minigame where users click ingredient modules to add them into a bowl, triggering a celebratory "WELL DONE!" banner once completed.

Week 13 (July 16,2026)

I implemented the Recipe Steps Page (Page 4), featuring a dynamic interactive recipe card system under "Recipe Unlocked". I set up clickable tab options on the left for the six baking stages (e.g., Make the Pastry, Wrap and Shape, Bake and Serve). When a user clicks a step button, the right-hand panel instantly updates with specific instructions and mini info tags detailing the traditional flaky spiral technique.

Week 14 (July 23,2026)

The focus of this week was the final scene, the Cultural Heritage Page (Page 5), titled "Moon Festival · Chaoshan Mooncake Culture". I laid out the festive night-mode backdrop featuring traditional hanging lanterns and the smiling chef mascot. The scene highlights four narrative sections detailing Mid-Autumn Festival origins, Chaoshan pastry identity, taro symbolism, and Gongfu tea pairing rituals, along with a "Home" button to loop back to the landing page.

Week 15 (July 31,2026)

The final week was spent testing the interactive flow, fine-tuning animation keyframes, and ensuring smooth cross-browser compatibility. I verified that all "On-Click" navigation triggers across all 5 pages operate seamlessly without glitches. With pure click-based navigation, charming custom vector visuals, and coherent cultural storytelling, the interactive animated Chaoshan Taro Mooncake website is officially complete and ready for submission!

Website Link

Document Drive Link

REFLECTION

Looking back on this 15-week design and development journey, transforming an initial concept into a fully interactive, animated website for Chaoshan Taro Mooncakes presented both rewarding breakthroughs and technical challenges. During the early UI/UX design phase (Weeks 9–10), the primary hurdle was spending extensive time in Adobe Illustrator crafting custom vector assets such as the chef mascot, ingredient cards, and kitchen scenes while ensuring every element was properly layered and structured for animation compatibility. The transition into Adobe Animate revealed further complexities; managing a multi-layer timeline for a pure click-based navigation model required precise keyframe scripting and dynamic visual feedback (like the "WELL DONE!" dough-mixing interaction) to keep user engagement smooth without relying on scrolling. Additionally, during cross-browser testing in Week 15, attempts to implement background music encountered persistent Safari autoplay restrictions and audio context issues. Rather than compromising user experience with broken audio elements, I strategically pivoted to focus entirely on clean visual feedback and seamless click triggers. Ultimately, navigating these technical trade-offs refined my problem-solving abilities, deepened my mastery of UI/UX asset preparation, and resulted in a cozy, charming, and polished interactive cultural experience.