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

Task 2: Interaction Design Planning and Prototype

• 30% individual 
• Week 05 – Week 08 

1. ASSIGNMENT BRIEF

• Task Objective / Description
• We will need to develop our visual designs while planning interactive elements and features for our websites. Unlike static designs, interactive websites will require animations we must include animation examples or references in our plans alongside layout visuals. We can choose to create original animations or use existing references to showcase on our concepts.
• Creative Figma prototype for this assignment (include animation)

• 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.)

2. PROCESS

At the beginning of this assignment, I started with the prototype I proposed in Assignment 1. However, after receiving feedback from the lecturer, I was told that the design felt too basic and lacked interactivity—making it look more like a standard website rather than an interactive one. Based on this feedback, I decided to change the overall concept and redesign the website.

Figure 2.1 Original Proposed Website (Not Used)

I then began developing a second version of the layout. While the structure had some improvements compared to the first version, the overall design still lacked consistency—particularly in terms of shapes, typography, and visual harmony. So, this version was also not used in the final submission, though I used it as a base structure to build the next design.

Figure 2.2 Website Layout Version 2 (Not Consistent in Style)

Taking the feedback from the previous two versions, I focused on creating a more cohesive layout. I refined the design with a stronger emphasis on consistency and visual identity. I also sought new inspiration and created a mood board to guide my design direction. One major decision I made was to use a single font throughout the website for a cleaner, more unified look.

Main Reference Website / Research: [DON PROD - Click Here]

Other Interaction Research 

• 1. For Schedule Page : CLICK HERE (Hover effect on the list at the bottom part of the page)

Figure 2.3 Recording - Example For the Animation Effect

• 2. For News Page : CLICK HERE (Cloth-like element that turns as the user scrolls )

Figure 2.4 Recording - Example For the Animation Effect

• 3. For About Album Page : CLICK HERE (Auto-sliding content interaction)

Figure 2.5 Recording - Example For the Animation Effect

Mood Board / Research:

Figure 2.6 Mood Board

With this new research and design direction, I developed two sets of sketches for the interactive layout. The main structure remained the same between them, but there were differences on the homepage and about album pages.

Figure 2.7 Version 3 Sketch (Interaction / Layout)

Figure 2.8 Version 3 Figma Prototype

Figure 2.9 Version 4 Sketch (Interaction /Layout - FOR Home Page/About Album Page)

Figure 2.10 Version 4 Figma Prototype

Versions 3 and 4 evolved from the earlier concepts. However, after another round of feedback from the lecturer, I realized that I had overlooked an important detail—I had not included the band logo or album logo in any of the designs. This was a major oversight, and I plan to revise the final version to include those key branding elements.

3. FINAL OUTCOME

Figma Prototype Link - CLICK HERE

Figma Link - CLICK HERE

4. WALKTHROUGH VIDEO

Figure 4.1 Walkthrough Video

5. REFLECTION

For this assignment, I to create a working prototype with animation in Figma. It took me some time to figure out the layout since my first version wasn't that interactive. As I was progressing and thinking about what I could change, I realized that the website I had design and created wasn't very interactive either. So, I referred to several websites to gather inspiration and finally  get some idea on it. However This assignment allowed me to explore more on my UI/UX skills and better understand what makes an interactive website. While at the same time it also reminded me of the importance of keeping things consistent throughout the design.