Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

25.04.2025 - 16.05.2025 / Week 1 - Week 4

Teo Mei Hui / 0358315

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

Task 1: Thematic Interactive Website Proposal 


CONTENTS

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

INSTRUCTIONS




TASK

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.

Ideation

We were first tasked with thinking of three potential topics for our thematic interactive website. I came up with the following ideas based on my personal interest:
  1. The 12 Horoscopes
  2. Life of Black Widow (MCU)
  3. My Little Pony: Friendship is Magic
After showing Mr. Shamsul my ideas, he said I could proceed with either The 12 Horoscopes or Black Widow. I decided to choose Black Widow as I thought it would be more interesting and fun.

Process

Concept
  • The interactive website explores the life journey of Black Widow, a central yet often underappreciated figure in the MCU. 
  • Through themed chapters, users will scroll, click, and explore Natasha’s transformation — from a weaponized orphan to a self-sacrificing hero.
  • This cinematic, emotionally driven website will combine minimalist design, interactive storytelling,  transitions, and subtle animations to keep users engaged.
  • The site’s goal is to deepen user connection with Natasha’s story by allowing them to interactively experience key emotional, moral, and action-driven moments.
Chapters

Chapter 1: The Broken Doll
Theme: Loss of Innocence
Key Content:
  • Childhood in Russia
  • The Red Room training program
  • Psychological manipulation, sterilization, and the origin of her spy identity
Chapter 2: The Defector
Theme: Redemption Begins
Key Content:
  • Budapest with Hawkeye
  • Choosing to join S.H.I.E.L.D.
  • First steps away from her dark past
Chapter 3: Spy Among Heroes
Theme: Trust and Identity
Key Content:
  • Integration with the Avengers
  • Spy background vs genuine friendship
  • Battle of New York, working with Tony, Steve, and Bruce

Chapter 4: Haunted Past
Theme: Guilt & Humanity
Key Content:
  • Flashbacks in Age of Ultron
  • Struggles with her past and Bruce
  • Her sense of “monstrosity” and shame

Chapter 5: Family and Forgiveness
Theme: Healing and Connection
Key Content:
  • Events of Black Widow (2021)
  • Reunion with Yelena, Melina, and Red Guardian
  • Destroying the Red Room
  • Finally forgiving herself

Chapter 6: The Final Act of Love
Theme: Sacrifice
Key Content:
  • Vormir mission with Clint in Endgame
  • Choosing to die to save the universe
  • Heroism in its purest form

References

I looked for references online based on what I envisioned for my website to look and feel like. I'm leaning towards a minimalistic, cinematic, and darker style.


Moodboard

I looked up iconic pictures of Black Widow for inspiration, these can be considered to be used as visual elements/background in the website. For the color palette, it is based on black widow's character design such as her hair, outfit and weapons. Lastly, I went on Google Fonts and picked out Saira font for heading and Montserrat font for the body texts, as I thought they were the most suitable.


Flowchart

Then, I created a flowchart of how users can interact with the website.


Wireframe

Lastly, I created the wireframe in Figma. 




Final Proposal



FEEDBACK

Week 2:
  • The Black Widow and 12 Horoscopes ideas are both interesting.
  • For the 12 Horoscopes, maybe can focus the content on one specific area, for example talk about the gemstones/birthstone for each horoscope. 
  • For the Black Widow idea, maybe can talk about Black Widow from the comics as well. If based on the movies also okay.
  • Both are okay, choose either one topic.

Week 4: 
  • Concept is not very clear and please improve on your wireframe. 
  • The layout is nor very organized and very rough.


REFLECTIONS

I'm really happy that I got to work on a topic I’m genuinely interested in. It kept me motivated throughout the project and made the process feel more personal and engaging. For this task, I learned about how to tell a story in a more cinematic and emotional way, using interactive design elements to guide users through a character’s journey. I also explored many award-winning thematic websites, which inspired me to think more creatively about how design, motion, and storytelling can work together to create an immersive experience. This project pushed me to see websites not just as functional spaces, but as storytelling platforms. It was a fun experience.

Comments

Popular Posts