Application Design 2 / Task 2

 

29.8.2022 - 19.9.2022  (Week 8 - 10)
Lew Se Win / 0347637 / Bachelor of Design (Hons) in Creative Media
Application Design 2
Task 2 App Interaction Design

---

TUTORIAL 

Week 6

This week, Mr. Razif teach us about form validation with DOM. 

Figure 6.0 Tutorial Exercise (html)

Figure 6.1 Tutorial Exercise (javaScript)

Week 10 

Today we learned about animation. Mr. Razif introduced gsap to us. Using gsap, the animation coding process would be easier for us. 

Figure 9.0 GSAP

Figure 9.1 GSAP codes

Week 12

We continued to learn about GSAP; today we learned about timelines. Besides, we also learned about the GSAP timeline implemented with DOM. 

Figure 12.0 GSAP timeline

---

INSTRUCTION 

We are required to plan out the interaction and animation for our app. Project 2 required no coding. Hence, we are given only 2 weeks to work on it.  

Project 2 App Interaction Design

As decided previously, I will continue to work on the app I created in the App Design 1 module. 

Figure 1.0 Grocey Prototype (App Design 1)

Before planning the animation, I also did some revision on my previous design for the pages such as result page and home page. 

Figure 1.1 Revised design (result page)

Later on, I start planning on my app flow as well as the animation in Figma.  

Figure 2.0 Animation Planning

After I completed the first draft for the whole app flow and the animation, I started to create the interactive prototype in Figma. 

Figure 2.1 Prototyping

I did face some problems while creating the prototype. The animation I planned was not aligned with what I had previously planned. As a result, I decided to revise the planned animation and figure out how to create it in Figma for the animation that I really wanted to include in my app. 

Besides the overview flow of the app, I also planned the animation on 3 stages.

Figure 2.2 Interaction Planning

After a few thoughts, I decided to minimise some animation and keep my app's animation simple and short so that users would not need to wait for a long time while using the app.

Figure 2.3 Final Interaction Design Master Plan

Figure 2.4 Final Interactive Prototype

Figure 2.5 Final Video Presentation

---

REFLECTION 

This project was not as simple as I thought, and it was very time-consuming. This might be because I am not familiar with the animation planning in Figma. I created everything frame by frame, but after watching some tutorials online, I realised that I did not need to do that. Overall, I had a positive experience with this project, and I definitely have a lot more to learn about technical skills with Figma.