Application Design II - Interaction Design Proposal and Planning (Task 2)

21/10/2024 - 10/11/2024(Week 5 - Week 7)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Application Design II)
Task 2 - Interaction Design Proposal and  Planning

---

LECTURES

WEEK 5 - 21/10/2024

At the start of today's class, Mr. Shamsul started off by briefing us about task 2 which was Interaction Design Proposal and  Planning. He then taught us about micro and macro interactions of an app by showing us apps as an example like Waze and Zues Coffee. We were asked to research about a few things to put into our prototype.

• Transition Effect
• Feedback Effect
• Successful (Button/screen)
• Loading
• Hover/click

Research:

Transition Effect:

Micro-Interactions: (Batchu V., 2018)

They're small, functional animations or feedback mechanisms that serve a single purpose. 

Examples:

• The way a button changes color when you hover over it
• The slight bounce of a menu as it drops down
• The progress bar that fills as you complete a task
• The celebratory confetti that rains down when you achieve a goal

Fig 1.1 Breakdown of Micro-Interactions

1. Triggers: These initiate a micro-interaction: User-initiated triggers occur when a user takes action (e.g., tapping a ‘Like’ button). System-initiated triggers occur when software detects certain conditions (e.g., a low battery alert).
2. Rules: These determine what happens once triggered. For example, a toggle switch moves and changes color when activated.
3. Feedback: This communicates the micro-interaction to the user. It can be visual, auditory, or haptic, letting users know their action was recognized and what’s happening as a result.
4. Loops and Modes: These govern how the micro-interaction behaves over time or in different conditions: Loops determine repetition or changes in subsequent uses. Modes are different states based on conditions (e.g., a greyed-out button).

Micro-Interactions: (Batchu V., 2018)

Macro interactions are substantial interactions within the UI that encompass multiple processes. These interactions often have a direct impact on the overall user experience, such as navigating between pages, performing complex actions, or completing important tasks within a website. (Chhabra, 2024)

Reference List:

Batchu, V. (2024b, August 20). Micro-Interactions: why, when and how to use them to improve the user experience. Medium. https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0

Chhabra, S. (2024, August 14). What are Micro Interactions: Best examples and how they enhance UX? - Onething Design. Onething Design. https://onething.design/blogs/micro-interactions/#:~:text=A%3A%20Macro%20interactions%20are%20large,wider%20framework%20of%20macro%20interactions.

After that Mr. Shamsul gave each of us feedback on our refined app prototype and then we started working on our Task 2.

WEEK 6 - 28/10/2024 (No class)

Fig 1.2 No class

WEEK 7 - 4/11/2024
Mr. Shamsul started by having consultation with a few students regarding task 2. Then he briefed us about task 3 and gave us some tips as well. He recommended us a few websites to help us with our coding.

Html Coding: daisyUI

Animation: GSAP

Then we continued with the consultations and I waited for my turn. Mr. Shamsul saw my work and said the UI and animation is pretty consistent and just needed a little bit more amendments. Then he proceeded to tell me what I had to change while I jotted it down. Feedbacks are below.

---

INSTRUCTION

For task 2, we 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.

Required:

- Updated Flowchart

- Micro & Macro Animations

- Visual representation/Recorded Presentation

PROGRESS

Before I did anything, I first refined my app with the feedback that Mr. Shamsul gave in week 5. I did that in another new Figma file so that if I want to redo anything, my old file is still there and I can also make comparisons. 

RE-REFINING LOTUS’S APP

Flowchart

Before I could update my flowchart, I listed out my user task flows. This would help me to neatly arrange my flows in Figma so that I can have a clearer vision of everything. After the arrangements, I could then proceed to update my flowchart because now everything is confirmed and set in place.

User task flows:

Flow 1: You first log into app. Add a Milo Softpack to cart from beverage category. You forgot what brand of chocolate you bought last time so you go to order history to check and add it to cart. Use your Lotus's points and choose COD to checkout.

Flow 2: You forgot your password when logging into app. After being able to log in, you add a pack of Nescafe Refill from favourites "Breakfast" folder and a pack of toilet rolls from favourites "Toiletries" folder. You didn’t want your snacks folder anymore so you deleted it. Then you collect vouchers. Next, checkout and choose self pick-up and select nearest pick up location. Use the free delivery voucher you collected. Lastly, pick COD as choice of payment and confirm order.

Flow 3: You go to the recommended section and straight away buy a MILO Softpack and checkout. However, for some reason your real-life update tracking does not work. You ask live chat for some help. The agent tells you to Log out and log into the app again. You test again to check if your order tracking is now working.

Flow 4:  You register into the app. You want to explore the app. You check out their weekly promos and what items are currently on discount. You also wanted to check where you can view your accumulated points in the future. Then you came across some member’s exclusive posters. You also wanted to see if there are any notifications for you.

Reasons for each flow:

Flow 1: Showcase categories section, order history section, checkout process.

Flow 2: Showcase forgot password, favourites folder, collect vouchers, self pick-up.

Flow 3: Showcase live chat, "buy now" feature and real life delivery tracking.

Flow 4: More on exploration like posters, member's exclusive and mascot.

Click here for Application Design I flowchart.

Click here for Application Design II Updated flowchart.

Micro & Macro Animations

After laying out all the flows, I started to decide on the micro and macro animations. I didn't know how to work out some stuff in Figma since I hadn't explore much of it in the previous semester. So I decided to watch some tutorials on animations in Figma.

Then after that I started working on all the buttons and giving them some animation and bringing life to it. Then I added macro animations/page animations to some main pages too. I did a loading animation in photoshop for the checkout page.

Examples of some micro animations in my prototype:

Buttons:

Pop ups:

Examples of some macro animations in my prototype:

Welcome Animation:

 

Order Complete Animation:

  All the flows:

With animations:

FINAL SUBMISSIONS

Figma Prototype with Micro & Macro Animation:

Prototype Walkthrough Video:

---

FEEDBACK

Week 5 (21/10/2024) - Feedback on Refined Prototype:

Overall:

- Create sections in Figma for each section of the app. (Neater)

- Update flowchart

- Task flow can be like an umbrella diagram, but need to be neat and organised.

Onboarding 

- next and back button can change to arrows

- Add skip button

Log in

- add otp notification 

Home page

- Change cart icon to a trolley icon.

- The add to fav pop up too far away, make it pop up from bottom and dim the background as well.

OR

- When add to favs a new page pops up with options (create new folder & add to existing folders)

- consistent button sizes (items page)

- Put nav bar buttons into the page itself, no nav bar in items page.

Nav Bar

- Make icons smaller (nav bar)

- Nav bar in all pages

Week 7 (4/11/2024) - Feedback on Task 2:

- Change back and go arrow buttons, looks too squashed.

- Make onboarding skip straight to log in. 

- Cart button have badge/ +1 (basically show feedback) 

- Change cart icon button (the one in the items page on the top right) 

- Make "buy now" button have action.

- Make verification notification have move in transition 

---

REFLECTION

Experience
Working on Task 2 really deepened my understanding of interaction design. At the start, Mr. Shamsul introduced us to the assignment requirements, explaining how we needed to focus on both micro and macro interactions in our app. This was a new concept for me, so seeing examples of animations in apps like Waze helped me visualize what I needed to do. When Mr. Shamsul reviewed my prototype, he gave me a lot of specific feedback, like organizing the sections in Figma and improving the task flows to make them clearer. I took his advice and created a new Figma file to start refining my app, which made it easier to track changes and see improvements side-by-side. This whole experience was actually pretty fun as my app had more "flavour" now. It also showed me how intentional design choices can make the app feel smoother and more user-friendly.

Observation

As I worked on refining my app based on feedback, I realized that small changes in the design could greatly improve user experience. Mr. Shamsul’s suggestions on button placement, icon choices, and layout organization helped me see that a good design isn’t just about looking nice—it’s about creating a clear and easy-to-follow flow for the user. Learning to add animations in Figma, like a +1 badge on the cart or a sliding notification, was a bit challenging, but it made the design more lively and helped guide the user’s actions. This process showed me that keeping a consistent design is essential for a smooth and enjoyable experience.

Findings
Working on Task 2 taught me that good interaction design is mainly about making the app easier to use through clear feedback and animations. By following Mr. Shamsul’s suggestions, like adding loading animations and feedback on important buttons, I was able to make the app more user-friendly and responsive. I learned that animations aren’t just for looks—they help guide users through the app and make actions clearer. This assignment showed me the value of focusing on the user’s experience, ensuring that every part of the design, from button clicks to page transitions, has a clear purpose and keeps the interface easy to use and engaging.