Community Complaint App

Multiple screens show buttons with inconsistent styling such as different colors (orange, blue, white), shading, and border styles which breaks visual unity. For example, the 'Sign up' and 'Sign in' buttons use orange with rounded edges, while 'Continue' and 'Next' buttons use white backgrounds with black borders or filled blue.

Inconsistent button styling confuses users by making interactive elements less predictable and decreases overall perceived professionalism.

Define and apply a consistent button style guide including colors, border radii, font weight, and states across all screens.

The 'Upload your pic' area with the icon in the 'Enter Society Details' screen is outlined with a dotted border but lacks prominent button or upload affordance styling.

Users may not recognize the area as tappable to upload a photo, causing confusion or missed interactions.

Improve the visual affordance by adding a button style or clearer upload icon and label.

The signup flow is split across multiple separate screens requiring users to go step-by-step entering basic info, selecting role, and providing society details.

This elongates the signup process and forces users to perform many small steps rather than completing information in fewer screens, increasing cognitive load and perceived effort.

Combine related inputs onto fewer screens and reduce the number of micro-steps required before completion.

The first screen (iPhone 16 Plus - 19) shows only the app logo without any visible button or prompt to move forward.

Users may be confused about how to proceed from this screen, causing friction or abandonment.

Add a clear call to action such as 'Get Started' or automatically transition to the next screen after a short delay.

The grey text above the sign-up/sign-in buttons ('Ab Society Ki Dikkat Chhutkiyo me Khatam') has low contrast against the white background, which likely fails accessibility guidelines.

Increase contrast by darkening text color or changing background or text style to meet WCAG AA standards.

The complaint detail screen acquiring input (iPhone 16 Plus - 17) does not show any loading or error states upon submitting a complaint.

If submission fails due to network or validation errors, users will not know why or what to do next, causing frustration or drop-off.

Implement clear loading indicators, error messages, and success confirmations linked from this screen.

The 'Upload a picture of the Issue' section has a pink background with instructions that could confuse users if the camera icon is the only way to upload images or if file selection is also possible.

Users may be uncertain how to submit photographic evidence of their complaint, potentially reducing complaint quality or causing frustration.

Clarify upload instructions and ensure multiple upload methods are clearly indicated and easily accessible.

The complaint description input uses placeholder text: 'E.g. Lift Stucked in the basement' which includes a grammatical error and may confuse users on what to input.

Unclear or incorrect examples can confuse users about what details are required and reduce input quality.

Use clear, grammatically correct placeholder text like 'e.g., Lift stuck in the basement' to better guide users.

In the category selection screen for complaints, icons with no labels or unclear meaning are shown for 'Water', 'Security', and 'Stray Animals' among others. Some icons have small text but others only rely on icons which may confuse users.

Users might misunderstand what an icon represents, leading to incorrect input or frustration.

Add clear textual labels near all icons and consider tooltips or short descriptions for clarity.

The category selection screen presents multiple clickable tiles with similar size and style, which can cause difficulty in distinguishing priority actions or guidance.

Users may hesitate or make wrong selections due to visual clutter and lack of emphasis on primary options.

Reduce the number of simultaneous choices displayed or use visual hierarchy and grouping to emphasize most relevant options first.

Several buttons are labeled 'Continue' without clarification of what action will be completed next, e.g., on screens for society details (iPhone 16 Plus - 26) and welcome form (iPhone 16 Plus - 27).

Users may be uncertain about what will happen next by clicking 'Continue', which can reduce confidence and conversion rates.

Replace 'Continue' with more descriptive labels such as 'Next: Society Details' or 'Proceed to Dashboard' to clarify the action outcome.

The 'Enter Society Details' screen (iPhone 16 Plus - 26) and 'Complaint Details' form (iPhone 16 Plus - 16) show multiple input fields without clear grouping or section breaks, making the form appear dense and potentially overwhelming.

Ungrouped form fields reduce scanability and can increase user effort, causing form abandonment or errors.

Group related fields under descriptive headings and add spacing to visually segment form sections.

A tonal mismatch could reduce perceived empathy and seriousness, potentially lowering trust and satisfaction for users reporting critical issues.

Adjust colors and imagery to a more neutral or reassuring palette and tone for complaint screens to match the gravity of the context.

The small category selection buttons on the 'What bothers you' screen appear quite small, likely smaller than recommended 44x44 points for touch targets.

Small touch targets increase the chance of input errors and user frustration, especially for users with limited dexterity or on smaller screens.

Increase the size and padding of these category buttons to at least the recommended minimum touch size, or add more spacing between them.

The 'Sign up', 'Continue with Google', and 'Continue with Apple' buttons are stacked closely with minimal spacing between them.

Close vertical spacing between buttons can lead to accidental taps and user errors.

Increase vertical spacing between these buttons to reduce accidental activations.

Multiple screens ask for 'Society Code' or 'Generate a Code' without storing or confirming it visibly across steps.

Users may forget or confuse the code between steps, causing errors or lost progress.

Persist and display the society code visibly across related screens or autofill it to reduce reliance on memory.

Text below primary buttons such as 'Or' on the create account screen and 'Ab Society Ki Dikkat Chhutkiyo me Khatam' appears in a light grey on white background, likely below WCAG AA contrast ratio.

Low contrast on instructional or supportive text reduces readability and can reduce user confidence and usability.

Use a darker color for these small text links ensuring at least 4.5:1 contrast ratio on white background.

The 'Generate a Code' input field on the society details screen does not clearly label what code is being generated or its purpose.

Users may not understand what code to enter or generate, causing confusion or incorrect input.

Add a clarifying label or helper text explaining what the code is for and how to obtain or generate it.

The camera icon to upload a photo in the complaint details screen is small with no accompanying label, making its function potentially unclear to users.

Users may not realize the icon is clickable or what action it initiates, decreasing usability.

Include a descriptive label or button text adjacent to the icon and/or make the icon larger and visually distinct.

The 'Click on the camera to upload a photo' button is small and located inside a confined pink area that might require more precise tapping.

Small upload buttons can frustrate users or cause input errors, especially on mobile devices where precise taps are harder.

Enlarge the upload button area and add padding around it to increase touchable space.

Users with visual impairments may not recognize the upload icon, reducing the usability of this important function.

Increase the color contrast by using a darker icon color or a background color difference meeting at least 3:1 contrast ratio for UI components.

The 'Upload your pic' area in the 'Enter Society Details' screen (iPhone 16 Plus - 26) has a camera icon but does not provide guidance on accepted file types or actions after upload.

Users might be unsure what images are acceptable or whether the upload succeeded, potentially causing confusion or incorrect submissions.

Add a tooltip or label indicating supported file formats and feedback after a successful upload.

The sign-up/sign-in screen (2nd image) uses very similar button styles with close colors and no strong differentiation, making it difficult for users to quickly identify primary actions.

Users may hesitate or be confused about which action to take first, slowing down task completion.

Increase visual differentiation between sign-up and sign-in buttons through color, size, or placement to create a clear primary and secondary action.

The 'Sign up' button on the create account screen (iPhone 16 Plus - 23) uses a subtle dark background behind white text but is visually similar to secondary options 'Continue with Google' and 'Continue with Apple', which might dilute the primary CTA's prominence.

Users might overlook the primary sign-up option, resulting in less direct conversion through manual sign up.

Use a distinct color or style for the primary 'Sign up' button to separate it clearly from third-party sign-in options.

No indication of timezone or time context is visible in the complaint submission confirmation or form screens, though complaint IDs might be time-relevant.

If users expect timing or deadlines for complaint resolution, lack of timezone or timestamp context can cause confusion about when to expect responses.

Add clear timestamps with timezone info where relevant to user actions and confirmations.

The text 'Ab Society Ki Dikkat Chhutkayo me Khatam' uses informal tone that might not suit all users or instill full confidence in the service’s professionalism.

While friendly tone is good, it could reduce perceived reliability for users expecting formal support or governance from a society management app.

Consider slightly more formal, universally clear language while maintaining warmth and approachability.

The screen listing complaint categories has many small toggle buttons arranged tightly, which may be visually overwhelming.

Users may find it harder to quickly scan and select relevant options, increasing cognitive load.

Group related categories or allow search/filtering to reduce visual clutter.