Advanced Interactive Design Task 1: Thematic Interactive Website Proposal

22/09/25 - 22/10/25 (Week 1 - Week 5 )

Advanced Interactive Design / Bachelor in Design (Hons) in Creative Media / Taylor's University

Shubashini a/p Subramaniam, (0367697)

---

Table of Contents

1. Lectures
2. Module Information Booklet
3. Task
4. Feedback
5. Reflection

---

Modules Information Booklet :

---

Lectures : -

---

Task :

Instructions :

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:
 
1.     A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,
2.     Movie promotion
3.     Game release promotion.
4.     Gallery/Museum exhibit launch
5.     Band/Artist latest release.

Or anything else you have in mind (subject to the module coordinator’s approval)

Submission
1.     Completed UI/UX proposal document.
2.     All processes (concept, wireframes, mood board, flow chart)

Week 1

We had a brief introduction to the module, Mr.Shamsul introduced the module and our first task in class. He also showed previous students final project to help us get an idea on what is to be expected from our work. He also asked us to come up with a few ideas on what to make our thematic website on by the next week class.

Week 2

I showed sir, my ideas and he liked my second and third idea but ultimately went for my third idea, "Save A Live: Interactive CPR Guide".

Idea Slide :

Week 3

Sir started class with showing us some cool websites and their animations and then proceeded with class. This week sir officially introduces Adobe Animate to us and we did a few exercises. I found it quite challenging as it kept on crashing, having me to redo my work multiple times. I showed sir my brief sketches of the wireframe for my website, he quoted,"You show me work like this means, don't question when I give you a B". Straightforward but I knew I has to look at more websites to get a better understanding on what makes a good website.

Week 4

I started researching different websites to gain insight on what makes a good layout and what doesn't. In class Mr.Shamsul briefly explained to us what not to do when making a wireframe. He said we needed to design according to the design principles we learned in the semesters before.

I started getting used to using figma, and created multiple versions of my wireframe:

Figma (Wire Frames) :

I also wanted to create a more clean wireframe, since sir told us we have to keep it as simple as possible :

Sir also instructed to make a flow chart showing the navigation of our website :

Miro (Flow Chart) :

Website Proposal :

Thematic Website Proposal by Shubashini Subramaniam

---

Reflection :

Throughout the first few weeks of Advanced Interactive Design, I learned the importance of planning, research, and user engagement in creating an interactive website. After brainstorming ideas, I chose “Save A Life: Interactive CPR Guide” for its educational and social impact. Although I faced challenges using Adobe Animate and received direct feedback from Mr. Shamsul about improving my wireframes, it motivated me to refine my work and pay closer attention to design principles. Researching different websites and creating wireframes in Figma, along with a navigation flow chart in Miro, helped me better understand effective layouts and user experience. Overall, these weeks taught me to value constructive feedback, perseverance, and the balance between creativity and functionality in interactive design.