Issue: UI/UX Design Limitations & Color Consistency Problems (Liora Issue no 2)

[alwin-m]

Issue: UI/UX Design Limitations & Color Consistency Problems

Overview

A thorough review of the current calendar-based home screen design highlights several UX and visual issues that negatively impact clarity, accessibility, and user engagement. These issues stem from color choices, layout density, visual hierarchy, and information grouping.

This GitHub issue documents all current design problems to prepare for a structured redesign.

---

Problem Statement

The existing design attempts to display multiple menstrual‑cycle–related data types on a single screen — cycle days, fertile window, ovulation, predictions, quick logs, and product recommendations. Due to overlapping visuals, unclear colors, and heavy density, users may feel confused instead of supported.

A redesign and UX re-evaluation is required before proceeding further.

---

Identified Issues

1. Color Selection Conflicts

• Pastel pink, purple, and green tones create low contrast.
• Indicators look similar and are hard to distinguish.
• Color meanings are not intuitive without explanation.
• Increases cognitive load for new users.

2. Calendar Overcrowding

• Dots, highlights, and markings overlap inside tiny calendar cells.
• Too many indicators compete for visual attention.
• Reduces readability and overwhelms users.

3. Weak Visual Hierarchy

• Important cycle data does not stand out.
• Shopping recommendations visually compete with health information.
• Health and commerce sections are not separated.

4. Excessive Information in One Screen

• Cycle data, predictions, symptoms, e‑commerce, and navigation placed together.
• Primary purpose of the page is unclear.
• Overloaded UI reduces engagement and tracking accuracy.

5. Inconsistent UI Component Styling

• Uneven corner radii, shadow intensity, spacing.
• Some cards look modern; others appear flat or outdated.
• Causes an incomplete and unpolished look.

6. Ambiguous Icons & Indicators

• Dots, circles, and highlights lack clear meaning.
• No immediate understanding of what icons represent.
• Relies too much on tutorials instead of intuitive design.

7. Accessibility Issues

• Soft pastels may fail contrast checks.
• Small text on light backgrounds hurts readability.
• Users with visual sensitivity may struggle.

---

Additional UI/UX Placement & Flow Challenges

8. Unclear Placement of Icons & Symbols

• Icons lack rules for placement (top bar, calendar, tabs, etc.).
• No grouping logic based on function (tracking, insights, profile).
• Missing guidelines on size and spacing.

9. Uncertain Calendar Positioning

• Calendar dominates the home screen without a clear UX reason.

• Unclear whether it belongs on:

  • the main home page,
  • a separate tab,
  • or an insights section.

• Mixing commerce and health tracking feels cluttered.

10. Confusion About E‑Commerce Placement

• Shopping section appears too close to sensitive health topics.
• Lack of separation feels unprofessional.
• No structured flow from cycle → insights → product recommendations.

11. Missing Overall Design Flow

• No clear user journey from onboarding → tracking → insights → wellness.
• Key actions (log symptoms, predictions) are not prioritized.
• UI storytelling is missing.

12. Lack of Universal Appeal

• Current palette may only appeal to a narrow demographic.
• No strategy for gender‑neutral minimal design.
• Lacks modern, elegant, professional health‑focused aesthetic.

13. Minimalism Not Achieved

• Too many elements placed on one screen.
• No spacing system or padding/margin rules.
• Typography hierarchy is unclear.
• Minimalism requires strict rules that do not yet exist.

14. Need for a Professional Design System

• No centralized rules for:

  • color tokens,
  • iconography,
  • components,
  • spacing,
  • grids,
  • shadows,
  • card design.

• Leads to component drift and inconsistency.

---

Goals

• Document all visual and functional design issues.
• Highlight inconsistencies that affect clarity and accessibility.
• Provide groundwork for a redesign discussion.

---

Acceptance Criteria

• Complete issue documentation.
• Problems grouped by category/severity.
• Ready for team review before solution phase.

---

Assigned To

Team Lead: @alwin-m
Contributors: @abhishek-2006-7, @nejinbejoy, @Majumnair

---

Notes

This issue focuses only on documenting design problems.
A separate GitHub issue will cover redesign proposals after team review.