Skip to content

VertiGro UI/UX Competitive Analysis

Date: 2025-05-17
Analyst: Athena – Competitive UI/UX Analyst

Overview Table

Flow / Screen Viewport Screenshot
Login Desktop Login Desktop
Login Mobile Login Mobile
Dashboard Desktop Dashboard Desktop
Dashboard (Partial) Desktop Dashboard Partial Desktop
Dashboard Mobile Dashboard Mobile
Settings/Account Desktop Settings Desktop

Heuristic & Accessibility Findings

1. Visibility of System Status

  • ✅ Clear feedback on login errors and loading states.
  • ⚠️ No visible progress indicator after login (recommend adding a spinner or progress bar).

2. Match Between System & Real World

  • ✅ Uses familiar terms ("Dashboard", "Settings").
  • ⚠️ Some icons lack text labels, which may confuse new users.

3. User Control & Freedom

  • ✅ "Forgot Password" and "Sign Up" links are present.
  • ⚠️ No visible "Log out" button on dashboard (may be hidden in a menu).

4. Consistency & Standards

  • ✅ Consistent color palette and button styles.
  • ⚠️ Some navigation elements are only visible on certain viewports.

5. Error Prevention

  • ✅ Login form disables submit until fields are filled.
  • ⚠️ No password visibility toggle on login form.

6. Recognition Rather Than Recall

  • ✅ Navigation is sidebar-based on desktop, but not always visible on mobile.
  • ⚠️ Consider persistent bottom nav for mobile.

7. Flexibility & Efficiency of Use

  • ⚠️ No keyboard shortcuts or quick actions observed.

8. Aesthetic & Minimalist Design

  • ✅ Clean, modern design with good whitespace.
  • ⚠️ Some text contrast is low (see below).

9. Help Users Recognize, Diagnose, and Recover from Errors

  • ✅ Error messages are present for login failures.
  • ⚠️ No inline field validation for password strength or email format.

10. Help & Documentation

  • ⚠️ No visible help or onboarding tooltips for new users.

Accessibility (WCAG 2.1) Checks

  • ⚠️ Contrast: Some gray text on white background is below 4.5:1 ratio (e.g., placeholder text, secondary labels).
  • ⚠️ Touch Targets: Some buttons/links (e.g., "Forgot Password") are smaller than 44x44px on mobile.
  • ✅ Keyboard Navigation: Login form is keyboard accessible.
  • ⚠️ Alt Text: Logo images have alt attributes, but some icons may lack descriptive alt text.

Annotated Screenshots

(For full annotation, use a tool like Figma or Excalidraw to mark up the PNGs. Below are notes for each screen.)

Login Desktop

  • Contrast on "Forgot Password" link is low.
  • No password visibility toggle.

Dashboard Desktop

  • Sidebar navigation is clear, but icons lack labels.
  • No visible logout button.

Dashboard Mobile

  • Navigation is less discoverable; consider persistent nav bar.

Settings Desktop

  • Settings/account area is accessible, but lacks contextual help.

Actionable Recommendations

  1. Improve Contrast:
  2. Increase contrast for secondary text and links to meet WCAG AA (4.5:1).
  3. Add Password Visibility Toggle:
  4. Allow users to view/hide password on login.
  5. Persistent Navigation on Mobile:
  6. Add a bottom nav bar or hamburger menu for easier access.
  7. Touch Target Size:
  8. Ensure all interactive elements are at least 44x44px on mobile.
  9. Inline Validation:
  10. Add real-time validation for email and password fields.
  11. Help & Onboarding:
  12. Provide tooltips or a help section for new users.
  13. Keyboard Shortcuts:
  14. Consider adding shortcuts for power users.

References

Report generated by Athena – Competitive UI/UX Analyst, 2025-05-17