ADV INTD - Task 2

Edita Chew En Thung / 0357357

Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 2  : Thematic Interactive Website

---

Table of Content

1. INSTRUCTIONS

2. PROCESS

      i. FINAL

3. FEEDBACK

4. REFLECTION

---

INSTRUCTIONS

fig 1.1 | Module Information Booklet (MIB)

Plan our website’s visual and Interactive Design: We need to design your website, focusing on both the visual layout and the interactive elements. This includes creating wireframes, mockups, and planning out animations or transitions that will make your website engaging. Unlike a static website, your design should involve elements that move or change in response to user actions, like button hover effects, animations that play as you scroll, or interactive sliders.

Create Examples or References for Your Animations: You should either create your own animations or gather references that show what you want to achieve. These animations should demonstrate how your interactive features will work.

Record a Walkthrough Video: Make a video that presents your design plan. In this video, you will show your website layout and explain how your animations will function. You can use screen recording software to capture your screen and walk viewers through your Figma designs or any animation references you’ve collected.

Post in Your E-Portfolio: Write a reflective blog post for your e-portfolio, documenting your design process. In your post, include links to your resources, like your Figma file or any tools you used (such as Miro, LottieFiles, or animation libraries). Discuss what you learned, challenges you faced, and why you made certain design decisions.

PROCESS

IMPROVING INTIAL PROTOTYPE

fig 1.2, 1.3, 1.4, 1.5, 1.6, 1.7

My Design Process Using Figma and Miro

For the planning and design of my interactive website project, I used Figma for creating wireframes and visual layouts and Miro for brainstorming and organizing my ideas. Here's a detailed look at how I approached each tool:

---

1. Brainstorming & Idea Mapping with Miro

I began my design process by using Miro to collect and organize my initial thoughts. Miro’s flexible whiteboard allowed me to:

• Create Mind Maps: I outlined the main goals of the website, identifying key sections like the homepage, about page, product pages, and contact form.
• User Flow Planning: I mapped out the user journey, considering how a visitor would navigate from the landing page to purchasing skincare products. This helped me visualize the user's experience and ensure seamless navigation.
• Sketching Out Interactions: I also noted down initial ideas for interactive features, like hover effects for product images and a smooth scrolling experience. This stage set the foundation for my interactive design.

Miro Link to My Board: View My Miro Board

---

2. Wireframing & Visual Design in Figma

Once I had a clear direction from my brainstorming in Miro, I moved on to Figma to create structured wireframes and mockups:

• Wireframes: I created a series of low-fidelity wireframes to establish the layout of each page. My focus was on arranging elements logically and ensuring that the design would be intuitive and user-friendly.
• High-Fidelity Mockups: I refined the wireframes into high-fidelity designs by incorporating colour palettes, typography, and images that align with the brand’s identity. The design emphasises a clean, minimalistic style, reflecting the simplicity and freshness of the skincare brand.
• Interactive Elements: Using Figma's prototyping features, I set up basic interactions, like button clicks and navigation between pages, to give a sense of how the website would function. I also created placeholders for animations, such as image transitions and hover effects, which will be implemented later.

Key Interactive Design Concepts:

• Hover Effects: When users hover over a product image, it smoothly enlarges and displays product details.
• Bento layout for navigation

Figma Link to My Project: View My Figma Wireframe

FINAL

VIDEO PRESENTATION

fig 1.8

figma prototype (revised)

fig 1.9

MIRO

fig 2.0

FEEDBACK

- Proceed with revising the prototype from what I did in task 1 which was earlier than expected.

REFLECTION

Findings & Observations

Throughout the planning and design process using Miro and Figma, I discovered several key insights. Firstly, the importance of clear user flow became evident during my initial brainstorming phase. Mapping out how a user would navigate the site in Miro revealed potential pain points, such as the risk of overcrowding the homepage with too much information. Additionally, I observed that simplicity and intuitive design are crucial when designing for user engagement. In Figma, this translated into prioritising clean layouts and minimalistic design elements, ensuring the website feels fresh and easy to use. Another observation was how small interactive elements, like hover effects and smooth transitions, can significantly enhance the user experience when executed thoughtfully.

Experience

My experience working with Miro and Figma was both insightful and rewarding. Using Miro for initial brainstorming was highly effective, as it allowed me to freely organise ideas and visually map out the project without constraints. It also facilitated a holistic view of the website’s user journey, which helped me plan interactive elements with user experience in mind. Transitioning to Figma was smooth, and the platform's robust design and prototyping tools made it easier to create high-fidelity wireframes. However, I did face some challenges, particularly in balancing aesthetics with functionality. Designing interactive features that are visually appealing yet practical for web implementation required a lot of careful consideration. Experimenting with Figma's prototyping features was enjoyable and provided a clearer vision of how animations would come to life, though it highlighted the need for further technical exploration in actual web development tools.

Conclusion

Reflecting on this project, I have gained a deeper appreciation for the importance of thoughtful design and planning in creating a successful interactive website. The use of Miro and Figma provided a structured yet creative approach to developing both visual and interactive elements. This experience taught me the significance of user-centered design, where every visual and interactive component must serve the user’s needs and enhance their journey. Moving forward, I am excited to refine my designs further and incorporate more complex animations. Overall, this project has not only improved my design skills but also provided valuable lessons in how to think critically about interactivity and user engagement.