Task 2: Interaction Design Planning and Prototype

22.5.2024 - 23.6.2024 / Week 05 - Week 09

Tiffany Tan Xuan / 0362472

Advanced Interactive Design / Bachelor of Design in Creative Media

Task 2: Interaction Design Planning and Prototype

---

INSTRUCTIOINS

---

TASK 2

Students are 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 are can build their animation or user reference animation to demonstrate the intended idea.

After solidifying my concept for the YSL Love Shine Series website in Task 1, the next challenge was bringing this vision to life through interaction design. Task 2 required me to focus on the visual design and plan out the website’s interactive elements—ensuring that animations and user interactions would enhance the overall experience.

To start, I revisited the mood board and wireframes I had created, using them as a foundation for the interactive elements. The loading page, for example, would feature the YSL logo slowly appearing from top to bottom, a subtle yet impactful introduction that sets the tone for the rest of the site. I wanted every click, scroll, and hover to feel luxurious and purposeful, just like the products themselves.

One of the key components of this task was planning the animations. I decided to incorporate smooth transitions and elegant sliding effects, particularly on the transition page where white tapes with the word “YSL” slide in one by one. This not only adds a dynamic element but also keeps the user engaged as they navigate through the site.

I had to balance the aesthetic aspects of the design with the functionality of the interactive elements. The “Try It On” page, for instance, required careful consideration of user flow to ensure a seamless experience from product selection to virtual try-on.

With the design plan in place, I moved on to building the prototype using tools like Figma and Miro. 

Submission

Presentation Link on YouTube:

https://youtu.be/_AKrCZOYb6M?feature=shared

Wireframe Link: 

https://www.figma.com/design/in7ckZnzkSrn32eTq8dDVW/Figma-basics?node-id=1669-162202&t=cjqnOeauf51vy0Zj-1

Flow Chart Link:

https://miro.com/app/board/uXjVKtHppVI=/?share_link_id=862714965469

Final presentation slides:

---

REFLECTION

Experience:

Working on this task was a blend of creativity and technical problem-solving. I found myself deeply engaged in the process, from planning the smallest details of an animation to testing the user flow. The experience allowed me to hone my skills in interaction design and gave me a deeper appreciation for how these elements can elevate a digital experience.

Observations:

A key observation was how essential it is to consider user experience in every design decision. Even the most visually stunning animations can fall flat if they disrupt the user’s journey or make navigation cumbersome. Observing how different design choices impacted the flow and engagement of the prototype highlighted the importance of a user-centered approach.

Findings:

The process revealed that interaction design is not just about adding visual flair; it's about creating a cohesive and immersive experience that aligns with the brand’s identity. I discovered that subtle animations and thoughtful transitions could significantly enhance the perceived value of the YSL Love Shine Series, making the digital experience as luxurious as the products themselves.

Developing the interaction design and prototype for the YSL Love Shine Series website has been a journey of creativity, technical skill, and thoughtful planning. It’s been rewarding to see my ideas take shape, and this task has deepened my understanding of how interactive design can elevate a brand’s digital presence. As I continue to refine the prototype, I’m excited to push the boundaries of what’s possible and create a truly engaging experience for users.