Advanced Interactive Design Final Project : Completed Thematic Interactive Website

16/11/25 - 11/01/2026  (Week 8 - Week 15 )

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

Shubashini a/p Subramaniam, (0367697)

---

Table of Contents

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

---

Modules Information Booklet :

---

Lectures : -

---

Task :

Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages.

Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.

1. Creating the Content

2. Fixing the Problems that arose

Final Production :

*For best viewing, set screen size to 80%

Netlifly Link : https://gentle-toffee-bfa258.netlify.app/

Google Drive Link : https://drive.google.com/drive/folders/18YsCygQSGwY0rNlC7fXr0cGBElVslzrY?usp=drive_link

Loading page 

It takes a few seconds to go to the next page depending on the users Internet strength.

Interactive Loading Page

Users have to clicl anywhere on the page to go to the the next page as stated in the page, and is able to press the mute\unmute button for audio if wanted.

Second Loading Page

Animation will occur bring user to the homepage with a click of the button

Home Page

User will be brought to the homepage where all 5 main content pages will be available.

Training Page

User can click the next button to go to the next step, the hearts below will slowly start to gain colour indicating the next step.

What is CPR Page

User can click heart buttons that will be blinking, to help users realise its a button to pull up a page with more information on what is CPR and why it's important.

CPR Tips Page

User can click on the blank shape to see new tips, its design this way too not overstimulate the brain.

Good vs Bad CPR Page

This page is clearly seperated to show a positive side and negative side with the colour choices. There is a note saying to click me to a button to see the information provided.

---

Reflection :

Experience

Working on my Advanced Interactive Design final project was both challenging and rewarding. It was the first time I had to bring everything I learned in the course together into one functioning interactive website. At the start, I felt excited but also a bit unsure about whether I could actually combine design, interaction and technical skills smoothly in one project.

Throughout the process, I spent a lot of time planning the website structure and creating visuals that suited the theme. Using Adobe Animate was quite difficult at first because some animations did not work properly and a few features glitched while testing. There were moments when I felt frustrated, but I kept trying different approaches, revisiting my notes, and experimenting until things finally worked. Seeing my website live online in the end made me feel proud of the effort I put in.

Observations

While doing this project, I realised that designing something people will actually use feels very different from just planning it in theory. I started paying more attention to how users move through the website, which buttons they would click, and how smooth the whole experience feels for them. I also noticed that even small technical issues can really affect the overall design experience, so testing and refining became a very important part of my process.

I also observed my own working habits. Setting small goals and keeping myself organised helped reduce stress toward the end. I became more patient when solving problems, especially when animations and links did not behave the way I expected. This project showed me not only what I can do technically, but also how I handle pressure and challenges.

Findings

From this project, I learned how important it is to balance visual design with functionality in interactive work. A website can look beautiful, but if the interactions are not smooth, the user experience will still suffer. I also realised how much I have grown since the beginning of the course, especially in my ability to troubleshoot issues instead of giving up when things go wrong.

At the same time, I became more aware of areas I still want to improve, such as responsive design and creating smoother, more polished animations. Overall, this project helped me build confidence as a designer and gave me a clearer understanding of what interactive design really involves in real-world projects.