APPLICATION DESIGN 2 - TASK 03
19/05/2025 -08/06/2025 (Week 05-07)
Chan Suet Yee 0358427
Bachelor of Design (Honours) in Creative Media
Application Design II | DST60504 | Sec 01
Task 03 | Interaction Design
LIST
TABLE OF CONTENTS:
INSTRUCTIONS
TASKS
INSTRUCTIONS
In this task, we focus on developing functional micro-interactions based on the ideas explored in Task 2, with the goal of improving the usability and engagement of our app. These micro-interactions can include elements such as animated buttons, navigation transitions, pop-up notifications, and loading indicators. We are encouraged to think creatively and consider how users will interact with the app, ensuring each animation serves a purpose and supports the overall user flow. This task allows us to experiment with interaction design and refine the key touchpoints of our app, resulting in components that are not only visually appealing but also meaningful and ready for final integration.1. Interaction Design Documents
FIGMA PROTOTYPE LINK
PROCESS
At the beginning of this task, I was really confused about how FlutterFlow works and faced several issues during the initial stage. One of the main challenges I encountered was setting up the layout for my app design. I wasn’t sure when to use a Container and when it wasn’t necessary. I also assumed that every scrollable section needed to be built using ListView, so I used it repeatedly for scrollable parts. However, when I switched to test mode, the screen appeared completely blank. I spent a long time trying to fix the issue and eventually discovered that the excessive use of ListView was the problem—it was causing layout conflicts that prevented content from displaying properly. After experimenting and doing more research, I realized that using a combination of Container with Column or Row was often enough to create scrollable sections. This experience helped me better understand the structure and layout behavior in FlutterFlow.
Fig 1.0 Task 3 Process
After I became more familiar with how FlutterFlow works, I started working on the other pages of my app. I also integrated Firebase for certain features, such as using it for authentication on the login page. This allowed me to set up a basic login flow to support user access. In addition, I began adding actions to some of the buttons to enable proper navigation between pages. This helped bring more interactivity to the app and made the overall user flow smoother. Each step gave me a better understanding of how to connect UI elements with functionality in FlutterFlow.
Fig 1.1Task 3 Process
Fig 1.2 Task 3 Process
Lastly, I added page transition animations to enhance the user experience when navigating between screens. Most of the transitions I used were fade-in and slide left/right effects, which added a subtle and polished feel to the app. These animations made the interactions feel more natural and visually engaging, aligning with the goal of this task to improve micro-interactions within the app.
Fig 1.3 Task 3 Process
FINAL SUBMISISSON
Video Walkthrough
REFLECTION
Experience
Working on this task was both challenging and rewarding. At the beginning, I struggled a lot with understanding how FlutterFlow works, especially when it came to setting up layouts and managing scrollable content. I made several mistakes, such as overusing ListView, which led to display issues and blank screens during testing. However, as I spent more time exploring the platform and troubleshooting errors, I gradually became more confident. I also integrated Firebase for authentication and learned how to add navigation actions to buttons, which helped me connect different parts of the app and create a better user flow.
Observation
Through this process, I noticed how crucial it is to understand the structure of widgets and the layout system in FlutterFlow. Small decisions, like choosing between a Container or ListView, had a big impact on how the app behaved. I also observed that building interactive elements such as page navigation or login functions becomes easier once the layout foundation is correctly set. Moreover, applying page transition animations like fade-in or slide effects made the app feel more polished and engaging, showing me how micro-interactions can significantly enhance the user experience.
Findings
One of the key takeaways from this task is the importance of experimentation and learning through trial and error. Initially, I felt overwhelmed by the number of components and settings, but by testing different approaches and observing their outcomes, I gained a deeper understanding of how FlutterFlow operates. I also found that even small animations or interactions can make a big difference in how smooth and intuitive the app feels. This task not only improved my technical skills but also helped me appreciate the value of thoughtful interaction design in creating a user-friendly app.
Comments
Post a Comment