Digital-Signage

Screenwerk Plattform

Beitragserstellungszeit

Seit Einführung des Drag-and-Drop-Editors erstellen Screenwerk-Kunden ihre Beiträge deutlich schneller als bisher

-40%

Project Overview

Screenwerks Plattform, komplett neu aufgesetzt.

Screenwerk betreibt eine Digital-Signage-Plattform, über die Unternehmen Botschaften auf Bildschirme in ganz Österreich bringen. Das alte System war über Jahre gewachsen und nicht mehr weiterzuentwickeln. In fünf Monaten hat Screenwerk die Plattform neu aufgesetzt, Backend intern, Frontend mit Webduett. Der Kern der Neuerung ist der Drag-and-Drop-Editor, mit dem Screenwerk-Kunden Beiträge deutlich schneller gestalten als zuvor.

Branche

Digital Signage

Standort

Salzburg

Projektlaufzeit

5 Monate, Zusammenarbeit läuft weiter

Services

UI/UX Design, Frontend-Entwicklung

Impact³

Build

Tech-Stack

Next.js, TypeScript, Polotno (Frontend); Umbraco (Backend, intern bei Screenwerk)

Rolle von Webduett

Dienstleister

Herausforderungen & Probleme

Ausgangslage & Kontext

Backend bleibt intern

Das Umbraco-Wissen sitzt bei Screenwerk selbst. Den Backend-Neubau wollte das Team in der eigenen Umgebung machen, um die Plattform danach selbst weiterentwickeln zu können, ohne auf externe Zyklen angewiesen zu sein.

Prozesse

Jedes Feature kostete auf dem alten System Wochen. Kundenanforderungen stauten sich, weil die Entwicklung nicht nachkam.

Tools

Das Frontend lief auf einer Technologie, die heute niemand mehr neu einsetzen würde. Umbraco war über die Jahre mit punktuellen Workarounds zugewachsen.

Pain Points

Die Oberfläche war träge, die Bedienung umständlich. Features wie ein Drag-and-Drop-Editor waren auf der bestehenden Technik nicht möglich.

Kein Frontend im Haus

Screenwerk hat drei Köpfe, keinen davon im Frontend. Ein Relaunch in dieser Größe hätte ein eigenes Frontend-Team gebraucht, das gab es intern nicht. Gleichzeitig sollte das Projekt nicht komplett aus der Hand gegeben werden.

Backend bleibt intern

Das Umbraco-Wissen sitzt bei Screenwerk selbst. Den Backend-Neubau wollte das Team in der eigenen Umgebung machen, um die Plattform danach selbst weiterentwickeln zu können, ohne auf externe Zyklen angewiesen zu sein.

Prozesse

Jedes Feature kostete auf dem alten System Wochen. Kundenanforderungen stauten sich, weil die Entwicklung nicht nachkam.

Das alte System ließ sich nicht mehr retten. Jedes Warten verschob Kunden-Features weiter nach hinten.

Die Plattform steht auf einer Technologie, die aktiv weiterentwickelt wird und für die es genug Entwickler am Markt gibt. Entscheidungen sollen auch in drei Jahren noch tragen.

Neue Features sollen in Tagen, nicht Wochen in Produktion gehen. Die Codebasis ist so strukturiert, dass sich auch externe Entwickler:innen schnell zurechtfinden.

Der Drag-and-Drop-Editor soll die Zeit pro Beitrag gegenüber dem alten Editor deutlich reduzieren. Für Endkunden der spürbarste Unterschied im neuen System.

Umbraco bleibt. Screenwerks Team arbeitet darin, ein Wechsel hätte das Projekt um Monate verlängert.

Bestehende Integrationen, Kundendaten und Player-Installationen bleiben unangetastet. Der Neubau musste mit dem, was da ist, zusammenarbeiten.

KI-Funktionen kommen in einer späteren Phase, sobald der Nutzen belegbar ist. Im Projekt selbst kein Thema.

Features kommen wieder durch

Die Plattform läuft auf einer Technologie, die aktiv weiterentwickelt wird. Neue Features sind in Tagen umsetzbar statt in Wochen.

Drag-and-Drop live

Der neue Editor läuft in Produktion. Screenwerk-Kunden erstellen ihre Beiträge per Drag-and-Drop.

Beiträge schneller

Die Zeit pro Beitrag ist gegenüber dem alten Editor deutlich kürzer. Die exakte Zahl misst Screenwerk aktuell.

Verlässliche Ausrollung

Playlists gehen an alle angebundenen Player gleichzeitig. Fehlerhafte Player sind im Frontend sichtbar und lassen sich einzeln nachpushen.

Features kommen wieder durch

Die Plattform läuft auf einer Technologie, die aktiv weiterentwickelt wird. Neue Features sind in Tagen umsetzbar statt in Wochen.

Drag-and-Drop live

Der neue Editor läuft in Produktion. Screenwerk-Kunden erstellen ihre Beiträge per Drag-and-Drop.

Unser Ansatz (Impact3)

Discover

Nutzer-Flows, Wireframes, Design-System und High-Fidelity-Screens in Figma. Screenwerk hat freigegeben, dann ging die Entwicklung los.

Build

Frontend bei Webduett auf Next.js, Polotno für den Editor. Screenwerk hat parallel Umbraco neu gebaut, Produktverantwortung lag dort.

Grow

Nach dem Release wird die Plattform in kleineren Schritten weiterentwickelt. Was gebaut wird, bestimmen die Learnings aus dem Betrieb.

Eine Admin-Plattform für die Beitrags- und Playlist-Produktion auf Digital-Signage-Screens.

Die Lösung im Detail

Flache Sidebar-Navigation ohne verschachteltes Menü. Vier Widgets auf dem Dashboard funktionieren gleichzeitig als CTAs: ein Klick auf „Bald ablaufend" springt in die vorgefilterte Beitragstabelle.

Drag-and-Drop-Canvas auf Polotno, geführt durch einen sechsstufigen Wizard: Layout, Assets, Metadaten, Scheduling, Targeting, Review. Videos werden in Chunks hochgeladen und lassen sich nach einem Verbindungsabbruch fortsetzen, auch bei 1 GB Dateigröße. Autosave speichert jeden Schritt.

Playlists sind Loops mit definierter Slot-Anzahl. Ein Beitrag kann mehrfach pro Loop laufen, dafür gibt es Ghost-Slots als halbtransparente Kopien am Hauptslot. Eine Heatmap im Review-Schritt zeigt Wiederholungsdichte und Konflikte. Beim Aktivieren geht die Playlist an alle Ziel-Player, das Ergebnis kommt als Toast zurück, inklusive Anzahl fehlerhafter Player.

Das Frontend ist modular aufgebaut. Geladen wird nur, was gerade gebraucht wird, wer Beiträge pflegt, lädt keinen Playlist-Code. Performance und Barrierefreiheit standen mit konkreten Zielwerten in den Abnahmekriterien.

Das haben wir gelernt

Learnings & Besonderheiten

Die Entscheidung, beim Umbraco-Backend zu bleiben, war nachvollziehbar. Screenwerks Know-how liegt im CMS, das interne Team arbeitet darin. In Summe wäre ein Technologiewechsel vermutlich der einfachere Weg gewesen. Das alte Backend war nicht einfach nur alt, es war architektonisch schief gewachsen. Der Neubau auf derselben Technologie-Basis bedeutet, viele Muster erneut zu durchdenken, auch wenn sauberer gearbeitet wird. Für Unternehmen in ähnlicher Lage: Die vertraute Technologie zu behalten spart am Anfang Onboarding-Kosten, rechnet sich über die Produktlaufzeit aber nicht immer.

Frontend bei Webduett, Backend bei Screenwerk, PM beim Kunden. Wenn zwei Teams parallel an einem Produkt bauen, sind enge Abstimmung und klare Dokumentation die Grundlage für Tempo und Qualität. Das ist kein Nebenaspekt, sondern Teil des Setups. Je klarer Rollen, Entscheidungswege und Zuständigkeiten am Anfang definiert werden, desto weniger Reibung entsteht im Build.

Für einen Canvas-Editor auf Basis einer Grafik-Bibliothek wie Konva.js hätten wir mehrere Monate gebraucht. Polotno hat das in Wochen erledigt. Der Rest der Zeit ging in die Screenwerk-spezifischen Workflows: Scheduling, Targeting, Loop-Logik. Die Entscheidung, den Editor nicht selbst zu bauen, war eine der wenigen, über die nie diskutiert wurde.

asfasfasf

asfasfasfasf

test/ test

Eologix-Ping Relaunch

Schnelle Ladezeiten, sauberes Mobile, durchgängige Browser-Kompatibilität

-80%

Electrification Academy Plattform

Die Anzahl der aktiven Nutzer:innen der Platform ist stetig am steigen und spiegelt den Erfolg der Entwicklung wieder

+1000

So läuft die Zusammenarbeit

Erstgespräch vereinbaren

In 30 Minuten klären wir unverbindlich, worum es wirklich geht. Was soll entstehen, welches Problem wird gelöst und ob wir die Richtigen dafür sind.

Gespräch anfragen

1. Erstgespräch

Wir klären Ziel, Problem und Rahmenbedingungen. Du bekommst eine ehrliche Einschätzung, ob und wie wir helfen können.

2. Discover & Angebot

Auf Basis des Gesprächs erstellen wir ein klares Angebot für die Discover-Phase. Darin analysieren wir Prozesse, definieren den MVP-Scope und schaffen Entscheidungsgrundlagen.

3. Build starten

Nach Discover erhältst du ein transparentes Angebot für die Umsetzung. Mit klar definiertem Umfang, Aufwand und realistischen Erwartungen.