Advanced Interactive Design / Task 2

on
20/10/2025 - 16/11/2025 (Week 4 - Week 8)
Wee Jun Jie / 0375271 
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Planning & Prototype


 INSTRUCTIONS 




Week 5
Working on three different wireframes

Week 6
Designed the final landing page with:
  • Glow gradients
  • Central hero image
  • Blurred glass buttons
  • Fenty-style typography
Constructed the Quiz Page:
  • 3 questions
  • Each with 3 visual answer cards
  • Added icons + title + short description for each option
Finalized quiz logic:
  • Q1: Lighting preference
  • Q2: Finish preference
  • Q3: Makeup mood / style

Week 7
Designed the loading transition scene after quiz submission.
Decided not to use traditional loading icons instead:
  • Created a “processing your glow profile” message
  • Added rotating Fenty Beauty Diamond Bomb 3D look
  • Generated product assets using AI:
  • Image-to-video rotation
  • Created 6s looping clip
  • Soft cinematic lighting to match Fenty style.
Sentences created for loading:
  • “Analyzing your glow profile…”
  • “Matching highlight zones…”
  • “Preparing your personalized face map…”

Week 8

pages edited version - JPEG

I continuously refined my design to ensure that the navigation bar aligned seamlessly with the overall mood and aesthetic of the website. Each adjustment helped create a more cohesive and intuitive user experience, balancing functionality with visual harmony.


Presentation Slide

Presentation Video
 REFLECTION 
Experience
During Task 2, I focused on collecting animation references and building a prototype using Figma. This stage allowed me to explore how motion and interaction can elevate the user experience of a website. Working in Figma helped me visualize the layout and flow of the site while experimenting with animated transitions and interactive components. It was a hands-on process that deepened my understanding of how design and functionality intersect.
Observation
As I explored animation references, I noticed how subtle movements—such as hover effects, button feedback, and page transitions play a crucial role in guiding user attention and creating a more immersive experience. These details, while often overlooked, contribute significantly to the overall feel of a website. I also observed how different animation styles can evoke different moods, helping to reinforce the theme and personality of a site.
Findings
This task highlighted the importance of prototyping as a bridge between concept and execution. Figma proved to be a powerful tool for simulating interactions and testing design ideas before development. By combining animation research with interactive prototyping, I was able to refine my design decisions and ensure that each element served a clear purpose. This process not only improved my technical skills but also strengthened my ability to think critically about user experience and visual storytelling.