Labels

Advanced Interactive Design - Task 2 Proposal

20/04/2026 - 14/6/2026 (Week 1 - Week 8)
Anggia Tsani Rachmadiyanti, (0368487)
Advanced Interactive Design DST60804 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task 2 - Proposal & Prototype

 CONTENT LIST 

 Module Brief: 


     Lecture Notes 

    Please refer to Exercises page for lecture notes


     Task 2: Thematic Interactive Website Proposal 

    Requirements: 

    We are required to propose and create a thematic interactive website proposal with the topic of our choice that can be based on:

    • A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
    • Movie promotion
    • Game release promotion
    • Gallery/Museum exhibit launch
    • Band/Artist latest release. 
    • Or anything else you have in mind (subject to the module coordinator’s approval) 

    Description: 

    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.

    Submission:

    • Completed UI/UX proposal document. 
    • All processes (concept, wireframes, mood board, flow chart/site map) 
    • Prototype

    Draft Ideas...

    To start off, I chose Movie Promotion as my topic. However, I first came up with 3 ideas of the movie plan, which are some of the good movies i've watched in terms of visuals:

    #Idea 1 - "Challengers" Movie Website Promo
    #Idea 2 - "Inside Out 2" Movie Website Promo
    #Idea 3 - "F1 The Movie" Movie Website Promo
    #Idea 4 - "Enola Holmes" Movie Website Promo

    I did researches and ideas of all the 4 onto Figjam boards:

    (Fig. 1.1) - Week 1, Figjam of my 4 movie promo ideas, 24/4/2026

    (Fig. 1.2) - Week 1, Figjam of F1 Educational Guide website idea, 24/4/2026

    Click: Figjam Link

    (Fig. 1.3) - Week 1, Figjam of my ideas, 24/4/2026

    I decided to go with "F1 educational beginner guide for newbies", mainly targeted for kids, young teenagers who are new to f1. I chose this because to me, I personally am an f1 fan, and i experienced myself when i first started following f1, i find all the new terms difficult and alot to understand, where i had to search one by one of the terms in f1 meaning on google. Therefore, I want to make a website that's fun and educational for new f1 fans to learn more.

    This is my draft f1 website content flow:

    (Fig. 1.4) - Flowchart draft for the f1 website

    Below is my draft Document which I did on the contents, informations to put in the website for each page. I also did researches about the contents to put:

    (Fig. 1.5) - Docs of the draft contents & info to put in the website


    Task 1 Website Final Proposal Canva Slides:

    (Fig. 2.1) - Canva Slide Task 1 Proposal

    F1 EDUCATIONAL WEBSITE TASK 1 - PROPOSAL by Anggia by Anggia Tsani.R


    Website References:

    1) Hello Monday

    Hello Monday was not the strongest website inspo, but their visual brush/sketch doodle bnw style was near to my chosen proposed direction for the F1 website..

    (Fig. 3.1) - Website reference 1


    2) Mariano Pascual

    This portfolio website was really catchy and fun to browse through with many clickable buttons in a very fun and playful style. Each hover has an animation to the button and leads to many different sections of the pages.

    (Fig. 3.2) - Website reference 2


    3) The Boat

    This website theme is a stroytelling flowing website as you scroll. Theres constant motion of the background and also cards come in with transitions, making the whole website feel alive. What I loved about this website is that even with just little / monochrome colours, all visuals are strong using handrawn brush visuals throughout. It's overall only scroll-based digital storytelling.






    (Fig. 3.3) - Website reference 3



    My F1 Website Draft Wireframes:

    (Fig. 4.1) - Website Wireframe

    (Fig. 4.2) - Website Wireframe

    (Fig. 4.3) - Website Wireframe

    However, after this I did some changes to the figma, I decided not to put the ending "Now You're Ready" page since not every user will go through the same flow of the pages, and it's quite unnecessary. For the F1 Basic Key terms, I decided to place them all into interactive clickable F1 steering wheel interface screen like this:

    (Fig. 4.4) - process on Figma

    Figma Working File Link & Progress (Week 6-7):

    Link:https://www.figma.com/design/pvOyxL9bDnujGRkg73joyT/Adv-Interactive?node-id=0-1&t=FrDbP7Ycu46AoEcS-1

    Following the wireframes draft sketch earlier, I started making the pages work in Figma using slight animations using after delay, components, buttons and variants.

    I made some slider arrows, hover animations to make it more engaging. To make this there were alot of thinking and technical stuffs to think of. I have made alot of assets in this prototype, making sure the whole website works cohesively and good flow.

    (Fig. 5.1) - Screenshot of Figma prototype progress

    (Fig. 5.2) - Screenshot of Figma prototype progress

    (Fig. 5.3) - Screenshot of Figma prototype progress

    (Fig. 5.4) - Screenshot of Figma prototype progress


    (Fig. 5.5) - Screenshot of Figma prototype progress
    Process of drawing each assets:

    For the website, each and every visuals are self-drawn digitally on Procreate ipad, before transferred to figma. 

    Following my sketch style visual direction, for this website I really want it to be a special one, so I dedicate my time on drawing one by one, each of all the visuals (including the cars, steering wheels) digitally on my ipad myself, using a sketchy doodle style. All the images that supports the information on the website are drawn digitally by hand on Procreate which I did on my Ipad. After finishing all the assets of the visual elements and drawings, I vectorised some of them in Figma and exported all as SVG so that it is not blurry..

    (Fig. 6.1) - drawing the illustrations assets

    (Fig. 6.2) - drawing the illustrations assets


    Fonts & Colours Used:

    (Fig. 6.3) - Colour Palette & Typeface
    Figma Prototype Link:

    (Fig. 7.1) - Embedded Figma Prototype Link


    Figma Working Preview Prototype here:

    https://www.figma.com/proto/pvOyxL9bDnujGRkg73joyT/Adv-Interactive?node-id=1-8&t=ylYfwgRhs2uhrPFM-1


    Figma Prototype Screen Record Walkthrough:

    (Fig. 7.2) - Screen recording video of working prototype walkthrough video, Figma



     Feedbacks 

    Week 7:
    General Feedback: Mr Shamsul said continue doing our figma, make sure the art styles are placed into the canva for our proposal and ideas/references.
    Specific Feedback: Mr Shamsul said my figma is good so far but he gave me some stuff to edit:
    • Make the arrow navigation just 2 lines, 3 is too much
    • At the end of each page, dont put an arrow to continue to the next subpage, this is to indicate the user that they can move to the next page by clicking on the nextpage from the navigation bar ontop.
    • For the car and tyres main page, add 2 buttons choice : Car parts and Tyres, so the user can choose and click, rather than just click continue:
    • for the types of flag, for each flag page, add at the bottom a carousel nav of all the 8 flags, so the user will know how many flags are there:

    Week 8:
    Specific Feedback: Mr Shamsul said my Figma is all good and I can start doing the website on animate next week

     Reflections 

    Experience: 

    Throughout this project, I experienced the full process of planning a digital interactive website, from brainstorming ideas to creating visual presentations and prototypes. I started by researching F1 websites and identifying how information is usually presented. Then, I planned my own direction by focusing on making the website beginner-friendly, visually exciting, and easy to understand.

    I also learned how to organize my ideas clearly through Canva slides by presenting the concept, target audience, art direction, animation ideas, and wireframe sketches. After that, I translated the ideas into a more detailed interactive prototype using Figma. This process helped me understand how important layout planning, user experience, and consistency are in interactive design.

    Although there were challenges during the design process, especially when deciding on layouts and interactive elements, I enjoyed working on this project because it connected my personal interest with design creativity. Im not used to Figma especially to components before, but this task really taught me alot and I can say that Figma is really fun to work with.

    Observations: 

    During the project, I observed that interactive design is not only about making a website look attractive, but also about creating a smooth and engaging user experience. Since the topic was Formula 1, I noticed that the visual style needed to reflect the energy and speed of the sport. Because of this, I used dynamic layouts, bold typography, racing-inspired colours, and animation ideas that could make users feel more immersed in the experience.

    I also observed that beginner users can easily feel overwhelmed by too much information about F1. Therefore, I focused on simplifying the content and organizing it into sections that are easier to understand, such as basic rules, racing flags, teams, drivers, and race weekends. This helped me realize how important information hierarchy and navigation are in website design.

    Another observation I made was how useful prototyping tools like Figma are in testing interactions before actual development. By creating a prototype, I could visualize transitions, page flow, and animations more clearly. It also allowed me to identify areas that needed improvement before moving into the production stage.

    Additionally, presenting the proposal through Canva slides taught me the importance of communication in design. A good idea still needs to be presented clearly so that others can understand the concept and direction effectively.

    Findings: 

    From this task, I found that combining personal interests with design projects can increase creativity and motivation. Because I genuinely enjoy Formula 1, I was more excited to research, experiment with ideas, and improve the overall concept. This made the project more enjoyable and meaningful for me.

    I also found that planning is one of the most important stages in interactive design. Creating moodboards, wireframes, and prototypes before development helped me organize my ideas better and avoid confusion later on. The process showed me that strong preparation can make future production work more efficient.

    Another important finding was the role of animation and interactivity in improving user engagement. Simple interactive elements, transitions, and motion ideas can make a website feel more alive and enjoyable, especially for younger audiences or beginners who may not be familiar with the topic.

    Overall, this project improved my skills in conceptual thinking, visual communication, wireframing, and prototyping. It also gave me a better understanding of how interactive design combines creativity, storytelling, and user experience into one complete process. I believe the experience from this task will help me prepare better for Task 3, where the website concept will be developed further using Adobe Animate.


    SEM:

    Comments

    Post a Comment

    Popular Posts