Project: Development of design (UI/UX) for the B2B2B SaaS web application "Virtual Pilates Instructor".
1. Project Overview:
We are creating a B2B2B SaaS platform for the Pilates industry. We provide it to equipment distributors, who offer it to Pilates studios as a "white-label" solution (under the studio's brand). The platform includes our premium video library of workouts and a "workout builder". The main B2C scenario is studio workouts on large screens (TV) ("10-foot UI").
Interfaces:
B2C Application: For studio clients (TV/Large Screen First).
B2B Portal: For studios (Desktop First).
(Concept) Super Admin Portal: For us (Desktop First).
Design Goal: To create a comprehensive, high-quality design of all key screens and features for all three interfaces to showcase the full potential to distributors. The design should be professional, modern, intuitive, with a focus on UX for TV.
2. Target Audience:
B2C (Studio Clients):
Devices: Primary – TV/Large Screen (viewing from a distance). Secondary – Tablet, Desktop. Mobile – responsiveness.
Design Approach: "10-foot UI" / "TV-first". Readability and control from a distance (remote/keyboard).
B2B (Studios):
Devices: Desktop.
Design: Clean, professional, data management-oriented.
(Concept) Super Admin:
Devices: Desktop.
Design: Functional, for platform management.
3. Key Concept (White-Label):
B2C and B2B design should easily adapt to the studio's brand:
Dynamic Logo (uploaded by the studio).
Dynamic Primary Color (chosen by the studio).
The design should be neutral and flexible.
4. Detailed Screens and Features (UI in layouts – in English!):
A. B2C Web Application (TV / Large Screen First, English UI):
General Requirements ("10-foot UI"): Large fonts (>20-32pt), high contrast, simple navigation (D-pad/arrows), clear focus on the active element, large clickable areas (min 60x60px), uncluttered interface, visual feedback.
User Stories (Examples):
Client: Easily find workouts on TV using the remote/filters. See clear prompts/timer during the workout.
Instructor: Quickly launch a playlist on the studio's main screen from a tablet.
Client: Create a personal program on a tablet and play it on TV.
Module: Authentication & Onboarding
Login Screen: Studio logo, Email, Password (with visibility), "Log In" button, "Forgot Password?". States: Default, Focused, Error, Loading. On-screen keyboard (if needed).
Forgot Password Screen: Logo, Email, "Send Reset Link" button, "Back to Login". States: Default, Error, Success.
(Possibly) Sign Up Screen: Logo, Name, Email, Password/Confirm, "Sign Up" button, "Log In". States: Default, Focused, Error (validation).
Onboarding Screens (First Login): 2-3 screens (Welcome; remote navigation instructions; possibly, level selection). "Next", "Skip", "Get Started" buttons.
Module: Main Screen (Dashboard / Home)
Components: Vertical list of horizontal carousels (Continue Watching, New Releases, Recommended, My Routines). Large headings. Large video cards (Thumbnail, Title, Duration).
Navigation: Arrows between rows and cards. Active card highlighted (border/size).
States: Default, Focused. Empty State (if no data).
Module: Library (Library / Explore)
Components: Grid View (large cards, 3-4 in a row). Categories/Filters Panel (side or top, large items, clear selection). Sorting (simple selection). Search (icon -> search screen with large field, on-screen keyboard?, grid of results).
States: Active filter/sorting. "No results found" state.
Module: Player (Video Player)
Components: Full-screen video. Controls Overlay (appears/disappears, large icons: Play/Pause, Progress Bar, Time, Next/Prev, Title). Optionally: Rewind/Forward (attach to arrows?), Favorite (when paused), Settings (quality).
States: Playing, Paused, Buffering, Error.
Module: My Programs (Workout Builder / My Routines)
List View (on TV): List of playlist names (Title, Number of videos, Duration). "Play Routine" button. Highlighting selection. Empty State ("Create routines on tablet/desktop").
Create/Edit View (on Tablet/Desktop): "Routine Name" field. Two panels: Library (with search) | Current Routine (list of videos). Drag-and-drop. Delete/Reorder icons. Save/Cancel/Delete buttons.
Module: Favorites
Components: Grid/list of favorite video cards.
States: Empty State ("No favorites yet").
Module: Profile and Settings (User Profile & Settings - Priority: Tablet/Desktop)
Components (Desktop/Tablet): Profile Edit (Name, Change Password). Settings (Autoplay, Notifications?). Watch History. Subscription (if any). Logout Button.
On TV: Show Name, Email, Logout. The rest - message "Manage on tablet/desktop".
Module: Instructor Mode (Instructor Mode - Concept, Tablet/Desktop)
Components: Interface for content selection. Playback control panel on external screen (Play/Pause/Next). Display of current video/timer.
B. B2B Web Portal (Desktop, English UI):
User Stories (Examples):
Manager: Quickly add/deactivate a client.
Owner: Easily upload logo/select color. See payment history.
Manager: See popular videos among clients.
Module: Dashboard: Cards with key metrics (Total/Active Users, Videos Watched). Activity chart (with period selection). States: Loading, Empty.
Module: User Management: User table (Name, Email, Status, Dates). Pagination, sorting, search, filters. "Add User" button -> Modal (Email, Name?) -> Invite. (Possibly) Bulk Invite (CSV Upload). User actions (Edit?, Deactivate/Activate, Resend Invite, Delete + Confirm). Empty State.
Module: Branding Settings: Logo Upload (drag-and-drop, preview, remove, requirements). Color Picker (visual + HEX). Live Preview window. "Save Branding" button (states: Default, Disabled, Loading, Success/Error).
Module: Content Management (Concept): View Global Library (possibly with Hide option?). Create/manage studio playlists (Featured?).
Module: Analytics / Reports: Sections (Overview, User Engagement, Content Performance). Date Range Picker. Graphs (Line, Bar). Data tables. Export (CSV/PDF?). States: Loading, Empty.
Module: Studio Settings & Billing: Account Details form. Subscription section (Plan, Price, Date, Cancel). Billing History table (invoices + PDF). Payment Method section (Card info, Update Button -> Stripe Elements). (Possibly) Team Members (table, Invite).
C. (Concept) Super Admin Portal (Desktop, English UI):
Goal: To show distributors management capabilities.
Main Concepts: Dashboard (overall statistics). Distributor Management (table, Add/Edit form). Studio Management (view studios). Global Content Library Management (video table, Add/Edit Video Metadata form + Vimeo ID, category management).
5. Style and Feel:
Premium, clean, modern, minimalist. Intuitive UX.
B2C: Excellent readability from a distance ("10-foot UI"), ease of navigation (easier than Netflix/Apple TV).
B2B/Admin: Professional, reliable, efficient.
Consistency. UI in English. Responsiveness.
6. Work Result (Deliverables):
Clickable Prototype: In Figma (High-fidelity), main user flows for 3 interfaces.
Design System / UI Kit: In Figma (components in states, styles, colors, grid). Organized for developers.
Layouts of All Screens: In Figma (including empty, error, loading states).
(Optionally) Animations: Proposals for key animations.
Organized Figma files.
7. Budget and Timeline:
Please specify your rate (hourly or fixed) for the entire scope.
Please provide an estimated timeline for completion.
Ready to discuss phases.
8. Application Submission:
Provide a portfolio (SaaS, TV UI, Design Systems).
Briefly describe your experience with Figma and similar projects.
Your availability.
9. Important:
Close collaboration is required (regular calls).
We value your proposals and expertise.
Language of communication: Ukrainian.
Thank you!