Help Desk Video Concepts

📋 Project Overview

Video concepts for the Everflow Help Desk — walkthrough tutorials, feature explainers, and onboarding guides. Help Desk has a specific visual language (pastel purple/gold palette, ef-callout components, step-by-step flows). This page collects style explorations and concepts for Alina + Karine to review from a UX/design perspective.

Goal

Define the visual style for Help Desk tutorial videos — consistent with the existing help desk design system.

UX Review

Reviewers

Alina (UX), Karine (Brand/Design). Alina sharing design language references tomorrow.

Pending Input

Output

Approved visual direction for Help Desk videos. Will transfer to Figma for formal spec once direction is locked.

Next: Figma

🎨 Help Desk Design System

Reference: the Help Desk uses a specific component library and color palette. Videos should feel native to this system.

Core Colors (scraped from site)

#4500b4

#1e3557

Key: Purple + Navy dominate. All backgrounds are barely-there pastel: rgba(69,0,180,0.04)

Pastel Palette (custom HTML standard)

Purplebg 0.04 | border rgb(69,0,180)

Goldbg 0.12 | border #e6c35a

Greenbg 0.08 | border #8bc8a4

Redbg 0.06 | border #d4908f

NEVER use saturated reds/greens. Always pastel.

Gradients (from 100+ articles)

Primary: #4500b4 → #5a1ec8

Purple → Navy

Subtle bg: rgba(69,0,180,0.04) → white

135deg is the standard angle. Purple-dominant.

Typography

Font: Inter only (300-700 weights)
Headings: 600-700 weight, navy #1e3557
Body: 400-500 weight, navy text
Labels: Uppercase, letter-spacing, small
Smoothing: antialiased

Components (ef-* elements)

ef-steps-block: numbered sequences (always collapsible)
ef-callout: info blocks (opened/collapsible attrs)
ef-color-callout-note/warning: colored callouts
ef-accordion-dropdown: expandable FAQs
ef-tab-block: tabbed content
40+ ef-svg-* icons

80+ Custom Elements

Spacing & Effects

Border radius: 8px (cards, images, buttons)
Box shadow: 0 2px 8px rgba(0,0,0,0.1)
Button: purple bg, white text, 10px 24px padding
Transitions: 0.3-0.5s ease-out
Backdrop: blur(3px) + navy overlay

🖼️ Thumbnail Concepts

Style explorations for video thumbnails. Which direction feels most "Help Desk"?

🎬 Intro & Outro Concepts

Opening and closing sequences for Help Desk tutorial videos. Must match helpdesk.everflow.io branding — purple gradient, white logo, golden accents. Frank's feedback: 1-second Everflow logo intro, reusable across all videos.

📐 Scene Layouts & UI Treatment

How to compose tutorial scenes and present UI screenshots. Tabs: Scene Layouts (full compositions), UI Treatments (screenshot framing/effects), and Character Scenes (with illustrated characters).

👤 Character Library

87 AI-generated branded characters across 2 styles. All transparent PNGs on Supabase CDN. Generated via Gemini 2.5 Flash Image with green screen removal pipeline.

Clean Doodle — Thin confident lines, vivid purple sweater, white skin, dark purple outlines, golden yellow shoes. The "polished" style.

🎭 Persona Library

23 Everflow personas mapped to the Users & Experiences training modules. Each persona exists in both Doodle and Sketch styles. Based on Core Accounts, Partners, Marketplace, Verticals, Platform Roles, and Scenarios.

Core Accounts

Partners & Collaborators

Marketplace

Verticals

Platform Roles

Scenarios

🎬 Animated Characters (Veo 3.0)

10 characters animated via Veo 3.0 image-to-video on green screen. Ready for chromakey to transparent WebM for use in Remotion videos. Click to play.

📝 Proposed Video Topics

First batch of Help Desk tutorial videos to produce. Based on most-viewed articles and common support questions.

Postback Tracking Setup

Step-by-step walkthrough: setup, configure, test. Most requested tutorial topic.

Priority 1

Accounting Integration

Connecting QuickBooks/Xero/NetSuite. Already have an accounting video draft to reference.

Draft Exists

Offer Configuration

Creating and configuring offers — one of the highest-traffic help desk sections.

Priority 1

Partner Onboarding

Inviting and setting up partners. Good candidate for character-guided approach.

Priority 2

Reporting Walkthrough

Navigating the reporting dashboard, filters, exports. Complex UI = good video candidate.

Priority 2

Traffic Health Overview

What Traffic Health does and how to use it. Could cross-reference with TH custom report.

Priority 3

📎 Alina's Design References

Placeholder section for Alina's design language references (expected tomorrow). Will add screenshots, style guides, or Figma links here once received.

📬

Waiting for Alina's Input

Design language references coming tomorrow