ANODA Discuss your product

Live-event fan engagement, phone to arena screen

A control room where live-event operators moderate fans’ photos and videos and put them on the venue screen.We designed it, then its AI Story.

AI Story preview: a generated music track, a list of narrator voices and the story video ready to create; Live moderation: fans’ photos and videos with their names and messages, and the playlist with what’s on air and up next
200+
screens for the operator suite, fans’ phone pages and AI Story
4
experts one team from information architecture to handoff

We designed Vixi Suite’s operator workspace around a live show: capture fan submissions, moderate the queue, build playlists and control what reaches the arena screens. The operator suite and fans’ mobile-web pages share one dark system. When the client returned for AI Story , we designed its generation and editing journey inside that same workspace.

How a fan’s photo reaches the arena screen

One chain, from the seat to the screen:

  1. Phone

    • Capture page
    • Submission
    • Consent

  2. Submissions

    • Photos and videos
    • Tags
    • Filters

  3. Moderation

    • Preview
    • Select
    • Lock

  4. Playlist

    • Order
    • Loop
    • On air, up next

  5. Output

    • Mosaic
    • Messages
    • Live video

  6. AI Story

    • Character
    • Scenes
    • Preview
Speed Safety
Operators act fast, and nothing reaches the screen by accident.
Volume Control
Every submission seen before it’s shown.
New AI Known suite
A new workflow that looks and behaves like the rest of the product.

A moderation screen for an event already under way

Found
Submissions arrive during the show, and an operator has to judge each one while keeping an eye on what’s on air.
Decided
One screen: the show’s status and time left on top, the filters under it, fans’ submissions as cards with every action on the card, and the playlist always in view on the right.
For the user
An operator sees who sent what and when, and puts it in the playlist without leaving the queue.
Vixi Suite submissions during a live game: fans’ selfies and videos as cards with name, message, time and actions, and the playlist on the right
After: the moderation queue during a game: status, filters, fans’ cards and the playlist

  1. Where the show stands

    Submissions against the limit, time left, and the filters.

  2. What fans sent

    Each card: the photo or video, who sent it, their message and time, and every action from playlist to delete; the playlist stays on the right.

How the work progressed

330h+ of work: the live suite first, then AI Story when the client came back.

  1. Information architecture

  2. User Flow

    Every step of phone pages, moderation, playlists and outputs, with its states

    Artifact User flows for each module

    Part of the phone page flow: camera options leading to updated capture and submission pages

  3. Wireframes

    Where each control lives before the dark theme could hide a problem

    Artifact Desktop wireframes for the operator suite

    Light desktop wireframe of the output graphics editor with a colour picker

  4. UI & Design System

    One dark interface inside the existing Vixi brand, and components every module shares

    Artifact Style directions, the final UI and a UI kit with states

    A playlist item component from the UI kit in collapsed, expanded and hover states

  5. Design handoff

Separate tools, turned into one suite

Found
Capture, moderation, live boards, streams and outputs each needed their own controls, and an operator runs several at once during a show.
Decided

Every flow was mapped end to end, then put into one shell: the same top bar with the show’s status, the same sidebar, and each module one tab away.

Our information architecture guide explains how to map capture, moderation, playlists and outputs as one live-show workflow.

  1. Phone pages

    What fans see: capture, submission and end pages, each with design, inputs, legal and redirect settings.

    Open the full map
    Phone page configuration flow: the preview of capture, submission and end pages and the design, inputs and legal settings

  2. The live event

    An ongoing event with its submissions and playlist board, branching to add, reorder, configure, moderate and loop.

    Open the full map
    Part of the Vixi Suite map: an ongoing event with submissions and the playlist board branching to add, drag and drop, configure, moderate, loop and pause

  3. AI Story

    The end of the story flow: animate, preview with voice and music, and download.

    Open the full map
    The end of the AI Story flow: an animate confirmation that generation takes about 30 minutes, a preview with voice and music, and download
Vixi Suite top bar: the logo, captures against the limit, the Live, Home, Stream and Story tabs, and the show’s status

One top bar for the whole show

Live, Home, Stream and Story as tabs, captures against the limit and the show’s status always in view, in every module including AI Story.

  • Information architecture
  • Unified navigation
  • End-to-end user flows
  • Clickable prototypes

Seven jobs, from the stands to AI Story

The live suite first: moderation and the playlist, outputs and the fans’ phones. Then AI Story, the feature the client came back for.

Operators need clear feedback before sending anything to the screen. Our web app design guide connects that task, its states and the engineering handoff.

Moderating and playing out, live

Found
Fans’ photos and videos keep arriving during a game, and a wrong item on air is seen by the whole venue at once.
Decided
Every action on the submission itself, from playlist to delete; the playlist always beside the board with what’s on air and its countdown, what’s up next, transport, quick-select slots and a loop so the screen never goes dark.
Vixi Live board with the playlist rail: on air countdown, the next fan message up, transport controls, quick-select slots and loop

Outputs configured in one designer

Found
Mosaics, fan messages, live video and polls each needed their own look on the venue screen, with sponsor slots and a QR code for joining in.
Decided
One output designer for every type: the same design panel for layout, images, QR, colours and timing, and default assets for when nothing is live.
Mosaic output builder: a five by two capture grid, logo and sponsor slot and QR code, with the design panel below
Message output: a fan’s photo beside a styled message with their name and seat number, and the design panel
Live video output layout: logo and sponsor image and QR code beside the live video frame
Default assets: placeholder, logo and sponsor, background and offline images, each with when it shows

The fan’s side: pages on the phone

Found
Fans join from their own phones in the stands, so the pages had to work on any phone in the browser, with consent before anything is shown.
Decided
Mobile-web pages set up from the operator’s suite: a capture page, a submission page with inputs and consent, and an end page, each previewed as the fan will see it.
Fan’s capture page preview: title image and camera area
Fan’s submission page preview: the photo, name and email inputs and the submit button
Fan’s end page preview after submitting

The client came back: AI Story

Found
After the first engagement the client returned with a new idea: build a short film with AI, scene by scene, inside the same suite.
Decided
A step-by-step workflow in the same suite: set up the story, describe the main character from a photo, write the premise and scenes, then images, animation and sound, each step checked off on the right.
Setup New Story dialog on the Vixi Suite start screen: story name, aspect ratio and character mode
Main character step: the uploaded photo, name, description and generated key photos, photo sheet and character model
Story step: feature characters, setting and conflict, and a six-scene script with a progress checklist

Scene by scene, shot by shot

Found
A film is dozens of shots, and one bad image can spoil a scene.
Decided
Every scene broken into named shots, each with its own prompt and result; the whole story visible as a grid; and any shot swapped for another variant before it’s animated.
Images step, scene 2: nine shots, each with a shot type, prompt and reference image
Images photo grid: generated stills of the story

AI work that takes its time, in the open

Found
Generating video is not instant, and a spinner with no end in sight makes people quit or click twice.
Decided
A warning before it starts, a time-left bar with a way to stop, scenes that show which shots are done and which are pending, and a notice anywhere in the suite when the story is ready.
Animate step, scene 6: two shots rendered to video and a third still in progress
Phone graphics editor with a notice that the story generation is complete and a check on the Story tab

Music, a voice, and a finished film

Found
A film needs sound, and the operator decides how it sounds, not the model.
Decided
Music generated from a prompt, a narrator picked from a list of voices, the film previewed with both, then downloaded or saved and reused for the next event.
Preview step: music prompt, the generated track and the story video preview

One dark system, extended for AI

Found
A new AI workflow could easily have looked like a different product bolted onto the suite.
Decided
AI Story reuses the suite’s components: the same top bar and sidebar, the same cards, buttons and panels, in the same dark theme, with its own steps added on top.

The same card in two places

The image card from the kit: a key photo in the character step, a still in the scene grid.

  • Image card from the main character step showing a generated key photo
    Character: A key photo.
  • The same image card in the scene photo grid
    Scenes: A shot in the grid.

Drawn for before and between the show

Offline before the event, loading as modules start: each says what’s happening and what the operator can do.

  • Home before the event: every module offline, the end time set, and Start and Stats buttons
    Before the show
  • Start-up state: modules loading with a five-minute countdown and the end time locked
    Starting up
  • Home during a live event: status live, end time, Vixi Live and Stream locked, submissions and time remaining
    Live

Where the product ended up

One dark control room for a live show: fans’ submissions moderated in one queue, a playlist that shows what’s on air and up next, outputs configured in one designer, and phone pages set up from the same place.

When the client came back, AI Story joined it in the same shell, with every slow step visible and every shot open to change.

screens across the suite and AI Story
200+
breakpoints in the responsive layouts
3
experts on the team
4

In the client's words

ANODA brought the production and moderation controls into a unified design direction. The work gave us a concrete way to review routing, content status and operator actions together, while keeping the interface focused on the needs of a live-event team.

Jacob Woerther AI & Innovation, The Famous Group

5.0

Worried about what reaches the big screen?

In Vixi Suite, every fan photo is seen before it’s shown and every AI step shows its progress. Bring us your live workflow, and we’ll show you where it needs a safeguard.

Discuss your product Explore more case studies

What we brought to Vixi Suite

The product

The interface and the work