App Design II - Task 2 / Interaction Design Proposal and Planning

23.9.2024 - 10.11.2024 (Week 5 - Week 7)

Chong Hui Yi / 0363195

App Design II / BDCM

Task 2 / Interaction Design Proposal and Planning

---

TABLE OF CONTENT

1. Lectures
2. Instructions
3. Task 2
4. Feedback
5. Reflection

---

LECTURES

Click HERE to view lectures & exercises

---

INSTRUCTIONS

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

---

Task 2: Interaction Design Proposal and Planning

Requirement

"Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application."

Progression

Fig. 1.0 App Flow (Click HERE to view in Figma)

Fig. 1.1 Masterplan (Click HERE to view in Figma)

Final Outcome

Fig. 2.0 MBO Cinemas App in Figma (Click HERE to view in Figma)

Fig. 2.1 MBO Cinemas App in Figma - Mobile Version (Click HERE to view in Figma)

Fig. 2.2 Walkthrough Video

Presentation YouTube Video Link: https://youtu.be/A-L9quR5RS8

Fig. 2.3 Presentation Video

---

FEEDBACK

Week 5:

The app design is clean but lacks brand identity. Consider adding elements like its logo or incorporating more brand colours.

---

REFLECTION 

I found Task 2 interesting and gained a better understanding of Figma's animation features. In fact, the app from Task 1 already incorporates some macro and micro interactions, so I had a little bit clear direction on what to do, and the workload wasn’t too overwhelming. Initially, I spent some time converting the app to a dark theme, which I feel aligns better with its brand identity, and I’m quite pleased with the result. 

Besides that, I tried to keep the animations simple to make them easier to implement during coding later on, but I still feel uncertain as I don’t fully understand how to code these animations or whether they can even be realised.