Advanced Interactive Design - Task 2: Interaction Design Planning and Prototype

19.05.2025 - 13.06.2025 / Week 5 - Week 8

Teo Mei Hui / 0358315

Advanced Interactive Design / Bachelors of Design (Honors) in Creative Media / Taylor's University

Task 2: Interaction Design Planning and Prototype

---

CONTENTS

1. Instructions
2. Task
3. Feedback
4. Reflections

---

INSTRUCTIONS

---

TASK

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements:

• Walkthrough Video presenting the plan and showing the animation examples and/or references.
• Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)

Process

First, I started gathering all the necessary images and elements. I searched for suitable images on the internet, and illustrated the UI elements in Adobe Illustrator. The UI elements were mostly inspired by Black Widow's weapons and S.H.I.E.L.D. themes.

Then, I started creating the prototype in Figma. The main struggle I faced was getting good quality images that matches with the overall theme + narration.

After completing the prototype, I created the flowchart in Miro.

References

I mainly took reference / inspirations from these websites:

https://thefwa.com/awards/page/1/

https://thebluedesert.com/ 

https://www.ibi.cash/

Flowchart

Figma Prototype

Presentation Slides

Task 2: Interaction Design Planning and Prototype by TEO MEI HUI

Presentation Video

---

FEEDBACK

Week 6:

• Layout too messy and inconsistent. Take a look at the good websites and notice how there's a certain consistency, the layout doesn't fly around.

---

REFLECTIONS

This task allowed me to explore how storytelling, emotion, and design come together to create a meaningful user experience. Since I chose a topic I’m genuinely interested in — Natasha Romanoff’s life — I stayed more engaged and motivated throughout the process. It felt more than just designing a website; it felt like building a tribute to her character.

As I planned each chapter, I focused not only on the storyline but also on the emotional pacing — thinking about what the user should feel and when. I spent a lot of time illustrating and choosing visuals that matched the tone of each chapter. Finding the right images took patience, especially making sure they were high-quality and consistent with the cinematic theme. It was important that everything matched visually — from the color scheme to the style — so the experience would feel cohesive.

Looking through award-winning interactive websites really inspired me. I noticed how even subtle visual elements and movement could make a moment more powerful. This made me more intentional with my choices, and helped me see how design can tell a story beyond words.

Overall, this process taught me that building an interactive experience means balancing creativity, emotion, and consistency — and that the details, no matter how small, make all the difference.