Utility Bill Payment Dashboard

The text showing the amount '81' is in a light gray on a white background and likely fails WCAG AA contrast requirements for normal text due to insufficient contrast.

Users with low vision or color blindness may have difficulty reading the amount payable, impacting usability and accessibility.

Increase the text color contrast by using a darker shade of gray or black for the amount text to meet at least WCAG AA contrast (4.5:1) on the white background.

The metric labeled 'CURRENT MONTH UNITS' only shows the number '1' with a small '°C Avg Temp' text below, which is confusing and mislabeled for a units metric possibly related to power consumption.

Missing or ambiguous unit labels can lead to misinterpretation of key metrics, damaging user trust and decision-making.

Provide a clear, relevant unit label or legend that corresponds to 'CURRENT MONTH UNITS' and separate it distinctly from temperature info if unrelated.

The navigation bar at the bottom shows icons and labels, but only the Home icon is highlighted, and other sections like Discover, Complaint, My Billing, and Accounts do not clearly indicate their active state or selection, making it unclear where the user currently is beyond 'Home'.

Users may get confused about their current location in the app and may struggle to understand navigation context, leading to frustration or disorientation.

Ensure that the currently active navigation item is visually distinct with stronger contrast or a different style to clearly indicate the user's current position in the app.

The 'AUTO PAY' toggle switch can be changed directly without a confirmation dialog or option to undo, which risks unintended activation or deactivation of payments.

Users could accidentally toggle automatic payments on or off, potentially causing missed payments or unwanted charges.

Add a confirmation prompt when toggling AUTO PAY or provide a clear undo option immediately after the change.

'PAY NOW' button initiates a payment but lacks any adjacent trust signals such as secure payment icons, privacy reassurances, or confirmation prompts.

Users may hesitate to proceed with payments without visible reassurances, reducing confidence and potentially decreasing payment completion rates.

Add clear trust signals near the 'PAY NOW' button, such as a lock icon, secure payment text, or a brief reassurance about encryption and data protection.

While the 'PAY NOW' button is visible, the screen does not provide any immediate indication of what happens after tapping it or any confirmation or success state to reassure the user.

Without clear next steps or feedback, users may become uncertain if their payment was processed, risking confusion and repeated submissions.

Implement a clear transition, confirmation message, or success state immediately after the pay action is triggered to guide users through the payment process.

Without clear orientation, users can become confused about the purpose of the screen and their current workflow, increasing cognitive load and reducing engagement.

Add a clear, descriptive screen title and optional subtitle or role indication at the top area to orient users immediately upon entering the screen.

Inconsistent button styling confuses users about button functionality and visual grouping, increasing cognitive load.

Standardize button styles (font weight, color, border) and align vertical spacing within the cards for consistency.

The bottom navigation bar uses small icons with labels beneath, but certain icons such as 'Discover' and 'Complaint' could be visually ambiguous without clearer labeling or tooltips, especially with red notification badges that distract from icon meaning.

Ambiguous or poorly labeled icons cause users to hesitate or guess navigation actions, harming usability and user confidence.

Add more descriptive labels, distinct iconography, or tooltip text for icons especially those carrying unread counts or notifications.

The toggle label 'AUTO PAY' uses a medium gray text on a white background, likely failing WCAG AA contrast minimums for normal text.

Insufficient contrast of form labels reduces clarity and can impair users' ability to understand form controls.

Make the label text darker to reach WCAG AA contrast minimum 4.5:1 relative to the white background.

The due date '14-05-2026' is displayed in DD-MM-YYYY format without any explicit label about the date format or timezone context.

Users from regions where MM-DD-YYYY is common might misinterpret the due date, causing confusion about the payment deadline.

Use an explicit date format with month name (e.g. 14 May 2026) and clarify or localize based on user preference.

Misalignment can reduce the perceived quality and professionalism of the app, potentially confusing users about related content grouping.

Adjust vertical alignment and spacing between 'Home', 'pay', and the phone number line so they share a clear baseline or vertical rhythm.

The auto pay toggle is placed very close to the 'Pay Now' button, creating two competing payment-related decisions in the same card.

Users may be unsure whether to tap 'Pay Now' or toggle Auto Pay, increasing cognitive load and slowing task completion.

Separate the auto pay toggle to a different screen or menu or clearly differentiate and explain the function to reduce confusion.

The label 'PKR' is shown above the amount '81', which may confuse users since it's typically used as a currency code rather than a symbol. The placement and font size hierarchy make it unclear if it is a label or part of the amount.

Users might be uncertain if 'PKR' is a label or part of the amount, which can cause confusion when interpreting their payable amount.

Replace 'PKR' with the currency symbol '₨' or clarify that 'PKR' is the currency code by formatting it as part of the amount or as a separate label with clear styling.

The '°C Avg Temp' text below the number '1' is shown in a mid gray on a white background and likely does not meet WCAG AA minimum contrast standards.

Low contrast makes it harder for some users to identify the label, impairing comprehension of the data.

Use a darker text color for '°C Avg Temp' to ensure at least a 4.5:1 contrast ratio with the white background.

The amount payable '81' in PKR and the red due date text have similar font weights and sizes, reducing clarity on which information is more important.

Users may not properly prioritize the payment amount over the due date or vice versa, negatively impacting the user’s ability to quickly understand payment information.

The 'SELF READING' button label is vague and not immediately understandable as to what action will occur, potentially confusing users.

Users might be unsure whether clicking this button updates meter readings or performs another function, possibly causing hesitation or errors.

Use a more descriptive label such as 'Submit Meter Reading' or 'Update Reading' that clearly states the button's function.

Users may not realize important app sections exist or waste time opening the menu, reducing smooth navigation flow.

Consider showing main navigation options more prominently or supplementing hamburger icon with visible buttons for frequent tasks.

The red color could cause unnecessary anxiety or confusion, potentially annoying users or causing misinterpretation of their bill status.

Use a neutral or less alarming color such as black or dark gray for future due dates and reserve red for overdue or critical warnings.

Small tap targets can cause user frustration and increase error rates by making it difficult for users to activate desired elements.

Increase the tap area of the notification badges or the entire icon to at least 44x44 pixels to improve tap target size.

Small tap targets may lead to difficulty in closing the floating panel, resulting in user frustration and errors.

Increase the touch target area of the close button to at least 44x44 pixels while maintaining visual design.

Close proximity of clickable elements increases the risk of accidental taps on the wrong icon, reducing usability.

Provide more spacing (minimum 8-10 pixels) between touch targets to reduce accidental activation.

A large promotional banner with detailed text and visuals occupies central screen space, competing with primary tasks like payments.

The banner distracts users from the main actionable information, increasing cognitive load and reducing task efficiency.

Reduce banner size, use simpler design, or move the promotion to a less prominent location after primary actions.

The 'SELF READING' button is visible but the UI does not provide any visible indication of what happens after tapping it, such as navigation or input form.

Add clear states or transitions that follow the 'SELF READING' action, like loading states, input screens, or confirmation dialogs.

The orange header uses minimal text ('Home pay' and a long number) without clear branding, tagline, or engaging hierarchy that distinguishes this screen's primary purpose visibly.

Users might not immediately recognize the brand, the exact screen purpose, or feel engaged, reducing initial user trust and clarity of the interface.

Add clear branding elements, a tagline, or a visually distinctive title with clear hierarchy. Reduce or better integrate the long number to avoid visual clutter.

The label 'CURRENT MONTH UNITS' with the numeric value '1' does not clarify the measurement units, although a small '°C Avg Temp' label is present below it, causing confusion about what '1' actually represents.

Users cannot reliably understand what the '1' value indicates, risking misinterpretation of usage data or performance.

Clarify the unit measurement explicitly in the main label or with an unambiguous sub-label near the numeric data.

In the 'Amount Payable' card, the 'PAY NOW' button and 'AUTO PAY' toggle are placed close together with limited spacing, potentially causing accidental taps on the wrong control.

Users may accidentally toggle auto pay when intending to press pay now or vice versa, causing user errors or frustration.

Increase spacing between the button and toggle or reposition them to reduce accidental taps.

The advertisement claims 'get up to PKR 5,000 cashback' in large text, but the terms and conditions are in much smaller text that might be overlooked.

Users might misinterpret the offer's generosity, leading to dissatisfaction or loss of trust if expectations about cashback amounts are not met.

Increase prominence or clarity of the offer's conditions, and include more explicit disclaimers in a readable size near the claim.

Scrollable cards each have distinct action buttons (e.g., 'Pay Now', 'Self Reading'), requiring users to decide among many possible next steps.

Users face multiple distinct action points in quick succession, increasing mental effort and potentially slowing decision-making.

Group related actions or prioritize the main action to reduce the number of immediate decisions visible.

The 'AUTO PAY' toggle switch is present but the screen does not confirm any change or provide next steps after the toggle is switched on or off.

Users might be confused whether the auto pay setting was saved or needs further action, potentially causing uncertainty or forgotten preferences.

Provide confirmation feedback or a state change indication when the toggle is switched, explaining what this means or suggesting next steps.

The promotional banner suggests a cashback offer but lacks a clear call to action or next step button to engage with the offer.

Users may notice the offer but be unsure how to proceed, reducing the promotion's effectiveness and user engagement.

Include a visible actionable button or link on the banner to guide users to participate or learn more about the promotion.

The 'AUTO PAY' label is positioned below the 'PAY NOW' button but does not have clear spacing or alignment, which can make the toggle control visually disconnected from its label.

Poor alignment could cause users to miss or misunderstand the toggle functionality, reducing clarity and ease of interaction.

Align the 'AUTO PAY' label properly with the toggle switch and ensure consistent spacing to visually link both elements.