Parking Session Setup

The screen shows a 'Pay For Parking Now' button but lacks any visible confirmation, loading, or success state after pressing it.

Users may be uncertain if their payment request was successfully processed or if it is still in progress, causing confusion or reattempts.

Add visible feedback states such as loading indicators, success messages, or error notifications after the payment button is pressed.

Misaligned modals create a visual imbalance that can reduce perceived app quality and make the UI feel less polished.

Text labels 'LOCATION', 'DBKL', 'VEHICLE', and 'DURATION' appear as faint light gray on white background, likely failing WCAG AA contrast ratio of 4.5:1 for normal text.

Increase the text contrast by using a darker gray or black for these labels to meet WCAG AA contrast ratio minimum.

The 'END AT' time shows '1:56 PM' without any timezone indication, which could confuse users if they are in different timezones or if the app serves multiple regions.

Users may misinterpret the parking end time, leading to incorrect parking durations or potential fines.

Add a timezone indicator or clarify that the time shown is local to the user's location.

The primary call to action button text is 'Pay For Parking Now', which is somewhat long and could be more direct for quicker user comprehension.

A clearer and more concise CTA increases the likelihood of users understanding what action to take, reducing friction in completing the payment.

Simplify the CTA text to something like 'Pay Now' or 'Confirm Payment' for quicker recognition and reduced cognitive load.

The duration is adjusted using two separate buttons (+ and -), requiring multiple individual taps to reach the desired time, which can slow down the process.

Users may waste time and effort repeatedly tapping buttons instead of selecting a precise duration quickly, increasing cognitive load.

Allow direct input of duration or provide a slider or dropdown with common durations to reduce steps.

The UI uses uniform font sizes and weights for all information except the final total cost and end time, which are slightly highlighted. However, the main action button 'Pay For Parking Now' blends in with the background and does not visually stand out as a strong call-to-action.

Users may not immediately recognize the primary next step, reducing the speed at which they can complete the parking session and potentially causing hesitation or confusion.

Increase the prominence of the action button by using stronger contrast, a more vibrant color, or additional visual affordances like drop shadows or animated effects to draw user attention immediately to the pay option.

The icons and labels for 'Resrents' and 'Settings' in the bottom navigation bar appear medium gray on a white background, possibly below WCAG AA contrast ratio of 3:1 for UI components.

Low contrast in navigation icons and labels reduces discoverability and usability for users with low vision or in poor lighting.

Use darker colors for inactive icons and text labels in the bottom navigation to improve visibility and compliance.

Labels such as 'LOCATION', 'VEHICLE', and 'DURATION' are similar in size and weight to their values, causing weak text hierarchy and making it harder to quickly distinguish headings from content.

Users may have to spend more time processing information, reducing efficiency and increasing cognitive load.

The navigation bar is present but the activeness of the current tab is only subtly indicated by a small blue icon below the 'Parking' tab, which could be missed by users, offering poor orientation within the app.

Without a clear indicator of which section is active, users can become confused about where they are in the app, leading to frustration and navigation errors.

Increase the visibility of the active state in the navigation bar, such as by changing the text color, background, or icon color of the active tab more distinctly.

There are separate edit icons next to both the location and vehicle fields, requiring user decisions to either confirm defaults or edit both entries.

Users must decide whether to edit each field before paying, which can cause hesitation or confusion.

The modal uses thin line icons for the close 'X' and edit pencil icons but presents them with different stroke weights and sizes, breaking consistency.

Style inconsistency in icons within the same UI component reduces cohesion and can confuse users about actions.

Standardize icon stroke weight, size, and visual style across the modal's icons to create a uniform look.

The minus and plus duration adjustment buttons around the '1 hr 00 min' label appear unevenly spaced horizontally, disturbing balance.

Unequal spacing around interactive elements creates subtle visual discomfort and can impair quick comprehension.

Adjust the spacing CSS properties to ensure equal padding/margin between the buttons and the duration text.