APPLICATION DESIGN 2 / TASK 3

╎Gwendalyn Firly Bong / 0374580

╎Bachelor of Design (Honours) in Creative Media

╎Application Design 2 / Task 3

---

TABLE OF CONTENTS

I. Instructions

II. Progress

III. Feedback

IV. Reflection

---

I. INSTRUCTIONS

---

II. PROGRESS

For this task, we were told to add micro-interactions and macro-interactions to our application. 

Micro-Interactions

Figure 1.1: Sign-up Page

For the Sign Up page, I made it so that when the user writes data that is invalid, the “Sign Up” button shakes a bit.

Figure 1.2: Login Page

I did the same for the Sign In / Login page. The Sign In button shakes when the data is invalid. 

Figure 1.3: Profile and Checkout Page

Lastly, I added a shimmer effect on my profile card and the checkout button.

Macro-Interactions

Figure 1.4: Loading Screen

I made a loading animation to appear after the user successfully logs in.

Figure 1.5: Purchase Successful

I also added a pop-up to indicate to users that their order went through the system.

---

IV. REFLECTION

This task was relatively easier compared to the previous task, as we only had to add small interactions to pre-existing elements/components. I only had to add a few additional components for the pop up pages.