Application Design: Task 4 Final Project

 7/6/2025

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Application Design 2

---

Table of Content

1. Instructions & Tasks

        - Submission Links

2. Reflections

---

1. Instructions & Tasks

Module Information Booklet

Task 4: Final Interactive Prototype

For this task, we have to complete and build on Task 3 by finalizing our app and implementing all the animations throughout all the screens using FlutterFlow. Since I've already built most of my screens for this app in task 3, I focused more on animations and enhancing the app even further for this final task. For reference, you can look back to Task 3 for the process from scratch.

Fig.1.0: Cara App Work Flow
on FlutterFlow

For my app redesign, Cara, I've divided the work flow into 4 main parts: 

1. Onboarding Flow

2. Screens accessed through the Navigation Bar

3. Uploading a Post Flow

4. Applying for a Job Flow

You can view it from figure 1.0 on the right, showcasing the page selectors on FlutterFlow. I've separated the pages into folders so that I don't lose track of them.

1. Onboarding Flow

Loading Animation

I animated a logo animation on lottie files then imported into flutterflow. This animation is used throughout the app as a loading screen, such as when you log in/sign up to the app, upload a post, and submit a job application.

Fig.1.2: Importing Lottie Animation on
FlutterFlow

Fig.1.1: Loading Logo Animation on LottieFiles

2. Screens Accessed through the Navigation Bar

Explore Page Animation

I decided to add another animation to the explore page, when a post from the staggered feed view is clicked, it expands the posts. I animated this page transition on after effects, because it didn't work when i attempted in on lottie files. So i downloaded the lottie plug-in and used that extension on after effects, then imported it into flutterflow, carefully positioning it so that it transitions seamlessly with the other components in the page. 

What's actually being animated on after effects is just the image itself, the rest of the content fades in using flutterflow's built-in 'on-load' animation.

Fig.1.3: Lottie Plugin on After Effects

Fig.1.4: Importing Lottie Animation on
FlutterFlow

3. Uploading a Post Flow

Attempt at Backend Query

For this flow, i attempted to have a backend query and built-in database for the gallery, in order for users to choose any image to post and make the prototype functional. So i made a database called 'cara_gallery', and linked all the images from the project's media.

Fig.1.6: Adding All Images in Query

Fig.1.5: Creating Database in Cara Project

However, when i added the query to my project and tried linking the image paths to the query, it does not show up, not even when i try to run it. It does say that there is a backend query in the debug panel, however it shows blank. Thus, after numerous failed attempts, i resorted to sticking with a mock-up prototype.

Fig.1.8:  Failed Attempt Test Run

Fig.1.7: Attempt at Linking Query to ListView

Uploading a Post Screens

Then, i moved on to creating the rest of the uploading flow's screens. For some clickable parts, i wrapped the containers with a mouse region, and programmed it so that when the mouse is hovered on top of it, there is a conditional value of the container fill color. 

Fig.1.9: Conditional Values with Mouse Hover
Region

Fig.1.10: Uploading Post Screen Process

Additionally, there are respective pop-windows for each situation. On the left is the bottom sheet for choosing a category for your post, triggered by pressing the 'add categories' button. And on the right, is an example of a feedback pop-up message, that follows the cara loading screen. I animated it so that it pops up automatically after the loading screen, then slides down and fades out. 

Fig.1.12: Successfully Posted Feedback
Pop-up Window

Fig.1.11: Add a Category to your Post Pop-up
Component

4. Applying for a Job Flow

Lastly, in this flow, is accessed from the jobs tab in the explore page. I've designed all the pages from my adobe Xd prototype on to flutterflow using stacks, columns, rows, and containers. As well as uisng flutterflow's built-in widgets like 'checkbox' for the job application question options, and customizing it.

Fig.1.13: Job Description Page Process

Fig.1.14: Job Application Page Process

Similar to uploading a post, when the 'submit' button is clicked, it takes you to the loading screen, which has 2 automatic actions: wait (delay) then navigation. It automatically navigates to 'Your Jobs' page after you have submitted your application.

Fig.1.15: Loading Screen Actions

The feedback pop-up "submitted successfully" pops up and slides down.

Fig.1.16: Successful Application Feedback 
Pop-up

Fig.1.17: Job Application Tracker Page Process

Submission Links

Flutterflow Cara App Project Link

Published Cara App Web Link

Cara App Final Project Walkthrough

Youtube Link to walkthrough

Reflections

For this final task, we were asked to build on what we started in Task 3, basically finishing our app and bringing it to life with animations throughout the screens using FlutterFlow. Since I already had most of my screens sorted out from Task 3, I shifted my focus this time to polish things up and really play with animations. I used lottie files and after effects for the animations, and really got to get used to working with flutterflow this time in comparison to my first time in task 3. Since I've done a lot of trial and error attempts, it made me get familiarized with the software more. However, i still struggled in some areas that included programming and more technical bits. I wanted to create an image gallery using backend query. However, when I tried linking the image paths and ran the query, it didn't work out. After multiple failed attempts to troubleshoot it, I decided to stick with a mockup version for now just to keep things moving.

Overall, this project had a good balance of wins and struggles. I learned a lot about how animations can improve the user experience, and realized that there's always room to learn more. Still, it was very rewarding having this app come to life and see how it's all cohesive. I'm glad I'm learning more tools to add to my skillset.