TASK 3: INTERACTIVE COMPONENT DESIGN & DEVELOPMENT
In this task, we will build upon the knowledge and concepts developed in Task 2 to create functional micro-interactions and animated elements for our app. Unlike Task 2, which focused on visualising ideas, this task requires us to develop actual working components using HTML, CSS, and JavaScript, with the option to use animation frameworks if necessary. The aim is to enhance the user experience by exploring and implementing creative interaction designs. We are only required to focus on the main flow pages of our app, ensuring that the core navigation and user interactions are smooth and engaging. These interactive elements may include navigation menus, side menu animations, pop-up boxes, call-to-action buttons, or screen transitions. By the end of this task, we are expected to deliver working animated components that can be integrated directly into the final app prototype.
Figma Prototype:
Process:
I began editing the Signup and Login Pages into my app's design when we had the tutorial in class. We worked on firebase to set up the email register and log in. Beginning with this task, I started the Onboarding pages as it was simple to complete. Then, I created the Splash screen by adding the Watsons logo made in LottiteFiles which was a small enhance of the logo.
splash screen- logo animation
Moving on, the home page includes sections like the scrollable promotional banner, vertically scollable sections like the trending products, coupon zone, and feature brands.
promotional banner
I initially applied a navigation bar for the main pages but later removed it as the project progressed. Some features on the page caused issues with the default navigation bar — when the page was duplicated, a new icon appeared on the navigation bar that couldn't be removed and wasn't what I wanted. So, I redid it and created a completely new navigation bar as a component. This allowed me to manually apply it only to the pages where I wanted it to appear.
flutterflow default nav bar(left) created nav bar component(right)
A problem I encountered was an extra white space or container overlapping when scrolling. I tried many times to fix it and even asked my peers, but no one could figure out the cause. In the FlutterFlow editor, everything looked fine, but in test mode and the published web version, the white space appeared. I adjusted the padding, alignment, and various container settings, even disabled the safe area—but nothing worked. After several attempts, I eventually created a component and replaced the problematic section using Stack mode. I don’t exactly remember how, but somehow that finally solved the issue.
extra white space or container overlapping when scrolling
Another problem I faced was an error bug that occurred when trying to navigate from the home page to the product detail page. After checking the other pages, I found the issue and managed to fix it by adding the correct query collection — and then it worked.
After completing the layout and design of the app, I moved on to adding animations to enhance the overall user experience. I carefully applied animations to all the pages to make transitions smoother and more engaging. For certain pages, I added delay effects to create a more polished and intentional flow, especially when loading content or switching between screens. This not only improved the visual appeal but also helped guide the user’s attention to key elements as they navigated through the app. The process involved some trial and error to get the timing and motion just right, but the end result made the interactions feel more dynamic and responsive.
This task was both challenging and time-consuming, especially when it came to figuring out how interactive components should behave across different screens. Using FlutterFlow, I had to explore different tools and logic options through many attempts before things worked the way I wanted. While some parts felt straightforward, others—like fixing bugs or making sure components responded properly to user actions—took a lot of trial and error. Despite the difficulties, I enjoyed the process of turning designs into functional elements and seeing everything come together.
Observations
I observed that certain issues only appeared during test mode or after publishing, even if everything looked fine in the editor. This made testing and rechecking an essential part of the process. I also noticed that turning certain sections into components not only helped with reusability but also gave more control when troubleshooting layout or interaction issues. Small details, like visibility conditions or action timing, made a big difference in the final user experience.
Findings
Through this task, I found that developing interactive components is just as much about planning as it is about building. I had to think carefully about how each component would be reused, how it would respond to different inputs, and what kind of data it would require. This made the design process feel more structured and intentional. It was also a challenging and time-consuming process that involved a lot of exploration and trial-and-error. I often ran into unexpected issues—like layout bugs or components not behaving correctly—and had to test many different solutions. In some cases, the fix was something I didn’t expect, such as switching to Stack mode or converting a section into a component just to gain more control. Overall, this task helped me improve my problem-solving skills and gave me a deeper technical understanding of how interactive elements work. Despite the challenges, it made me more confident in handling complex features and thinking ahead when designing for functionality.
24.04.2025 - 15.05.2025 / Week 1 -Week 4 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media Application Design I/ DST60504 / Section 01 Task 1: App Design 1 Self-Evaluation and Reflection TABLE OF CONTENTS 1. INSTRUCTIONS 2. EXERCISES 3. TASKS 4. FEEDBACK 5. REFLECTION INSTRUCTIONS CLASS EXERCISES WEEK 3 EXERCISE To redesign a boarding pass based on prioritizing the main information. We were given an information page and we worked in groups to design a boarding pass. process Outcome WEEK 4 EXERCISE To create a task flow chart/wireflow chart for a booking app. Our group have chosen a cinema app (booking movie). Task flow chart for cinema app TASKS TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION For this task, we need to reflect on the final project we created in Mobile App Design 1. The main goal is to evaluate the app we designed, identify what didn’t work so well, and think of ways to improve th...
03.02.2025 - 17.02.2025 / Week 1 -Week 2 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media Information Design / GCD60504 / Section 01 Exercises TABLE OF CONTENTS 1. LECTURES 2. INSTRUCTIONS 3. EXERCISES ↪ EXERCISE 1 ↪ EXERCISE 2 4. FEEDBACK 5. REFLECTION LECTURES INSTRUCTIONS CLASS EXERCISES EXERCISE 1: QUANTIFIABLE INFORMATION Objective: Quantify raw data and visualize information through a photograph. Create a visual representation of numerical data that allows for easy interpretation and analysis. Instructions: Gather a set of objects and categorize them based on quantifiable factors such as color, shape, or pattern. Arrange the objects in a presentable layout or chart. Clearly label the quantities and data using written indicators (e.g., pens or markers). Example Objects: Box of LEGO pieces Jar of buttons Jar of marbles Set of colorful rubber bands M&Ms, coins, or other small items The goal of this exercise is ...
11.11.2024 - 12.01.2025 / Week 8 -Week 16 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media Application Design I/ DST60504 / Section 01 Final Project: Hi-Fidelity App Design Prototype & E-portfolio TABLE OF CONTENTS 1. LECTURES 2. INSTRUCTIONS 3. TASKS 4. FEEDBACK 5. REFLECTION INSTRUCTIONS TASKS FINAL PROJECT: HIFIDELITY & E-PORTFOLIO After completing the low-fidelity app design prototype, I transitioned to the high-fidelity version. To start, I used the Color Shades Finder tool to refine the color palette. One of the issues with the Watsons app is its lack of a consistent color theme. While the current colors somewhat represent the brand and make the app recognizable, they can also feel overly distracting. For the high-fidelity prototype, I focused on creating a more cohesive and simple color theme. In the existing app, green, blue, pink, and various gradients are frequently used. For this redesign, I chose colors...
Comments
Post a Comment