INTERACTIVE DESIGN - TASK 4

FANN WONG JING EN｜0382237

Design Principles | Bachelor of Design (Honours) in Creative Media

GCD60904 Interactive design

---

TABLE OF CONTENT

MIB      Instruction      Task 4       Reflection

---

MODULE INFORMATION BRIEF (MIB)

---

TASK 4

- Previous and After Modification -

Based on the feedback collected from user testing and peer review, several improvements were identified to further enhance the usability of the website.

1. Theme Consistency

Previous - Although each theme had its own visual style, some interaction behaviours such as task management and navigation differed between themes.

After (Proposed Improvement) - Task creation, checkbox behaviour, timer functionality, and navigation flow will be standardised while preserving each theme’s unique appearance.

2. Interaction Feedback

Previous - The website did not provide interaction feedback after users clicked buttons or completed tasks.

After (Proposed Improvement) - Optional sound effects and interaction feedback will be added for button clicks and task completion.

---

- Characters -

I used Procreate to create characters for different themes while maintaining a consistent visual style. 

Different accessories and color palettes were designed to represent each study theme. For example, a blue cap was used for the beach theme, while warmer colors and a party hat were used for the cafe theme. 

---

- Solution -

Based on the feedback received from both user testing and peer review, several improvement solutions were proposed.

Solution 1 – Standardize Interactions Across Themes

Task creation, checkbox behavior , timer functionality, and navigation flow will be standardised across all themes while preserving each theme’s unique visual appearance. This consistency will reduce users’ learning effort and provide a smoother experience when switching between themes.

- Beach Theme before and after redesign -

- Cafe Theme before and after redesign -

- Picnic Theme before and after redesign -

Solution 2 – Add Optional Interaction Feedback

Optional sound effects and visual feedback will be added for button clicks and task completion. These features will provide immediate confirmation of users’ actions, making the website feel more responsive and engaging.

---

- Demo Video -

The video demonstrates that all major features are functioning correctly while providing an overview of the complete user experience.

---

- Webpage Raw File -

The complete source code of the website has been included as part of the final submission.

HTML files  

CSS stylesheets

JavaScript files

Download Link - https://drive.google.com/drive/folders

---

Reflection

The feedback collected from user testing and peer review helped me identify several usability issues. Although the different themes were visually engaging, some actions behaved differently across the pages. I therefore standardised important interactions such as adding tasks, completing tasks, changing the timer, and navigating between themes. This made the overall experience more coherent and reduced possible confusion when users moved from one scene to another.

I also learned the importance of providing immediate interaction feedback. Sound effects, visual animations, and short confirmation messages were added to inform users that their actions had been successfully completed. At the same time, each theme retained its own visual reward—for example, picnic food appearing after task completion or beach objects being discovered. This allowed the website to remain playful while improving its usability.

During the development process, I faced challenges in combining different HTML, CSS, and JavaScript structures into one consistent system. Testing every theme was necessary because a feature that worked correctly on one page did not always work in the same way on another. This process improved my understanding of reusable JavaScript functions, consistent interface patterns, responsive styling, and the importance of testing the complete user journey.

Although this was assigned as a group project, all the design refinement, coding, interaction improvements, testing, documentation, and final website development presented in this submission were completed independently by me. I was responsible for the entire working process and the final outcome shown in this blog.