Week 1｜Project Kick-off & MLO 2 Brief Understanding
Advanced Theory and Practice of Interactive Design
1. Understanding MLO 2｜Thematic Interactive Website Proposal
In Week 1, we were introduced to the main coursework for this module:
MLO 2 – Thematic Interactive Website Proposal.
The task requires us to design a theme-based interactive website that engages users through multimedia elements such as animation, sound, video, and interactive graphics.
Unlike traditional websites that focus on delivering information, this project emphasizes:
User engagement through interaction and exploration
A thematic interactive website is not just a platform for content display, but a designed experience where users actively participate, navigate, and respond to what they see.
Theme 1｜Kids’ Safety Guardian
Category: Educational
Concept
This concept aims to transform traditional children’s safety education into an interactive learning experience.
Instead of passively receiving information, children can explore and make decisions within simulated environments, helping them understand potential dangers in daily life.
The core goal is:
to help children build safety awareness through experience rather than memorization
Experience Design
The website will include interactive scenarios such as:
-
Home environments (kitchen / bathroom)
Users can click on objects (e.g., kettle, sockets) to trigger animations and safety feedback -
Traffic safety mini-game
Users make decisions based on traffic lights and road conditions
Interaction Strategy
- Correct actions → positive audio and visual feedback
- Incorrect actions → gentle guidance instead of punishment
- Drag-and-drop game (sorting safe vs dangerous items)
Visual Direction
- Bright, high-saturation cartoon style
- Clear information hierarchy
- Large interactive elements suitable for children
Theme 2｜Eco-Footprint Journey
Category: Lifestyle / Educational
Concept
This concept uses a timeline-based narrative to visualize how daily human behaviors impact the environment.
Core transformation:
turning abstract environmental data into a visible and interactive experience
Experience Design
-
Daily journey (morning to night)
User choices (transport, energy, food) affect environmental conditions -
Future comparison mode (What If)
Users can switch between different lifestyle scenarios to observe changes
Interaction Strategy
- Scroll-driven storytelling
- Click interactions that dynamically change the environment
- Data represented through visual elements instead of text
Visual Direction
- Flat design style
- Soft gradients
- Dynamic environmental transitions (polluted → green)
Theme 3｜The Vanishing Craft
Category: Cultural
Concept
This concept presents endangered traditional crafts through a digital museum experience.
Instead of only viewing content, users can actively participate in simulated crafting processes.
Core goal:
transforming cultural presentation into immersive interaction
Experience Design
-
Virtual workshop
Users explore tools and materials in a simulated environment -
Craft simulation
Users mimic crafting actions (e.g., tracing patterns) using mouse interaction
Interaction Strategy
- Gesture-based interaction (mouse movement simulation)
- Click-to-reveal process details
- Ambient sound to enhance immersion
Visual Direction
- Dark background to highlight content
- Museum-style lighting
- High-quality visual assets
Theme 4｜Nike Air Interactive Lab
Category: Product Launch / Brand Engagement
Concept
This concept is designed as an interactive product launch experience for a new sneaker series by Nike.
Instead of presenting the product through static images or promotional videos, the website allows users to:
explore, customize, and experience the product through interaction
The goal is not just to “show the product”, but to create a digital environment where users feel connected to it.
Target Audience
Teenagers and young adults
Sneaker enthusiasts
Brand-focused consumers
Experience Design
① 3D Product Exploration
Users can interact with the shoe in a virtual space:
Rotate and zoom the product
Click on different parts (sole, fabric, cushioning)
Reveal material details and technology
👉 This transforms product understanding into an exploratory experience
② Customization Mode（Design Your Own）
Users can personalize the shoe:
Change colors
Switch materials
Preview designs in real time
👉 Adds user participation and emotional attachment
③ Performance Simulation
A dynamic environment where users can test the product:
Running track simulation
Jump / movement animations
Visual feedback (speed, impact, cushioning response)
👉 Instead of telling users “this shoe is good”,
it allows them to feel the performance visually
Interaction Strategy
Hover / click → reveal hidden features
Drag interaction → rotate product
Real-time feedback → immediate visual updates
Smooth transitions → maintain immersion
Visual Direction
Dark background with neon highlights (tech-focused aesthetic)
High-contrast lighting to emphasize product form
Motion-based transitions
3. Research & Inspiration
For further research, I plan to study interactive website examples from
FWA (Favourite Website Awards).
I will focus on analyzing:
- How information hierarchy guides users
- How scrolling and animation control pacing
- How interaction leads users naturally through the experience
These references will inform my design approach beyond visual aesthetics.
4. Reflection｜Key Takeaways
At this stage, I realized:
A successful interactive website is not defined by how much it presents, but by how effectively it encourages exploration.
Rather than focusing only on visuals, I need to consider:
- How users enter the experience (onboarding)
- How they navigate through it (interaction flow)
- How they respond to it (feedback system)
5. Next Steps
In the next phase, I will begin refining the proposal by:
- Selecting the strongest theme based on interaction potential
- Defining the target audience and context
- Developing information architecture (IA) and site structure
- Creating a concept board
-
Experimenting with interaction prototypes using
Adobe Animate
Comments
Post a Comment