Advanced Interactive Design - Task 2

23/9/2024 - 14/10/2025 (Week 1 - Week 4)
Shawn Wong Kai Hen / 0375372
Major Project 1 / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design - Task 1

---

  INTRUCTIONS  

---

  Task 2  

Interaction Design Planning and Prototype

On this task, we were required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements :

1. Walkthrough Video presenting the plan and showing the animation examples and/or references.
2. 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.)

  Low-Fi Design Progression  

After done completed the 3 wireframe design, i start to choose the best wireframe to continue for my High-Fi design. So i based on the wireframe i chosen. I start to refine again the wireframe design and come out the final version.

1.1 Final Version - Wireframe

Why i refine again the wireframe? Because of after i think about the how the animation gonna run. So that i refined based on the new idea animation.

  High-Fi Design Progression  

At Week 7, i started my High-Fi design, i started to think about and finding reference and assets for my design. I started to create the assets and finding download some image on Freepik. 

2.1 Image for Reference and Assets

Home Page

After done create the assets, i started to work with my homepage first. The Homepage introduces visitors to Echoes of Nature through a strong visual hero section featuring lush greenery and elegant typography. It establishes the website’s tone like immersive, calm, and nature-centric. The focus is on drawing users into the experience, encouraging them to explore different ecosystems through smooth navigation and a visually rich interface.

2.2 Homepage Design Explanation

For the interactive animation, the background plants will have a subtle wiggle or wave motion to give a lively effect. The circle in the middle will continuously spin, and users can click the mouse button or use the navigation bar to proceed to the next page.

Explore Ecosystem Page

This page serves as the main navigation hub for discovering the three ecosystems: Forest, Meadow, and Desert. It uses a circular interactive layout with floating spheres representing each environment. The soft gradients and glowing hover states help users intuitively understand where to click. The page is designed to feel modern, organic, and educational, inviting users into deeper exploration of plant species.

2.3 Explore Ecosystem Design Explanation

For the Explore page, the background feels too empty, and I will refine it further. In terms of interaction, users can select and view different galleries: Forest, Meadow, and Desert. When the user hovers over each button, a preview video will play to make the experience more interactive and engaging.

Gallery Page (Forest/Meadow/Desert)

Each Gallery Page follows a consistent layout and interaction design to ensure a unified user experience across the website. The screen is divided into two main sections: a hero plant on the right and a card-based plant carousel at the bottom. Every plant is displayed in a clean white ceramic pot, creating visual consistency and a modern exhibition like feel.

The left side presents the featured plant of the gallery, complete with a short description and a “Learn More” button. Users can browse through additional plants using the horizontal slider, making the gallery intuitive and easy to navigate.

Although each gallery represents a different ecosystem like Forest, Meadow, or Desert, the uniform design system helps maintain brand identity while allowing the unique plants and natural characteristics of each environment to shine.

2.4 Forest Gallery Page Design Explanation

2.5 Meadow Gallery Page Design Explanation

2.6 Desert Gallery Page Design Explanation

On the Gallery page, users can browse different plants by swiping through the carousel. The left side will display the plant’s name and description for further exploration, while the right side will show the plant image as part of the background design, changing as the user swipes. The background still feels a bit empty, so I will continue refining it.

About Page

The About Page provides background information about the purpose and mission of Echoes of Nature. The large translucent ABOUT typography creates a modern, editorial-style layout, while the three-column grid organizes text into readable sections. This page explains the educational goal of the exhibition and how the platform brings awareness to different ecosystems.

2.7 About Page Design Explanation

For the About page, I didn’t add much animation, only a subtle pop-out effect for each column. I will also apply an interactive animation to the button at the bottom right.

Join Us Page & Book Ticket Page

The Join Us and Ticket Booking pages are designed with a straightforward, user-friendly layout that focuses on clarity and function. Both pages use minimal animation and clean form structures to keep the experience smooth and efficient for users.

On the Join Us page, visitors can quickly access a simple sign-up form paired with supporting visuals that highlight the theme of nature and participation. The design emphasizes accessibility, clear input fields, and a calming visual style that matches the rest of the website.

The Ticket Booking page continues this streamlined approach with a centered booking form where users can select dates, ticket types, and contact details. A subtle highlight color is used for the “Book Now” button to guide user attention without overwhelming the interface.

Together, these two pages maintain a consistent look and feel, focusing on functionality over heavy interaction, making it easy for users to sign up or reserve tickets with minimal distractions.

2.8 Join Us Page Design Explanation

2.9 Book Ticket Page Design Explanation

For these two pages, I didn’t include many interactions or animations, as they are simple pages where users only need to enter information and book their exhibition tickets.

Features Artwork Page

This page displays curated botanical artworks or plant illustrations from the exhibition. The grid layout highlights each artwork equally, creating a clean and organized visual gallery. It serves as a showcase for creativity, educational diagrams, or artist submissions related to plants and ecosystems.

2.10 Features Artwork Page Design Explanation

The features artwork page i just designed using some pop up for the column, but i decide to add more some assets on the background, but for now i just keep it like this first.

  Final Outcomes Task 2 | Interaction Design Planning and Prototype  

Access Canva Link :  Here!

3.1 Final Task 2 Planning and Prototype

Access Final User Flow Chart Link :  Here!

3.2 Final User Flow Chart 

Access Final High-Fi Design :  Here!

3.3 Final Wireframe WorkFile

Access Final Prototype :  Here!

3.4 Final Prototype

View Presentation Video On Youtube :  Here!

---

  REFLECTION  

Working on this project was both challenging and rewarding. Throughout the process, I gained a lot of new insights—especially when designing the wireframes for my ecosystem gallery website. Exploring different layout styles pushed me to think more creatively about how each page should function and how users would interact with the environment themes.

One of the more challenging aspects was ensuring that every design I created could actually be developed later in Adobe Animate. This made me more careful and intentional with my wireframes, making sure each interaction, hover animation, and motion idea was realistic and technically achievable.

What I learned from this module is that having a strong foundation is essential before jumping into the visual design phase. Building a clear user flow helped me understand the overall experience and prevented confusion later when creating the prototypes. Without a solid structure, designing becomes messy and decisions lose direction.

Overall, this project improved how I plan, conceptualize, and translate ideas into functional designs. It taught me to balance creativity with practicality and to think ahead about development while designing.

---