Skip to main content

UI/UX Modernization Checklist

Comprehensive action list for polishing the Alliance Chemical wiki experience. Use this as the canonical backlog when iterating on user-facing polish.

✅ Foundation Audit

  • [x] Confirm global theming, glassmorphism shell, and updated component styling are in place (completed 2025-xx-xx).
  • [ ] Document component library tokens (button variants, cards, badges, alerts) for reuse.

1. Navigation & Wayfinding

  • [ ] Add breadcrumb component to core pages (e.g., Freight Booking, Operations detail).
  • [ ] Include “Back to top” button or floating shortcut on long-form guides.
  • [ ] Highlight active and nested routes more explicitly in the sidebar state.

2. Freight Booking Experience

  • [ ] Replace static comparison table with a visual matrix using color-coded badges (green ✅ best, amber ⚠ review, red ❌ reject).
  • [ ] Add an at-a-glance decision flowchart or stepper to explain carrier selection logic.
  • [ ] Embed an interactive cost calculator for freight vs. parcel scenarios.

3. PDF Viewer Enhancements

  • [ ] Group PDFs into collapsible categories (Freight, Hazmat, Quick Reference).
  • [ ] Add search/filter input for PDF list.
  • [ ] Provide loading skeletons and empty state messaging for PDFs.

4. Typography & Readability

  • [ ] Increase prose line-height to ~1.75 for long-form content.
  • [ ] Clamp content width to ~75ch for improved readability.
  • [ ] Bump base font size to 17px and verify contrast in both themes.

5. Interactive Elements & Feedback

  • [ ] Introduce loading states and skeletons for data-heavy components (PDF viewer, future search).
  • [ ] Surface error handling UI for failed loads.
  • [ ] Add tooltips to icon-only controls and theme toggle.
  • [ ] Publish keyboard shortcut hints (/ to search, Esc to dismiss overlays).

6. Color & Visual Hierarchy

  • [ ] Standardize card shadows and borders for depth hierarchy.
  • [ ] Define accent usage guidelines (blue = action, green = success, amber = warning).
  • [ ] Introduce visual separators between major sections on long pages.

7. Mobile Experience

  • [ ] Ensure sidebar collapses to a mobile drawer with accessible touch targets (≥ 44px).
  • [ ] Optimize PDF viewer for small screens (pagination, zoom controls).
  • [ ] Validate tap areas, spacing, and font sizes on mobile breakpoints.

8. Search Roadmap

  • [ ] Implement client-side fuzzy search (e.g., Fuse.js) for initial release.
  • [ ] Add command palette shortcut (⌘/Ctrl + K) with recent searches.
  • [ ] Highlight matches within results and link directly to headings.

9. Content Discoverability

  • [ ] Surface “Recently updated” and “Trending” sections on the homepage.
  • [ ] Add related pages or tags at the bottom of long documents.
  • [ ] Generate table of contents for long MDX pages (Freight Booking, Returns FAQ).

10. Accessibility & Compliance

  • [ ] Add skip-to-content link and ensure keyboard focus states.
  • [ ] Audit color contrast to meet WCAG AA in both light and dark modes.
  • [ ] Provide aria-labels for icon buttons and ensure keyboard navigation across interactive components.

Maintain this checklist as enhancements ship. Move completed items to the top section with completion dates for historical tracking.