Application Design 2 - Task 4: Final Project

8/7/2025 - 29/7/2025 /  Week 11 - Week 15
Cindy Clarissa Leslie / 0367677
Application Design 2 / Bachelor of Design (Hons) in Creative Media
Task 4: Final Project

INSTRUCTIONS

 

Using FlutterFlow, we continued in our process of creating our app, to which I have progressed from the MVP function itself and completed most of the prototype functions.



Task 4: Final Project

Lottie animation

Before I went on with creating the rest of the pages, I first focused on improving the MVP and created an animation that is more similar to my Figma prototype since the animation presets in FlutterFlow wasn't good enough.

Figure 1.1 Animation added to profile page

For keyframes, I mostly used position, opacity and also masking before exporting them to Lottie in order to get the JSON file.

This is to add more visual feedback when the upload is successful, I created two of the profile pages, to which one has the animation from uploading and the other has none since it was navigated from the navigation bar.


Process

I went ahead and finished the remaining pages, which were the explore and community pages. Since I already did most of the list views, I could just copy paste them as a template and change the contents of the posts. Soon, I realize however that I had a lot of details and overlays which was inconvenient since FlutterFlow did not have an in built plugin especially for popups. Therefore I had to utilize page state to complete these.

Figure 2.1 Component creation

For all my overlays, I first created the components based on the Figma prototype, styling and aligning them as similar as possible using FlutterFlow's tools. Then I insert these components into the specific positions I want in the page.

Figure 2.2 Page state variable

Next, I created a page state variable, in a boolean type (true/false), meaning that there's only two values which is simple enough.

Figure 2.3 Applying condition onto the overlay

Next, selecting the component itself, I turned on the conditional visibility and added in the condition of the page state variable, selecting first equals to second value.

Figure 2.4 Applying animation

Next, I applied the on action animation, without it, the overlay would only appear on an instant and making it underwhelming. This was the base animation that I have applied onto my overlays.

Figure 2.5 Adding actions to trigger

Lastly, on the trigger itself, I added conditional actions, with the true condition being dismissing the overlay and the false activating it. I applied the same principles onto every overlays. Furthermore, I found that I could use the bottom sheet plugin, which is less tedious for pop ups from the bottom.

I tried to implement and use firebase onto the uploading part, unfortunately there were a lot of confusion and troubleshooting to do which led me to decide on just keeping it as a prototype.


Onboarding

Figure 3.1 Onboarding on FlutterFlow


Login/Sign Up


Figure 3.1 Login and sign up on FlutterFlow


Home Page

Figure 4.1 Home pages on FlutterFlow


Explore Page


Figure 5.1 Explore pages on FlutterFlow


Uploading


 
Figure 4.1 Upload Pages on FlutterFlow


Community page

Figure 5.1 Community pages on FlutterFlow


Profile page

Figure 6.1 Profile pages on FlutterFlow


Figure 7.1 Final storyboard on FlutterFlow


Final Task 4: Final Project

LINK TO WEBSITE (DESKOPT VIEW)

LINK TO VIDEO PRESENTATION

Figure 8.1 Final video presentation

REFLECTION

In this task, I actually felt like I familiarized myself better with FlutterFlow, I took the time to explore some of the tools and understand how to utilise some of them. Firebase however, was another problem, none of the tutorials that I had in this class could be implemented into my design since I chose a social media app. This was overall a challenge, but as the first batch to be using this tool, I hope that I can continue honing my skills in adapting and become a better problem solver. 

Comments

Post a Comment

Popular posts from this blog

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more

Experiential Design - Task 1: Trending Experience

Image
22/4/2025 - 29/5/2024 / Week 1 - Week 4 Cindy Clarissa Leslie / 0367677 Experiential Design / Bachelor of Design (Hons) in Creative Media Task 1: Trending Experience LECTURES Week 1: Lecture 1 Figure 1.1 AR playlist of past works by seniors During the first week, the lecturer mostly took time in class for introduction and providing us a playlist for giving us an idea on how getting into the module would look like. Each videos had a unique theme and concepts that have been tackled, whether it was educational, enterntainment, etc, each of the projects have utilized AR design for a certain function. This week overall, provided me ideas and inspired me to start brainstorming on what I should create for my project. Week 2: Lecture 2 User Mapping Empathy Map Tool used to articulate what we know about a particular type of user to: create a shared understanding aid in decision making Consider: what the user would say, think, do and feel Journey Map Mapping a journey or experience (task flow). ...
Read more