Application Design 2 - Final Application
22/04/26 - 07/24/2026 (Week 1 - Week 14)
Cindy Noverin / 0376409
Bachelor of Design in Creative Media / Taylor's University
Application design 2 - Final Application Development
TABLE OF CONTENTS
INSTRUCTIONS
MY PROGRESS WORK
Stage 1: UI Improvement & Color Redesign task 1
For the first stage of my final application development, I focused on improving the overall user interface and layout of my app, Focus Plant. Initially, when I looked at my early screen mockups, the colors were way too vibrant and bright. I felt like the high contrast and saturated background colors were actually creating visual noise and distraction, which totally contradicted the main purpose of a focus app! Since the app is meant to help students relax and avoid cognitive burnout, I decided to do a whole UI pass and change the color scheme into soft, nature-inspired muted greens and pastel neutrals.
I also spent time tweaking the visual hierarchy. I made sure primary action buttons like starting the timer stand out clearly, while secondary features were moved into clean pop-ups or modal components. It took a lot of testing to make sure the contrast was comfortable to read and that buttons were large enough to tap easily without feeling cramped on screen.
Stage 2: CRUD for To-Do List task 2&3
After polishing the visual style, I moved on to building the To-Do List feature. This was my first step in setting up the actual backend connection between FlutterFlow and Google Cloud Firebase. I wanted users to be able to create, view, check off, and delete their daily study tasks seamlessly.
Setting up the "Create" and "Read" actions was pretty straightforward using
Firestore collection queries to show items inside a
ListView.
However, I ran into a really frustrating issue when trying to handle the
"Delete" action! Whenever I clicked the trash icon to delete a task from the
database, the item actually deleted in Firebase, but it would still stay
rendered on my app screen unless I restarted the entire test mode session. I
realized FlutterFlow wasn't instantly updating the local UI state after
deleting. To fix this, I learned that I had to add a
Database ➔ Refresh Database Requests action immediately right after
the Delete Document action in my Action Flow editor. Once I added that,
deleted tasks disappeared instantly!
Stage 3: Core Timer Logic, Firebase CRUD & Indexing (Week 12)
Stage 3 was definitely the most technical and challenging part of the whole
build process. This is where I built the core Pomodoro timer engine and the
Focus Log history feature. I needed the app to calculate the completed focus
time when the timer hits zero, update the user's currency counters (Sunlight
and Waterdrops) in Firebase, and automatically create a new document inside
a focus_history collection.
So when making this timer I had a lot of problems first is when I plan to have one timer and put all of the action into ONE , if the current session add up to the max sessioon selected by the user, then the timer is over, but when the its not you are still in focusmode, where when your timer ends you will get a notice for break, focusmode is switched into false, action 5 then the timer becomes the breakminutes timer ( I have question about this.. wont it overlap or its more logic cus I thought you reset the timer to break first then update page state), then the minute timer starts, once the timer ends since its not isfocusmode anymore, we should be at false condition where vise versa, you got a break alert, then the page starte turen into is focus mode true, then the timer resets to the value of the focus timer, then the timer starts, them when the timer is over since it is true then it will navigate loop back to the true condition untill the number of sessions is over , the problem here , I havent explain the sessions number because when I added it earlier even though I pick 2 sessions, they still treat it as 1 pair of sessions and end it before continueing on the second session if I put it in action 4, but when I put the increment session in action 8, it restarted the break session instead. where do we actually add the session so it loops,
I tried to put this action logic to the tasks and it doesn't work as well as I expected because when the timer ends it research the action to when the timer and so it keeps going to the conditional where it's true and never start the false action even though you already made the isfocusmode boolean false, so I tried a lot of ways to fix this and I ended up with having to choose two timer instead because having one timer wouldn't work if I want the action to be different, and one thing about this problem is that it had me crashing out because I have to wait every two minutes till an hour pop out because that's how long the timer has limits and even if I adjust the timer to be quicker the whole logic will crash and I have to wait two minutes every time just to see if the timer works or not, and what pisses me off more is when the test mode limits to 10 minutes only and when I just don't do anything at all it will pause the sessions to sustain energy or smth so I had to wait all over again, like I couldnt even do anything because my Ipad is extended to my screen and I cannot play any game while I wait for that timer to end and show the result I do not want
other than this action loop error, there are more error to come, and all
I do is debug create and debuc and create, I ran into a massive red
error notification in Test Mode saying
Firestore Indexes Error on ListView: The query requires an index. I was so confused at first! It turns out that because my query was
filtering by
user_ref
while simultaneously sorting by
timestamp
descending, Firestore blocked the query because it needed a custom
composite index to be built on Google Cloud. Fortunately, I was able to
deploy the composite index straight from FlutterFlow to Firebase, but I
had to wait a few minutes for Google's servers to build it before the
error went away.
Stage 4: Adding Animations & Micro-Interactions
To make the app feel more alive and rewarding, I worked on integrating micro-interactions and visual feedback during this stage. I wanted users to feel a subtle sense of accomplishment whenever they complete a session or finish a task.
To be honest there isn't much that I do for this micro and micro interaction because flutter flow would automatically animate it transitions between pages unless I adjust them and all I did is just adding the kind of transitions that I want but somehow when I want to make transitions between navigation bar it doesn't work so I'm leaving it at that. And for animations like hero animations where picture transitions to another page as it animates I don't have any picture to transition too so I don't have hero animation.
Stage 5: Finishing Touches & Security Rules (Week 14)
In the final week, I focused on tidying everything up before recording my final video presentation and submitting the project. I conducted a full responsive layout audit across different screen sizes to make sure no paddings or texts were getting cut off.
I also set up my Firestore Security Rules in Firebase to ensure ethical
coding and data security. I made sure that read, write, and delete permissions
for users,
todos, and
focus_history collections were strictly locked
to authenticated users, meaning students can only view or delete their own
data and nobody else's. Finally, I tested the whole task flow end-to-end to
ensure the live app walkthrough and real-time database sync would run without
bugs during my video recording.
FINAL RESULT
REFLECTION
Experience
Throughout Week 1 to Week 14, I worked on designing and building my final application, Focus Plant, using FlutterFlow and Google Cloud Firebase. The process was both exciting and challenging because I had to manage UI/UX visual design, frontend logic, database structures, and backend queries all by myself. Working through the conditional timer logic, composite indexing, and fixing layout overflow errors was quite stressful at times, especially when things didn't update instantly on screen. However, seeing the real-time data sync smoothly between my app UI and Firebase was super satisfying!
Observation
I see that mobile application development requires a deep understanding
of both user experience and technical constraints. For example, my initial
color choices looked fine at first glance, but when considering long-term
student focus and cognitive fatigue, I realized that softer, lower-contrast
palettes were far better for accessibility and reducing visual noise. On the
technical side, I noticed how important database indexing and layout
constraints (like using Expanded widgets) are, if you don't
constrain lists properly, Flutter layout constraints break easily on mobile
viewports.
Findings
From this final project, I learned that building an app requires a lot of problem-solving, patience, and transparent documentation. I realized that hitting technical roadblocks—like missing Firestore indexes or UI refresh bugs—is completely normal, and knowing how to troubleshoot them in Firebase or FlutterFlow is a key skill. Technically, I greatly improved my understanding of CRUD operations, authentication, state management, and real-time database structures. Overall, this project helped me gain much more confidence in full-stack mobile app design and development, and showed me how important it is to design with empathy for the user's mental well-being.
Comments
Post a Comment