Skip to main content

Backoffice Design

Design overview and structure for the Percus backoffice application.

Interactive Mockup

View the full interactive mockup: static/design/backoffice-simplified.html

Open it directly in your browser from: static/design/backoffice-simplified.html

Design Overview​

The Percus backoffice is a client-facing application for managing personalized video campaigns. It's designed for marketing teams and campaign managers at financial institutions, not for internal administration.

Key Design Decisions​

  • Client-focused: Only features clients need to manage their campaigns
  • Project-centric: Everything organized around marketing campaigns
  • Template versioning: Clear production/testing/rollback workflow
  • Campaign analytics: Metrics specific to each project

Application Structure​

Landing Page​

Simple dashboard with:

  • High-level KPIs (total renders, active projects, view rates, completion rates)
  • Searchable project cards grid
  • Quick access to all campaigns
  • Clean top navigation (logo, notifications, user menu)

Inside a Project​

When you click into a project, you get three focused tabs:

1. Templates Tab​

Manage template versions with full version control:

  • Version table showing all template versions
  • Status indicators:
    • 🟢 Production - Currently active version serving users
    • 🔵 Testing - Beta version for QA
    • ⚪ Previous - Archived versions available for rollback
  • Actions: View, Edit, Promote to Production, Rollback
  • Metadata: Created date, modified by, render count per version

2. Integration Tab​

Technical documentation and setup:

  • API Credentials - Project ID and API key
  • JavaScript Integration - Embed code with example
  • REST API Examples - cURL and code samples
  • Email Delivery - Send videos via email API
  • Copy-to-clipboard buttons for all code snippets

3. Analytics Tab​

Campaign-specific performance metrics:

  • Key Metrics Cards:
    • Total Renders
    • View Rate (% of renders that were viewed)
    • Completion Rate (% watched to end)
    • CTA Click Rate (% that clicked call-to-action)
  • Charts:
    • Renders over time (line chart)
    • Engagement funnel (rendered → viewed → completed → clicked)
    • View duration distribution
  • Period comparisons (vs. previous period)

Top Navigation​

Consistent across all pages:

  • Logo - Returns to dashboard
  • Notifications bell - System alerts
  • User menu - Profile and settings

Project Navigation​

When inside a project:

  • Back button - Return to dashboard
  • Project name - Current context
  • Tab navigation - Templates | Integration | Analytics

No Sidebar​

Intentionally simple - no complex sidebar navigation. Clients access projects from the dashboard and navigate via tabs within projects.

Visual Design​

Color Usage​

Primary Actions:

  • Orange (#FF6B35) for primary buttons, CTAs, active states
  • Creates energy and draws attention to key actions

Navigation & Structure:

  • Deep Blue (#0F4C81) for headings, branding
  • Sky Blue (#1E88E5) for secondary interactive elements

Data & Content:

  • Slate grays for text hierarchy
  • Green for positive metrics
  • Red for errors/warnings

Interactive States​

Cards:

  • Hover: Orange left border + subtle shadow
  • Creates clear affordance for clickable elements

Buttons:

  • Primary: Orange background, darker on hover
  • Secondary: White with border, orange border on hover

Tabs:

  • Active: Orange underline + bold text
  • Hover: Deep blue text

Typography​

  • Font: Inter (system font fallback)
  • Hierarchy: Clear size and weight progression
  • Readability: Optimized line heights and spacing

User Experience Principles​

1. Focus on the Workflow​

Show only what's needed for the current task. Admin features (user management, template creation) are in a separate admin interface.

2. Clear Status Indicators​

Production vs. Testing vs. Previous versions are immediately obvious with color-coded badges and emoji indicators.

3. Campaign-First Analytics​

Metrics are project-specific. Users care about "how is THIS campaign performing?" not global stats.

4. Easy Integration​

Code samples are copy-paste ready. No hunting for credentials or figuring out API structure.

5. Version Control Confidence​

Rollback is always available. Testing versions don't affect production. Clear audit trail of who changed what.

Tech Stack​

  • Framework: Next.js 14+
  • Styling: Tailwind CSS
  • Components: Headless UI
  • Charts: Recharts or Chart.js
  • Icons: Heroicons + Emoji

Responsive Behavior​

  • Desktop-first for the backoffice (campaign managers work on computers)
  • Responsive down to tablet (768px)
  • Mobile view shows simplified version for monitoring on-the-go