Labels

Application Design II - Final Compilation & Reflection

Picture Source: Mobile App Design Process – The Ultimate Guide | Buildfire

21/04/2026 - 27/07/2026 / Week 1 - Week 15

Aquela Zefanya Soares / 0374377

Application Design II / Bachelor of Design (Honours) in Creative Media / Taylor's University

TABLE OF CONTENTS 

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1HU1ciGlSoM2iKFaMfzwI-Xd2FVs268EE/preview" width="640" height="480"></iframe>

LECTURES

Week 1

In this week, Ms. Nurul briefed us about our upcoming project and the deadlines. Before starting the class, she told us to ask our peers and any AI engine about our Application Design I project and show which page(s)/part(s) we were most proud of. Then, we asked them for feedbacks on what, where, and how our previous project could be improved.

Week 2

  • 4 levels of mobile UX:
    • functionality (utility) → essential main task, ex: login page (front-end)
    • reliable (performance) →  whether its stable or not, error or not
    • usable (ease of use) →  user-friendly, need to be mindful of "thumb zone", standard is 44x44 px
    • pleasurable (delight) →  whether user give positive or negative feedback, ex: haptic feedback (vibration) means good interaction 

TASK 1

In this task, we were required to redesign our Application Design I project. Before starting the class, our lecturer asked us to gather feedback from our peers and an AI tool about our Application Design I project. After that, we fixed our design on what could be improved.

App design 1 project:

Fig 1.1 Homepage, Check in page, Book flight page (left to right)


Fig 1.2 My trips page, User page, Boarding pass (left to right)

Looking at my App Design 1 project, I realized several flaws when I reviewed it again by referring to feedback from friends and AI. I mostly lack in usability and accessibility. Back then, I was focusing more on aesthetics rather than the two aspects I mentioned (usability and accessibility). Referring to my hi-fi prototype, I put more thought into the homepage compared to my other pages (refer to the images above).

Regarding my homepage, the floating search bar looks detached from the layout and is hard to reach with thumb. In addition, the hero image is too big and covers most of the page. The issue is that mobile users (including myself) prefer quick access to information, I feel like I should have considered the users more instead of my own aesthetic preferences. With the help of AI from the tutorial’s class, I also realized that the text in the promotion cards is difficult to read, which means there is an issue with the contrast. Aside from that, there are also problems with my header being too crowded, some circular icons looking slightly small, and the drop shadows being too heavy. However, the AI also mentioned that my overall design is already modern enough for today’s standard.

What I improved: 

In the previous tutorial class, I asked Gemini (Google AI model) what could be improved better in my design (I mostly asked feedback for the homepage). The AI mentioned that my design lacked in several areas such as: the layout not being thumb friendly, weak contrast in several areas, the header looking crowded, the hero image being too large, the search bar looking floating, and the drop shadows on some buttons being too heavy, making it feel a little outdated. 

 
Fig 1.3 Before and after adjustment (Homepage)

After receiving the feedback, I began doing some research on several airline apps and searching for inspirations from Pinterest. Then, I started readjusting my layout by reducing the hero image size so users can clearly see the buttons without having to scroll a little. While looking for more inspirations, I realized that my current app didn't feel as welcoming as other apps. Therefore, I decided to move the greeting "Hello, User!" into the hero image area and add "Where do you want to go?" to guide users to the search bar. In the process, I also fixed the search bar position so it doesn't look floating or detached from the rest. The, I darkened the hero image so that the greetings look more visible.


Fig 1.4 Drop shadow before (top) and after adjustment (bottom)

For the drop shadow, the adjustment I made is not really visible. However, I reduced the blurriness and the distance to ensure the buttons don't look dirty while still looking interactable.

Fig 1.5 Promotions area, before and after adjustment (homepage)

Looking at this area again, I realized that the contrast in the promotions area needed to be fixed. Here, I only made small adjustments to improve it, first by darkening the image and changing the “limited deals” color to improve the contrast. I also added a drop shadow just enough to make it pop. 

Fig 1.6 Header before and after adjustment (left to right)

The last thing I did was to make every header page more cohesive by changing the header from a solid color to an airplane overlay, similar to my homepage hero image. After making adjustments to my previous project, I asked several friends for their opinion, and they showed positive reactions to the current design. Ps: they didn’t know I was doing a redesign, so I showed them a comparison and asked which design they liked the most.

Regarding my previous project, the main issues I faced were time management and procrastination. I had many similar deadlines in the previous semester, which made it difficult for me to fully focus on this project, especially since the time given was only 14 weeks. I took too long in the research process and didn’t have enough time to apply some of the advice from my app testers. During my lo-fi prototype stage, my testers mentioned that the app was already usable and easy to understand, although they suggested adding or improving some functions. However, after developing the hi-fi prototype and reviewing it again, I realized that there were still several usability and accessibility issues that I overlooked. Furthermore, I sometimes procrastinated when I felt like my progress was already good enough. I then focused on other modules and forgot to continue my app redesign project until I realized I was running out of time.

Now that I have realized my mistakes, I would like to improve my habits in the future. Even if I feel that I have made good progress, I need to constantly review my work and ask for feedback from my peers to identify issues early and avoid repeating the same mistakes. Additionally, as AI tools are now more advanced, I can use them to check and improve the usability of my projects anytime. I also need to learn more about WCAG guidelines and general mobile design rules of thumb so that I can focus more on usability and accessibility instead of only aesthetics. Lastly, I will do more research on good app design practices to avoid issues such as poor icon sizing, overly large hero images, and ineffective button placement in my future projects.

Figma

Fig 1.7 Figma prototype

TASK 2

In this task, we were required to import our Figma design into FlutterFlow (making improvements or using FlutterFlow's templates whenever needed). We then had to implement CRUD functionality for the app's main task, with approval from Ms. Aiman.

Sign Up Flow

In the flow, the first page leads to Login page, however there is a tiny button that leads to the Sign Up page.

Fig 2.1 Sign Up button in Log In page

This is how the Sign Up page looks. If the confirmed password does not match the password, a warning message will be displayed before the user can continue to the login page.

 
Fig 2.2 Sign Up page, Dialog confirmation, Log In page (left to right)

Log In Flow

When the email or password does not match the database, a warning message will pop up. If the credentials match the database, the user will automatically be redirected to the homepage.

Fig 2.3 Log In page, Dialog confirmation, Homepage (left to right)

Create Flow

My main task flow's Create process was initially encountering an error, which prevented me from properly testing the Read, Update, and Delete functions. This issue was later fixed in Task 4, where the final working result can be seen.

While working on Task 3, I realized that what I had documented as the Create process was actually the Update process. Instead of creating a new record, it was only updating the existing hardcoded data. After discovering this mistake, I corrected the implementation, and the final working version can be seen in Task 4.

Fig 2.4 Comment section (replying)

Read Flow

When the user updates their comment, they will be redirected back to the Read flow, where they can view the updated comment on the post.

Fig 2.5 Comment after edit (updated)

Update Flow

Pressing the comment will take the user to the Edit Comment page, where they can edit their original comment (the result can be seen in the Read section).

Fig 2.6 Editing a comment

Delete Flow

When a user long-presses their comment, the comment will be deleted automatically.

Fig 2.7 Comment thread after deletion

TASK 3

In this week, we continued working on the project by adding micro and macro animations. I decided to keep the animations simple because my app is an airline app designed for users of all ages, especially those who are old enough to book flights on their own. I felt that making the animations too complicated or adding unnecessary transitions could negatively affect the app's usability. Instead, I wanted the animations to enhance the user experience without becoming a distraction.

Micro Animations

Button Hover and Scale Animation

To make the button scale when pressed, I first added an animation in the 'On Action Trigger' section. Then, I configured the hover animation for the tint and adjusted the settings in the button's hover section. Finally, in the 'On Tap' button action, I added a 'Widget Animation' as the first action to ensure the button scales first before performing its intended action.

Fig 3.1 Scale and Hover configuration and result

Snackbar

For the snackbar, I first created a conditional action. If the condition was not met, I added a 'Show Snack Bar' action to show the warning message.

Fig 3.2 Snackbar configuration and result

Lottie Animation

Fig 3.3 Lottie animation configuration and result

Shake Animation and Haptic Feedback

 
Fig 3.4 Shake and haptic configuration

Loading Indicator

Fig 3.5 Loading Indicator

TASK 4

Updated Flow

For the account creation process, I did not make many changes apart from adding a new Create Profile page for users who sign up with their email. To create this page, I used one of FlutterFlow's templates, added a backend query for the user profile, and then configured the button to navigate to the homepage.

Flow: Splash Screen ⟶ Login ⟶ Sign Up (if the account isn’t registered yet) ⟶ Create Profile (email only) ⟶ Home Page

Fig 4.1 New account updated flow

Main Task (CRUD):

  • Create new account (email):
    • Email: Sign Up → Log In → Create Profile → Home Page
Fig 4.2 

  • Create new account (gmail):

    • Gmail: Sign Up → Log In → Home Page


  • Create: 



  • Update:


  • Read:


  • Delete:


Comment (CRUD):

  • Create: 


  • Update:


  • Delete:
  • Read:



FEEDBACK

Week 2

This week, we discussed with Ms. Aiman where to implement the CRUD functionality based on our Figma design. After the plan was approved, I started importing my Figma design into FlutterFlow.

Week 4

I had difficulty setting up the List View because it did not duplicate the way I wanted. I then asked Ms. Aiman for help on how to fix it. After that, Ms. Aiman guided me through setting up the query, and the List View is now working properly.

Week 13

In this week, Ms. Aiman checked the results of all tasks before moving on to Task 4. I explained that my main CRUD functionality was still in progress because I was fixing an error in the backend. She confirmed that my Task 3 was completed and allowed me to proceed with fixing the CRUD functionality for the main task.

REFLECTIONS

In this module, I learned how to use a new platform and gained some basic knowledge about backend development. I realized that backend development is much more complicated than I expected. Even with the help of FlutterFlow, where I didn't have to build everything from scratch, I still found it difficult to understand how to properly implement everything. However, through practice and with the help of AI, I gradually gained a better understanding of what backend development actually is, even if it's only at a surface level.

This project also made me appreciate backend developers a lot more. I now understand that there's so much happening behind the scenes, and it definitely isn't as easy as it looks.
I also learned that FlutterFlow can be really helpful for designing and building applications because of its templates and AI features. However, I still found it quite difficult to use. I ran into a lot of errors, and sometimes it wasn't very helpful when it came to explaining what went wrong. Some of FlutterFlow's debugging features also require a paid plan, so I often relied on my browser's developer console to figure out the problems instead.

Another thing I found frustrating was that FlutterFlow would sometimes let the app run even when the backend wasn't working properly. At first, I thought everything was fine because the app would load, but later I realized that some backend functions still weren't working as expected.

Overall, I went through a lot of different emotions while working on this project. It was challenging and frustrating at times, but I also learned something completely new. Even though my understanding of backend development is still only at a surface level, I feel like this project gave me a good starting point. I hope to continue improving my skills and apply what I've learned to my future projects.


Labels:

Comments

Post a Comment