19th May 2025 - 8th June 2025 (Week 5 - Week 7)
Sin Jun Ming 0364638
Application Design 2 / Bachelor of Design in Creative Media / Taylor's University
Task 2 - Interaction Design Proposal and Planning
LECTURES
Week 5 - UX animation
In Week 5, Mr. Razif introduced us to the importance of UX animation in application design. He explained how animations are not just for decoration, they help guide users, give feedback, and make interactions feel smoother and more natural. We learned about basic animation principles like ease-in, ease-out etc. We also tried using LottieFiles in class, where we learnt to animate a logo by ourselves.
Week 5 - LottieFiles tutorial
Week 6 - Introduction to Flutterflow
This week, we started working with FlutterFlow, the main platform we'll use to build our final app. Guided by Mr. Razif, we learned the basics of creating a complete user authentication flow, including the login, sign-up, and dashboard pages. One of the key parts of the session was connecting Firebase to FlutterFlow, which allows us to securely manage user accounts and store data in real time.
Week 6 - Flutterflow tutorial
Week 7
No class today, continue the work on task 2.
Instructions
Task 2 - Interaction Design Proposal and Planning
Instructions:
- 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.
1. App Flow Mapping
To begin the interaction design process for my redesigned "Encode" app, I focused on establishing a clear and intuitive app flow. I started by mapping out the overall screen flow to ensure a logical and engaging learning journey. I arranged the screens in a progressive sequence, starting with the onboarding experience, followed by the home dashboard, lesson modules, coding challenges and progress tracking.
Throughout this process, I focused on using macro animations and large transitions to guide users between screens in a smooth and visually dynamic way. This helped create a more immersive and intuitive experience.
Fig 1.1 Overview of "Encode" App Flow Mapping
2. Masterplan
After finalizing the app flow mapping, I moved on to developing the masterplan, which outlines the micro animations and interactions for each screen in detail. This masterplan breaks down the user experience into three key stages for every page: Onload, On-Page, and Offload.
Fig 2.2 Overview of "Encode" Masterplan
3. Animation Prototype
Splash Screen
Macro:
- Logo fades in on the center of the screen.
- Logo moves up, app name and description fade in.
- All elements in the center moves up, buttons slide up and proceed to sign in/sign up pages.
Fig 3.1 Overview of splash screen animation screens
Fig 3.3 Splash screen animation
Sign-in & Sign-up Page
Macro:
- The text boxes will be showing immediately.
- Following that, the “Sign in” button slides up from bottom.
Fig 3.4 Overview of sign-in pages
Fig 3.5 Sign-in page animation
Home Page
Macro:
- The welcome text, search button and navigation bar will be showing immediately.
- Following that, the content slides up from the bottom.
- Once the users click the CTA buttons, the page will slide left and transfer to the next page.
Micro:
- Horizontal scrolling on "Recommended Courses", "Skill Selection" and "Hottest Discussion".
- Vertical scrolling on the page to provide accessible experience.
- Clicking "View all" button on the "Skill Selection" section will open an overlay showing available skills.
Fig 3.6 Home page animation
Lecture & Exercise
Macro:
- The header (Java, Description & Index) will be immediately showing at the top.
- Then, the index cards will then slide up from the bottom.
- Following that, the CTA button will slide up.
- Once the users click the CTA buttons, the page will slide left and transfer to the next page.
Micro:
- User can swipe to the left to view the index, it will slide in from the right.
- Clicking "Start Here" button will open an overlay showing lectures to proceed.
- Horizontal scrolling on "Related Courses".
Fig 3.7 Lecture & exercise animation screens
Fig 3.8 Lecture & exercise animation
Challenges
Macro:
- The header and navigation bar will be showing immediately.
- Following that, the challenge cards slide up from the bottom.
- Once the users click the CTA buttons, the page will slide left and transfer to the next page.
Fig 3.9 Challenge page
Micro:
- Once the user clicks on the answering section, the answer will fade in, and the check button will be activated (turn from gray to dark blue).
- The progress bar will dissolve according to the question sequence.
Fig 3.10 Challenges animation screens
Fig 3.11 Challenge pages animation
Progress Tracking
Macro:
- The navigation bar will be showing immediately.
- Following that, the content slides up from the bottom.
- Once the users click the CTA buttons, the page will slide left and transfer to the next page.
Micro:
- Clicking "Share" button will open an overlay to view sharing options.
Fig 3.12 Progress tracking animation
Discussion Forum & Leaderboard
Macro:
- The header (Discussion & Leaderboard) will be immediately showing at the top.
- Then, the forum cards will then slide up from the bottom.
- Following that, the CTA button "+" will fade in.
- Once the users click the CTA buttons, the page will slide left and transfer to the next page.
Micro:
- User can click on the “Leaderboard” button to view the leaderboard, it will slide left from the right.
Fig 3.13 Discussion forum & leaderboard animation
Profile Page
Macro:
- The navigation bar and header will be showing immediately.
- Following that, the content slides up from the bottom.
- Once the users click the CTA buttons, the page will slide left and transfer to the next page.
Fig 3.14 Profile page animation
4. Submission
Presentation video: https://youtu.be/hiov96C3hyg
Reflection
Looking back on this task, I’ve learned how much thought and planning goes into creating a good user experience. From mapping out the app flow to planning detailed animations, every step had a purpose in making the app feel smooth, clear, and enjoyable to use. I used to see transitions and movements as just nice extras, but now I understand they play a big role in guiding users and making the app easier to understand.
Working on the Encode app redesign helped me improve how I plan screens, think about interactions. Learning about animation types like ease-in, ease-out, and smart animate gave me more control over how users move through the app. Getting hands on with these tools also made the design process feel more real and practical.
Overall, this task gave me a deeper understanding of interaction design, not just from a visual point of view, but from the perspective of how users actually feel and behave when using an app. It has made me more confident and prepared to move forward with the next stages of app development.
Comments
Post a Comment