APPLICATION DESIGN II TASK 2: INTERACTION DESIGN PROPOSAL AND PLANNING
22.05.2025 - 05.06.2025 / Week 5 -Week 7
Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media
Application Design I/ DST60504 / Section 01
Task 2: Interaction Design Proposal and Planning
TABLE OF CONTENTS
1. INSTRUCTIONS
2. EXERCISES
3. TASKS
4. FEEDBACK
5. REFLECTION
INSTRUCTIONS
CLASS EXERCISES
WEEK 6 EXERCISE
This week, we learnt on how to animate logo through Lottiefiles. The logo chosen was the movie title of F.R.I.E.N.D.S which I made it slide in letter by letter and the dots moving between the letters.
exercise done in Lottiefiles
WEEK 7 EXERCISE
In week 7, we learnt using Flutterflow platform. At the same time we learned on the publish settings on Firebase by linking to our Flutterflow account.
process in Flutterflow
WEEK 8-10 EXERCISE
We continued learning the other features during tutorial class. In week 8, we generate the map key and added the Google Maps widget. In week 9, we created the product listing page and product details page by also following the flutterflow tutorial on these pages. In week 10, we added the cart page following the tutorial on these pages.
week 8-10 tutorial
TASKS
TASK 2: INTERACTION DESIGN PROPOSAL AND PLANNING
Requirements :
In this task, we are required to create a complete interaction design plan for our mobile app project. This involves not just designing how the app looks, but also how it behaves — including transitions, animations, and user feedback. The main goal is to design interactions that feel smooth, intuitive, and enhance the overall user experience.
Master Plan & Storyboard
To begin this task, I revisited and refined the screens developed in Task 1. From there, I mapped out the entire app flow using a clear flow diagram, showing how users navigate from one screen to another. This helped me visualise the structure of the app and identify key moments where interactions and animations could be implemented to enhance the experience.
I then created a master plan that outlines the major interactions and animation touchpoints across the app. To support this, I developed a storyboard for each screen, breaking down the animations into three categories:
- On Load Animation: triggered when a page first appears (e.g., fade-in, slide-in)
- On Page Animation: happens within a page (e.g., button taps, toggles, interactive feedback)
- Off Load Animation: occurs when an element or page transitions out (e.g., fade out, slide away)
By combining the flow map, storyboard, and wireframes, I created a working prototype that includes both microanimations (small feedback elements like tap effects) and macroanimations (larger transitions between screens). This helped bring the app to life and allowed me to test how the experience would feel for real users.
For this task, I intentionally kept the animations simple and purposeful. The original Watsons app uses very minimal motion, focusing on fast and straightforward navigation — a style I believe works well for shopping apps. I followed this approach to preserve clarity and ensure that the interface remains clean and efficient.
However, to fulfil the assignment requirements and further explore interaction design, I incorporated selected animations in a subtle way. These additions were not just for visual interest, but to support usability — guiding the user, improving feedback, and creating smoother transitions between tasks.
Fig. 1.1 - Overview of Watsons MY's Master Plan: Storyboard
Fig. 1.2 - Overview of Watsons MY Flow Mapping
Animate Prototype
Splash Screen
Macro:
- Logo introduction centered on the screen, it expands after a 1000ms delay.
- Fades in.
- The logo moves upwards and the onboarding screen appears.
Onboarding Screen
Macro:
- Fades into a onboarding page shows a welcoming information(description) of the app and benefits of joining the community.
- Buttons to click on to the next page or skip to the Login/Signup page.
- Movement transits to the next page and description changes smoothly by fading animation.
- Get started button directs user to the Login/Signup Page by fading animation.
Login and Signup page
Macro:
- Login/Signup options available when user first downloads the app.
- Login/Signup page slides in from right when clicked on the buttons.
- After Logging in, screen fades into the Landing Page.
Landing page(Home)
Macro:
- Screen dissolves and users are introduced to the landing page(home page)
- When user click on product, page fades and the product page appears.
- Instant transitions to page when click on icons on navigation bar.
Micro:
- Shows an automatically scrolled banner on top.
- Ad Banner/Carousel begins scrolling automatically.
- Vertical scrolling of page.
- Certain categories and contents are horizontally scrollable.
Category Page
Macro:
- Screen fades in page when clicked on category icon.
- Trending Products, hot brands, tags of category (of Watsons Brand) is shown once landed on this page.
- When select to browse on the brands category, page transition by sliding left while clicking back on the category, page slides out to the right.
- When select certain category from the panel, screen fades to the chosen category.
Micro:
- Horizontal scrolls on Trending Products.
- Scrollable Panel on categories.
Searching for Products
Macro:
- Page transition by sliding left when clicked on the search bar/icon, showing trending searches and recent searches.
- Page slides left when click on searched item(brand/product).
- Page transition by moving out from right when exit.
Micro:
- Vertical scrolling on searched products screen.
Product Page
Macro:
- Screen fades and users are introduced to the product page.
- Page slides left when click on searched item(brand/product).
- Fades out when click on back button.
- My Bag(cart) page slides in from right if click on the bag button on the top right corner.
Micro:
- Vertical scrolling on the page.
- ‘Added to Bag’ indication appears if click on Add to Bag button.
Cart Page
Macro:
- Faded screen and page appears.
- Things added to cart will be immediately be visible once on page.
- When click Next(proceed to checkout), Checkout Page appears by sliding in from the right.
- When click on delivery options, page will slide up.
- When click on applicable vouchers, page slides up.
Checkout Page
Macro:
- Page slides in from the right.
- Items ready to make purchase appears immediately.
- When click on delivery options, page will slide up.
- When click on applicable vouchers, page slides up.
- Page transition by sliding out to the right.
- When select payment methods, the page slides up.
- When continue after selected payment method, page slides right and back to the checkout page.
Card Payment Page
Macro:
- Screen fades and users are introduced to the payment page.
- When users click on submit, screen fades to the transaction loading page.
Micro:
- If users click on the back button, a confirmation prompt appears, if leave page, screen slides right to move out.
Loading Process of payment
Macro:
- Screen fades to loading page after submitting the payment status.
- Screen fades by sliding out(down) after clicking on back to home.
Micro:
- Loading Feedback spins automatically indicating the process of transaction.
- Loading turns to a tick icon when payment has successfully been made.
- Payment status shows and back to home text appears.
Profile Page
Macro:
- Screen dissolves and users are introduced to the Profile page.
- Settings page slides in when click on settings icon.
Figma Prototype:
FEEDBACK
WEEK 6
General Feedback
- submit blog by Sunday
Specific Feedback
- no feedback given
WEEK 7
General Feedback
- no feedback given
Specific Feedback
- no feedback given
REFLECTION
Experience
Working on Task 2 gave me a deeper understanding of how important interactions and animations are in shaping the user experience. While Task 1 focused more on layout and visual design, this task challenged me to think about how users move through the app and what kind of feedback they receive with every action. It was my first time planning both micro and macro animations in a structured way, and I enjoyed the process of translating static screens into something that feels dynamic and responsive.
Observations
I noticed that even small animations, like button tap feedback or slide transitions, can have a big impact on how smooth and professional an app feels. I also observed that timing, direction, and consistency in animations are key — if animations feel too fast or too slow, it can disrupt the user’s flow. Another important observation was how clear flow mapping helped guide my decisions on where interactions should happen and how screens should connect logically.
Findings
Through this task, I found that designing good interactions isn’t just about making things look nice — it’s about guiding users, giving them feedback, and making sure the experience feels intuitive. I realised that microinteractions help reassure users that their actions are working, while macroanimations support transitions and orientation. Overall, building a detailed interaction plan helped me better understand the role of motion in UX, and it made me more confident in designing app experiences that are both functional and enjoyable to use.
QUICK LINKS
Comments
Post a Comment