Redesign and Update B2B & B2C Interfaces
Budget: $250 – $750 USD
* Updated Design System & Tokens
-Color palette, typography scale, spacing, shadows, radius variables.
-Re-usable Figma components (buttons, inputs, cards, charts).
New B2B Screens
-HR Metrics Dashboard (Overview) – KPI cards, usage chart, cost-savings estimate, Employee List & CRUD, table, bulk upload modal, empty-state illustrations, Report Detail Page – downloadable PDF, PHQ-9/GAD-7 trend chart.
-Webinar Center – upcoming list, registration modal, video replay player.
-Meditation Library – category filter, audio player, “add to favorites”.
* Polish of Existing B2C Screens
-Landing & Hero section (visual refresh, accessibility).
-3-step Onboarding wizard (progress bar, inline validation).
-Therapist List (photo ratio fix, filter chips).
- User profile
Responsive Prototypes
- Mobile (iPhone 14) & Desktop (1440 px) frames for every screen.
- Figma prototype links with navigation hotspots.
- Front-End Implementation (React + Vite + Tailwind) and connect to backend(Ruby on Rails)
* Build all new pages inside existing codebase.
-Apply theme variables via Context (<ThemeProvider tenant={...}>).
-Integrate charts with Recharts; dummy JSON props OK.
-Ensure WCAG 2.1 AA contrast, keyboard focus, aria-labels.
* Hand-off & Documentation
-Figma file organized by pages & components.
-README with component names matching React files.
-List of new API endpoints expected from backend (GET /companies/:id/metrics, etc.).
Loom walkthrough ≤ 5 min showing navigation and responsive behaviour.
-Color palette, typography scale, spacing, shadows, radius variables.
-Re-usable Figma components (buttons, inputs, cards, charts).
New B2B Screens
-HR Metrics Dashboard (Overview) – KPI cards, usage chart, cost-savings estimate, Employee List & CRUD, table, bulk upload modal, empty-state illustrations, Report Detail Page – downloadable PDF, PHQ-9/GAD-7 trend chart.
-Webinar Center – upcoming list, registration modal, video replay player.
-Meditation Library – category filter, audio player, “add to favorites”.
* Polish of Existing B2C Screens
-Landing & Hero section (visual refresh, accessibility).
-3-step Onboarding wizard (progress bar, inline validation).
-Therapist List (photo ratio fix, filter chips).
- User profile
Responsive Prototypes
- Mobile (iPhone 14) & Desktop (1440 px) frames for every screen.
- Figma prototype links with navigation hotspots.
- Front-End Implementation (React + Vite + Tailwind) and connect to backend(Ruby on Rails)
* Build all new pages inside existing codebase.
-Apply theme variables via Context (<ThemeProvider tenant={...}>).
-Integrate charts with Recharts; dummy JSON props OK.
-Ensure WCAG 2.1 AA contrast, keyboard focus, aria-labels.
* Hand-off & Documentation
-Figma file organized by pages & components.
-README with component names matching React files.
-List of new API endpoints expected from backend (GET /companies/:id/metrics, etc.).
Loom walkthrough ≤ 5 min showing navigation and responsive behaviour.