Application Design 2: Task 3
7/6/2025
ALTAIFI, LEEN MAAN A (0367698)
Bachelor of Design (Hons) in Creative Media, Taylor's University
Application Design 2
Table of Content
2. Reflections
1. Instructions & Tasks
Task 3: Interactive Component Design & Development
We must build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to explore and make creative decisions on the type of interactions to integrate into our app. The output of this task is a working animation element that are ready to be integrated in our final app. Such interactions include: Navigation Menu with interactive icons, Side Menu interaction, Pop Up boxes, Call to action buttons, and Page/Screen transitions.
Building Cara App on FlutterFlow Process
1. App Logo Animation + CTA button
I recreated the logo animation i've done in adobe Xd in Lottie Files, so I can import it on to Flutterflow. I used the lottie animation widget and linked the animation path via a json link. Additionally, upon loading the logo animation, a CTA button 'Get started!' fades in, prompting the user to launch the app.
 |
| Fig.1.0: Animating on LottieFiles |
 |
| Fig.1.1: Importing Lottie Animations to Flutterflow |
 |
| Fig.1.3: Onboarding Screens Process 2 |
 |
| Fig.1.2: Onboarding Screens Process 1 |
3. Log-in/ Sign-up Screens
Once the user presses the 'Join now' button, it transitions to the log-in/sign-up page by sliding upwards. Using the buttons, text-fields, and password widgets I set up the design layout of the screens, trying to make it look as similar as the prototype made in task 2.
 |
| Fig.1.5: Sign-up Screen Process |
 |
| Fig.1.4: Log-in Screen Process |
4. Home Page + In-page Navigation Tabs
After the user logs in, the screen fades into the home-page. In the home page, there are 3 sub-page sections. At first, I tried making the navigation tabs using containers, columns, and buttons, to have in-page navigation, but it was quite difficult to achieve that by using actions cause it required a bit of coding. Then, I found out there is a built-in widget specifically for in-page navigation in Flutterflow, so all that struggling was pointless haha. Thus, I used the TabBar widget to navigate the 3 sections within the page: Home, Latest, and Community.
 |
| Fig.1.7: Homepage Screen Process 2 |
 |
| Fig.1.6: Homepage Screen Process 1 |
5. Navigation Bar + Floating Action Button
Then, I built the bottom navigation bar, which includes: home, explore, notifications, and messages. At first, i tried making a custom navigation bar, which includes the create (+) button in the middle, however, I could not succeed at implementing the full functionality of it; I could make the buttons navigate the pages by adding 'navigate to' actions to its respective page, however, I couldn't implement the different button states in the navigation bar, so that the icons would change its state depending if the page is active or not. To solve this, i ended up using the built-in navigation bar in Flutterflow and customized it, so now when the page is active, the respective icon would turn into a filled icon, increase in size, and change color.
Additionally, I made the create (+) button an FAB (floating action button) on the bottom right of the screen. On screen load, it slides up from the bottom to its final position.
 |
| Fig.1.6: Custom Navigation Bar Attempt |
 |
| Fig.1.9: Homepage Screen Process 3 |
Across most screens, the top bar includes the user's logged in account profile icon at the left, the Cara app logo in the middle, and the hamburger menu on the right. Both the profile icon and menu open drawers upon clicking, which transition in by sliding from the side of which the button is clicked. I turned the drawers into components, then added an 'open UI widget: Drawer' upon tapping action.
 |
| Fig.1.11: Implementing Drawer 2 |
 |
| Fig.1.10: Implementing Drawer 1 |
In the home page's community tab, the user can scroll through the available communities, and press on a community to view its detail page, which transitions into a different screen by sliding left. In the community detail page, there's two page sections in the tab bar: Posts, and Groups. Users can join groups by clicking on them, and a pop-up window will slide up from the bottom showing more details about the selected group.
 |
| Fig.1.13: Community Detail Page Process |
 |
| Fig.1.12: Community Tab Process 1 |
Similarly to the menu drawers, I turned the pop-window into a component and linked it into the selected group via action > on tap > show bottom sheet. The 'Join group' button has a looped animation of a shimmer effect to engage users with the call to action button.
 |
| Fig.1.14: Pop-window Process 1 |
 |
| Fig.1.15: Pop-window Process 2 |
Upon clicking the create (+) button, it will transition into the gallery screen by sliding to the left. When selecting an image, a pop-window will slide up from the bottom, showing the selected image, 'Edit photo' button, and a cancel button.
 |
| Fig.1.17: Selected Image Window Pop-up Process |
 |
| Fig.1.16: Gallery Page Process |
8. Explore Page + Toggle On/Off Buttons
In the explore page, there are also 3 sections of in-page navigation via the tab bar, which includes: Explore, News, and Jobs. In the Explore section, I used the staggered view widget to have that scrollable, varied aspect ratio column of images. In the Jobs section, there's a column of listed jobs that users can select to view a detailed description of the job and apply for it via the app.
 |
| Fig.1.19: Jobs Tab Process 1 |
 |
| Fig.1.18: Explore Page Process |
 |
| Fig.1.20: Jobs Tab Process 2 |
 |
| Fig.1.21: Job Filter Window Pop-up Process 1 |
 |
| Fig.1.22: Job Filter Window Pop-up Process 2 |
 |
| Fig.1.23: Job Filter Window Pop-up Process 3 |
Invited Mr. Razif as a collaborator in my app:
 |
| Fig.1.24: Adding Collaborators to Flutterflow |
 |
| Fig.1.25: Deploying App on Web from Flutterflow |
 |
| Fig.1.21: Deployed Website- Cara App |
Cara Flutterflow Prototype Walkthrough Video
2. Reflections
Building the cara app in flutterflow has honestly been a whole rocky process. At first it was really challenging to get into, especially because it's a very new tool for us to use, so i was juggling trying to get used to the interface as well as figuring out how to recreate my adobe Xd prototype in flutterflow. i started by recreating the logo animation i made in adobe xd using lottiefiles, then pulled it into flutterflow with the lottie widget. that moment felt like a small win.
I definitely hit a wall trying to make custom in-page navigation. i was using containers and buttons and overcomplicating things when i could’ve just used flutterflow’s tabbar widget. same with the bottom navigation bar. i tried building it from scratch to include a custom plus button in the middle, but managing active states manually was way harder than expected. ended up switching to the default nav bar and just customizing it, which worked way better.
One weird thing was testing the app on web. some buttons didn’t show up or looked different from what i saw in the flutterflow editor. that part was frustrating and made publishing feel less predictable, but it turns out that it was because some of the animations i've used, such as the shimmer, did not load in the web, therefore upon publishing, i had to remove that animation.
Overall, i learned a lot from this task. Flutterflow has more built-in features than i expected, and sometimes i made things harder by not exploring them first. there were definitely moments where things didn’t work how i wanted, but i’m starting to see the app take shape, and that feels pretty rewarding. I'm looking forward to make the app feel whole in the next and final task.
Comments
Post a Comment