ADVANCED INTERACTIVE DESIGN: TASK 1 (DESIGN PROPOSAL)

23/04/2026 - 14/06/2026 (Week 1 - Week 8) 

Valerius Ethan Wirawan / 0372774

Advanced Interactive / Creative Media / The Design School

Task 1: Design Proposal

---

TABLE OF CONTENT

1. Instruction
2. Process Work & Final Outcomes (Highlighted)
3. Feedback
4. Reflection

---

1. INSTRUCTION

Fig. 1.1. Module Information Booklet (MIB)

---

2. PROCESS WORK

Week 1, after the briefing, I began generating initial ideas.

Fig. 2.1. Brainstorming 

Conclusion: I will proceed with either idea 1 or 5, depending on technical feasibility in Adobe Animate, and will wait for next week’s tutorial briefing before making a final decision.

Then, sketches and scene descriptions were developed as part of the design process.

Fig. 2.2. Storyboard and Sketches 

The mood, tone, color, style, typeface was also chosen.

Fig. 2.3. Style Guide (Moodboard)

Fig. 2.4. Style Guide (Texture & Inspiration)

Then, the visual elements were first created in Adobe Illustrator. The assets consisted of hand-drawn illustrations, Adobe Photoshop–edited graphics, and AI-generated visuals. Each element was exported as a transparent PNG and imported into Adobe Illustrator to prepare the assets for animation. This workflow allowed the elements to be transferred easily into Adobe Animate, where they were converted into movie clips for the animation process.

Fig. 2.5. Adobe Illustrator: Elements Creation

After creating the elements in Adobe illustrator the elements were used in the presentation slide for the design proposal.

Fig. 2.6. Canva Presentation Proposal

After the proposal was completed and approved by the lecturer, I created the Figma prototype. The prototype was used to visualise the website layout, navigation structure, and user flow before the development process began in Adobe Animate. This allowed the overall design and interaction flow to be reviewed and refined before implementation.

Fig. 2.7. Figma: Flow & Navigation Testing

Fig. 2.8. Figma: Final Prototype

CL

ICK HERE for the prototype link.

During the consultation, the lecturer advised that the website should be more interactive and less linear. Initially, the design relied on Next and Previous buttons on every page, resulting in a navigation experience similar to a PowerPoint presentation. At first, this feedback was misunderstood, as it was interpreted to mean that more animations and interactive buttons should be added. However, the intended recommendation was to remove the Next and Previous buttons entirely and allow users to navigate freely through the navigation bar. This revision created a more flexible, user-centered experience, enabling visitors to explore the website non-linearly rather than following a fixed sequence of pages.

---

4. FEEDBACK

Week 1

The initial brainstorming showed a good range of ideas. However, the concepts should be narrowed down by considering the technical limitations of Adobe Animate and whether the interactions are achievable within the project timeline. Develop the storyboard further before deciding on the final concept.

Week 2

The storyboard communicates the overall flow clearly, but the user journey needs to be more detailed. Consider how users will navigate between sections and ensure every interaction has a clear purpose rather than relying only on animations.

Week 3

The visual direction is consistent with the intended theme. Continue refining the colour palette, typography, and illustrations so they work together as a unified visual language. Ensure readability is not sacrificed for aesthetics.

Week 4

The proposal is progressing well. Continue developing the visual assets while maintaining consistency in illustration style and iconography. Avoid creating unnecessary decorative elements that do not contribute to the user experience.

Week 5

The presentation communicates the concept effectively. The project objective and user experience are clearly explained. Proceed with the prototype, but test the navigation flow before beginning development.

Week 6

The prototype functions well, but the navigation feels too linear because users are expected to move through the pages using Next and Previous buttons. Explore alternative navigation methods that allow users greater freedom to access different sections.

Week 7

The navigation has improved after removing the sequential page flow. Continue refining the interactions so they feel more intuitive. Focus on creating a user experience that encourages exploration rather than forcing a fixed sequence.

Week 8

The proposal demonstrates a clear development process from research to prototyping. The project is ready to move into production. Ensure that the implementation in Adobe Animate follows the approved prototype while maintaining consistency in design and interaction.

---

5. REFLECTION

Observation
Throughout the proposal stage, I observed that designing an interactive website requires much more than creating attractive visuals. User experience, navigation flow, and interaction design are equally important. I also realised that planning the structure before development significantly reduces confusion during production. Using Figma as a prototyping tool helped visualise the overall experience before implementing it in Adobe Animate.

Experience
This project allowed me to experience a complete pre-production workflow, beginning with brainstorming and concept development, followed by storyboarding, moodboard creation, asset production, proposal presentation, and interactive prototyping. During the consultation sessions, I learned that lecturer feedback often focuses on improving usability rather than simply adding more visual effects. Initially, I misunderstood the advice to make the website "more interactive," but after clarification, I realised that effective interaction comes from giving users greater control over navigation instead of adding more buttons or animations. This experience strengthened my understanding of user-centred design.

Findings

I found that prototyping is an essential step before development because it allows design problems to be identified early without requiring extensive coding or animation work. I also learned that interaction design is closely related to navigation and usability rather than the quantity of animations. Careful planning, consistent visual design, and continuous consultation contributed to a stronger proposal and established a solid foundation for the production stage in Adobe Animate.