Application Design II / Task 1

WEEK1-WEEK4

NAME: JIN RONG

I.D: 0361701

COURSE: Application Design II  / Bachelor of Design (Honors) in Creative Media

Application Design II / Task 1

---

INSTRUCTION

---

Week 1 

To Do List 

• Get analysis feedback from GPT, prompt out all the pros and cons based on your app MVP features.
• Update blog

Communicate with ChatGPT

✅ Highlights (good things)

Consistent visual style: color matching and font usage are consistent, in line with Jakob’s Law (users expect the interface to follow a familiar pattern).

Clear layout: the screen is divided reasonably and has a good hierarchical structure, in line with the Gestalt Law of Proximity (related elements are close together).

Intuitive icon use: icons are intuitive, which helps speed up user understanding and reduce cognitive burden (in line with Hick’s Law).

Sufficient button touch range: buttons are of moderate size and easy to operate, in line with Fitts’ Law (the larger the target, the easier it is to click).

🔵 Areas for improvement (optimization suggestions)

Area	Issue	Improvement Suggestion
Navigation Feedback	The current navigation switching lacks a clear active/selected state.	Add a highlight effect or a bottom indicator to show the current page, following Nielsen's Heuristic: Visibility of System Status.
Empty States	Some pages (e.g., booking confirmation) appear too sparse and empty.	Use empty state illustrations or short guiding text to make the page feel more complete. (Refer to Mobbin or Lottiefiles)
Micro-Interactions	Page transitions feel abrupt and lack smooth animations.	Add page transition animations (e.g., slide in/out) in FlutterFlow to enhance flow and align with micro/macro interaction theory.
Button Hierarchy	Some secondary buttons (e.g.,“Back”) visually compete with primary actions (e.g.,“Confirm”).	Differentiate primary and secondary buttons through color saturation or style, following Nielsen’s Aesthetic and Minimalist Design.
Accessibility	Text contrast is low in some areas (e.g., light grey text on a white background).	Increase contrast between text and background to meet WCAG 2.1 standards, ensuring better readability for all users.

How I Plan to Improve My TGV App UI

In reviewing my TGV app design, I identified several areas for improvement based on usability principles and feedback. Here is my detailed reflection and plan for enhancement:

1. Improving Navigation Feedback

I realized that the navigation switching currently lacks a clear active state, which may cause users to feel lost.

To improve this, I plan to implement a highlight effect or a bottom indicator that clearly shows which page the user is currently on. 

2. Enhancing Empty States

Upon reviewing pages like the booking confirmation screen, I noticed they appear too sparse when no data is available.

To address this, I intend to add empty state illustrations along with friendly guiding messages. This not only improves the visual experience but also maintains user engagement even when there is no content, aligning with human-centered design principles.

3. Adding Micro-Interactions for Smoother Flow

The current page transitions feel abrupt and could be improved.

I plan to introduce micro-interactions by using simple animations such as slide-in or fade transitions when navigating between pages. 

4. Clarifying Button Hierarchy

I observed that some secondary actions, such as the "Back" button, are visually as strong as primary actions like "Confirm".

To fix this, I will differentiate buttons by adjusting color saturation and style, making the primary actions more visually dominant. 

5. Improving Accessibility through Better Contrast

Lastly, I noticed that some text areas have low contrast, such as light grey text on a white background.

I plan to adjust the color contrast according to WCAG 2.1 accessibility standards, ensuring that all users, including those in low-light conditions or with visual impairments, can read the text comfortably.

Previous High-Fi Prototype of TGV App (Application Design 1)

Reflection: Improve readability of input fields

I noticed that some input fields used a very light gray for placeholder text. This resulted in insufficient contrast between the text and the background, making it difficult to read, especially for users with visual impairments or in low-light conditions.

To address this, I plan to:

Use a darker gray (e.g. #555555) for placeholder text to enhance visual clarity.

By doing this, I aim to make the form more readable, accessible, and inclusive, in line with good UX practices and demonstrating sensitivity to the needs of different users.

Before modification

After modification

Reflection: Improve Visibility

I found that the “Register Here” text at the bottom of the login screen was not visually prominent enough. It used a dull or low-contrast color, which made it blend into the background and reduced visibility—especially for first-time users who need clear instructions for the registration process.

To address this issue

I changed the text color to a brighter red (#D0021B), which is consistent with TGV Cinemas’ brand color and naturally draws attention.

Before modification

After modification

Icon design adjustment instructions

Highlight the key page icons: For the core page in the TGV App, "Booking", its icon is visually emphasized so that users can recognize the importance of this function at a glance and improve the efficiency of interface guidance.

Search bar icon optimization: Added "Search" copy in the search bar to enhance the intuitiveness and operational feel of the search function.

Before modification

After modification

Because the visual hierarchy is unclear

All menu items have the same weight, no priority, and lack of highlighting of the current page.

So I modified my navigation bar

Before modification

After modification

I found that I was missing the ability to expand the side navigation bar, so I created this part.

Adjusted Input Field Position

In the "Confirm Your Email" screen, I noticed that the input box for the verification code was too low on the page.

It looked different from the other two pages, and it felt unbalanced.

So I moved the input field higher, to match the same height as the other screens.

Now, the layout looks more consistent and the design feels cleaner and more professional.

Before modification

After modification

Modified FIGMA

youtube link