Advanced Interactive Design - Task 2 / Interactive Web Application Pre-production & Prototype

12/10/2023 - 2/11/2023 (Week 7 - Week  10)

Anna Chin Siaw Fong / 0354370 
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 2 / Interactive Web Application Pre-production & Prototype

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1RrMvIjHOKH0_8PZSNGACQR2r6WvXuHcu/preview" width="640" height="480" allow="autoplay"></iframe>

Task 2 - Interactive Web Application Pre-production & Prototype

For this task, we were to create a prototype interactive application for a brand that we chose. Before I start with the website design, I went to pinterest and look for inspiration and ideas. I created a moodboard and began ideating my website.

Fig 1.0 Moodboard

From my moodboard, I had the idea of making my website like a desktop. So I started to think of the detail of my website and look for sample animations. For my website, I wanted to have a landing page and home page. In the home page, I wanted to have pop-ups for about, music, product and join the club.

Sample Animation 1: https://www.pinterest.com/pin/701224604504819799/

Sample Animation 2: https://www.pinterest.com/pin/610660030749479847/

Sample Animation 3: https://www.joyyiu.com/

I proceeded by creating slides to show my ideation and proposed it to Mr. Razif.

Fig 1.1 Creating proposal

Upon approval, I began to design my wireframe & userflow. I created my user flow using Figma and high-fi wireframe using Adobe Illustrator. After that, I imported my wireframes to Figma to create the prototype.

Fig 1.2 Creating user flow

Fig 1.3 High-fi wireframe

Fig 1.4 Prototyping

After finishing my user flow, wireframe and prototype, I made a video explaning about my website design and the animation for my website.

Final Submission

Fig 2.0 Final presentation slides

Fig 2.1 Final presentation video

Fig 2.2 Final user flow

User Flow Link: https://www.figma.com/file/CEWfBFMRMZ9XhYp80SUssw/New-Jeans-Website-User-Flow?type=whiteboard&node-id=0%3A1&t=pFnTofQ1kvEjloyv-1

Fig 2.3 Wireframe & prototype

Wireframe Link: https://www.figma.com/file/6xQvVXDAqfIiPrwAw7KcWB/New-Jeans-Website?type=design&node-id=805774%3A471&mode=design&t=Rr5WoeHbxMXoa0RV-1

Prototype Link: https://www.figma.com/proto/6xQvVXDAqfIiPrwAw7KcWB/New-Jeans-Website?type=design&node-id=805774-473&t=eHYiZgAKkWBcvHRA-1&scaling=contain&page-id=805774%3A471&starting-point-node-id=805774%3A473&mode=design

---

FEEDBACK

• Idea is good, can proceed to create wireframe
• Try to prototype it in Figma

---

REFLECTION

Creating a prototype interactive application for New Jeans has been a fun task. One of the most interesting aspects of this project was designing the website animation. I found that animations could significantly enhance the user experience by making the website more engaging and visually appealing. I also found that wireframing and user flow planning were crucial in ensuring that the application would be easy to navigate and use. Overall, this task has given me a holistic understanding of the design process, and I look forward to animate my website in the next task.