1. Vorbereitung

1.1. Discover all - Projektvorbereitung

Der zuständige Projektmanager von Ventzke Media analysiert das durch den Kunden bereitgestellte Briefing. Er filtert und ordnet einzelne Bestandteile nach Wichtigkeit und verschafft sich eine erste Übersicht zu dem anstehenden Projekt. Diesen Überblick, der Marke des Auftraggebers, dessen Geschäftsmodell und der möglichen Nutzer im Zusammenhang des Relaunches, fasst er in einem internen Briefing zusammen.

1.2. Wer macht was – Zusammenstellung des Teams

Anhand der vorhergehenden Analyse durch Ventzke Media und dem intern erstellten Briefing wird ein auf das Projekt fachlich zugeschnittenes Team zusammengestellt.

Die Arbeitsgruppe besteht, je nach Projektgröße, aus ein bis zwei Projektmanagern, einem technischen Projektleiter, einem Konzepter, ein bis zwei UI/UX Designern, sowie dem dazugehörigen Entwickler-Team aus jeweils einem Frontend- und einem Backend-Entwickler.

Nach Festlegung der Teammitglieder bekommen alle Teilnehmer die intern erstellte Projektbeschreibung, um sich in das anstehende Projekt einzulesen. Jedes Mitglied hat die Aufgabe, sich in seinen fachlichen Bereich sachgemäße Gedanken über das Projekt zu machen und erste Ideen in Form von kurzen Stichpunkten festzuhalten.

1.3. Los geht’s - Interner Workshop

In einem ersten internen Workshop werden alle vorher festgehaltenen Gedanken und Ideen der gesamten Arbeitsgruppe zusammengetragen und diskutiert, sie sind die Grundlage des folgenden Brainstormings.

Gemeinsam erörtern wir wie sich die Marke des Auftraggebers aktuell präsentiert und was bei einem Relaunch optimiert werden sollte. Hierbei stellt sich das Team die Fragen, wie sich die Marke verhält, wie sie aussieht, was sie erzählt und was sie verspricht. Im Anschluss wird darüber diskutiert wie die Marke erlebbarer gemacht werden kann und wie man die geforderten Ziele am sinnvollsten erreicht. Erste konzeptionelle Ideen und deren Machbarkeit werden gemeinsam entwickelt.

Aus dem Blickwinkel des Brand-Filters, der Experience Guidelines und der Touchpoint Strategie wird ein interner Ablaufplan erstellt, in welchem die speziellen Aufgaben für die jeweiligen Projektmitglieder klar definiert sind.

1.4. Was haben wir - Analyse

Alle Fachbereiche des Projektteams analysieren den Ist-Zustand in Hinsicht auf die Erreichung der für den Relaunch neu gesetzten Ziele.

Der Konzepter und der UX-Designer analysieren gemeinsam mit dem Projektmanager die Benutzbarkeit der aktuellen Website. Hierbei werden auch die Webseiten der Mitbewerber, auf ihre Benutzerfreundlichkeit, sowie auf „Best Practice“ Methoden hin geprüft. Alle Erkenntnisse werden schriftlich festgehalten.

Das technische Team setzt sich mit den aktuell eingesetzten Technologien auseinander, es prüft die bei den Mitbewerbern verwendeten Technologien und erstellt eine Übersicht über Machbarkeit und mögliche Engpässe in der künftigen Entwicklung. Hierbei wird auch erörtert, welche Frameworks in der zukünftigen Internetpräsenz Verwendung finden. Diese Feststellungen werden ebenfalls schriftlich festgehalten.

1.5. Let’s get in touch! - Kick-Off Workshop

Nachdem wir alle gesammelten Informationen zusammen getragen haben, laden wir die zuständigen Projektverantwortlichen zu einem Kick-Off-Workshop ein oder veranstalten diesen mit unserem Lead-Team bei dem Auftraggeber vor Ort. Dies ist nicht nur notwendig, sondern wird immer gerne gesehen, um alle Stakeholder persönlich kennenzulernen, das Projekt und erste Ideen zu besprechen. Die zuständigen Teams stellen sich vor und alle gesammelten Anforderungen aus den vorhergehenden Meetings werden präsentiert.

Der Austausch dient dem Erarbeiten weiterer Details wie:

Klärung offener Fragen

Definition von Milestones

Besprechung der Funktionen

Definition der Seitenstruktur

Fixierung des Zeitplans / Vereinbarung von Sprints

Den weiteren Projektverlauf

Besprechung des Betreuungskonzeptes

Erste Konzeptionelle- bzw. Gestaltungsideen

1.6. Cutting Edge – Unser Technologie Stack

Während des Workshops erarbeiten wir ein erstes Konzept für die technische Umsetzung. Es werden Technologien sowie Frameworks festgelegt und die Anforderungen der benötigten Funktionen besprochen.

Als Full-Stack Agentur sind wir auf folgende Technologien und Frameworks spezialisiert:

Frontend & 3D-Rendering

HTML5, CSS3, Bootstrap, UIKit

VanillaJS, Coffe Script, ES6

Webpack, npm, Sass, Gulp

React, React Native, Angular, TypeScript

Three.js, WebGL, pixi.js, barba.js

Backend, Deployment, CI & Analysis

Node.js, REST API, PostgreSQL

MongoDB, CosmosDB, Express, Loopback

MS Azure, Amazon Web Services, Heroku

Jasmine, Travis, Jenkins

1.7. Pflichtenheft

Aus der Zusammenfassung des Kick-Off-Workshops resultiert das Pflichtenheft, in welchem die Funktionen des Projekts detailliert beschrieben werden. Hier wird auch festgehalten, welche Leistungen nicht Teil der Beauftragung sind, sowie eine klare Definierung von Korrekturrunden und Änderungsanforderungen (CR).

2. Prototyping & UX-Design

2.1. Sitemap

Auf Grundlage der im Workshop besprochenen Struktur erstellen wir die Sitemap. Ziel ist es die Seitenstruktur zu verschlanken, um eine optimale User Journey zu gewährleisten. Die Sitemap wird im Anschluss gemeinsam besprochen, optimiert und durch den Auftraggeber abgenommen.

2.2. Wireframes

Die gemeinsam entwickelten ersten Ideen bilden die Basis für die Erstellung der Wireframes. Wir erstellen Wireframes für alle Seitenansichten und definieren diese aus. Je nach Anforderung konzipieren wir individuelle Konzepte für versch. Anwendungsbereiche, von der Desktop-Auflösung bis hin zur mobilen Ansicht auf dem Smartphone.

2.3. Screendesigns

Nach Beendigung des Wireframings wird das Screendesign erstellt, die vorab entworfenen Wireframes bilden hierfür das Fundament. Für die Screendesigns sind ebenfalls eine Korrekturschleife sowie eine Abnahme vorgesehen.

2.4. Korrekturrunden

Ventzke Media wird die von dem Auftraggeber gewünschten Änderungsvorschläge umsetzen, darauf erfolgt eine erneute Abnahme. Die Anzahl der Korrekturrunden wird vor Projektbeginn definiert.

2.5. Prototyp

Um das Benutzererlebnis (UX & UI) besser beurteilen zu können, setzen wir das Konzept als klickbaren Prototypen um, hierfür benutzen wir Tools wie Figma. Es erfolgt eine erneute Prüfung durch den Auftraggeber.

2.6. Review-Meeting

In einem weiteren Treffen werden die bisherigen Konzepte und der Prototyp besprochen. Es können bereits getroffene konzeptionelle Entscheidungen in Frage gestellt und überarbeitet werden. Nach der Präsentation werden weitere Details und geplante Technologien für die technische Umsetzung festgesetzt.

3. Agile Engineering

Nach der Freigabe der Screendesigns werden diese unseren Entwicklern übergeben und die Umsetzung beginnt. Um einen fehlerfreien Ablauf der Programmierung zu gewährleisten, arbeitet das Entwickler Team auf drei in Abhängigkeit zueinander stehenden Entwicklungssystemen (Dev, Staging, Production).

Die Entwicklungszyklen bestehen aus:

Entwicklung Frontend

Internes Testing Frontend / UX / UI

Abnahme Frontend

Entwicklung Backend

Entwicklung / Integration Schnittstellen (API)

Internes Testing Backend

Abnahme / Einweisung CMS

Dokumentation / Funktionsbeschreibung

Testing / Rollout / Launch

Continuous Delivery

3.1. Frontend

Wir sehen die Entwicklung des Frontends als eigenständige Disziplin und haben hierfür Experten im Team, die alle wichtigen Aspekte eines hochmodernen Web-Frontends abdecken können. Frontend-Applikationen werden bei Ventzke Media stets voll responsive in HTML5, CSS3 und mit der Hilfe von JavaScript, jQuery, Ajax, TypeScript oder JSX entwickelt. Dabei verwenden wir CSS Frameworks wie Bootstrap, Foundation oder UIkit und JavaScript Frameworks wie Angular oder React. Alle Templates werden nach dem “Pixel Perfect” Prinzip realisiert.

3.2. Backend

Für die Entwicklung unserer Backend Anwendungen und REST Schnittstellen arbeiten wir mit Node.js. Die Entwicklung mit Node.js ermöglicht eine schnelle Umsetzung von leistungsstarken, robusten und skalierbaren Anwendungen und Server-Backends. In Verbindung mit Datenbanksystemen wie MongoDB, CosmosDB oder PostgreSQL bildet Node.js die ideale Grundlage für unsere Projekte. Für die Entwicklung unserer Backend Anwendungen und REST Schnittstellen arbeiten wir mit Node.js. Die Entwicklung mit Node.js ermöglicht eine schnelle Umsetzung von leistungsstarken, robusten und skalierbaren Anwendungen und Server-Backends. In Verbindung mit Datenbanksystemen wie MongoDB, CosmosDB oder PostgreSQL bildet Node.js die ideale Grundlage für unsere Projekte.tungsstarken, robusten und skalierbaren Anwendungen und Server-Backends. In Verbindung mit Datenbanksystemen wie MongoDB, CosmosDB oder PostgreSQL bildet Node.js die ideale Grundlage für unsere Projekte.

3.3. Individuelle Software

Eine weitere Kernkompetenz von Ventzke Media ist die Entwicklung von Web-Applikationen mit Technologien wie Angular oder React. Diese performanten, von Google und Facebook, entwickelten JavaScript Bibliotheken arbeiten nach dem Model View Controller (MVC) Architekturmuster mit der Unterstützung des Flux / Redux Konzeptes zum Erstellen der jeweiligen Applikation-States. Mit dieser Methode trennen wir die Programmierlogik (Backend) und die Designlogik (Frontend) voneinander. Dadurch ist es einfacher, die Entwicklungen im Backend vorzunehmen, ohne das Design der Applikation anzupassen. Eine weitere Kernkompetenz von Ventzke Media ist die Entwicklung von Web-Applikationen (/de/services/fr) mit Technologien wie Angular oder React. Diese performanten, von Google und Facebook, entwickelten JavaScript Bibliotheken arbeiten nach dem Model View Controller (MVC) Architekturmuster mit der Unterstützung des Flux / Redux Konzeptes zum Erstellen der jeweiligen Applikation-States. Mit dieser Methode trennen wir die Programmierlogik (Backend) und die Designlogik (Frontend) voneinander. Dadurch ist es einfacher, die Entwicklungen im Backend vorzunehmen, ohne das Design der Applikation anzupassen.cklung). Diese performanten, von Google und Facebook, entwickelten JavaScript Bibliotheken arbeiten nach dem Model View Controller (MVC) Architekturmuster mit der Unterstützung des Flux / Redux Konzeptes zum Erstellen der jeweiligen Applikation-States. Mit dieser Methode trennen wir die Programmierlogik (Backend) und die Designlogik (Frontend) voneinander. Dadurch ist es einfacher, die Entwicklungen im Backend vorzunehmen, ohne das Design der Applikation anzupassen.

Wesentliche Vorteile von Angular und React:

Hohe Skalierbarkeit, schnellere und agilere Entwicklungszyklen durch unabhängige Komponenten

Bessere Code-Qualität durch das Verwenden von TypeScript

Verwendung der Datentypen von JavaScript

Gleichzeitiges Verwenden in kollaborativen Teams durch internationale Standards

4. Qualitätssicherung & Testing

Zur Sicherung der Qualität überwachen unsere Projektmanager den gesamten Prozess der Programmierung in Hinsicht auf die Performance, die Funktionalitäten sowie die User Experience. Nach Fertigstellung der Entwicklung wird das Ergebnis nach denselben Kriterien getestet.

Bei Ventzke Media setzen wir unter anderem auf automatisierte Verfahren, die es ermöglichen, eine gleichbleibende Qualität bei gesteigerter Produktivität und höherer Entwicklungsgeschwindigkeit zu gewährleisten. Diese zyklisch durchgeführten Tests werden Regressionstests genannt. Damit jedes Teammitglied in einem Projekt dazu angehalten wird qualitativ hochwertige Applikationen einzubinden, stehen zentrale Services bereit, die die Qualität überwachen. Dabei handelt es sich um CI (Continuous Integration)-Server. Bei Ventzke Media verwenden wir unter anderem Jenkins.

Die technische Umsetzung des Frontends wird grundsätzlich konform zu den im Projekt definierten Standards des W3C umgesetzt, abgesehen von älterer Browserkompatibilität. Es wird Validität und ein Minimum an Warnungen gewährleistet. Geprüft wird mit dem Validator des W3C. Zusätzlich kontrollieren wir die entwickelte Applikation auf Geschwindigkeit, Komprimierung der Bilder sowie Script-Dateien mit Google´s PageSpeed Insights Tool.

Frontend Performance-Optimierungen im Überblick:

Script-Minifying und -Merging

Optimierte Expire-Header

Verwendung von Icon-Fonts

HTTP-Kompression / Gzip Kompression

Web Browser Prefixes

Keine unnötigen DOM Elemente

5. Kommunikation & Projektmanagement

5.1. Kommunikation

Großen Wert legen wir bei Ventzke Media auf eine transparente Kommunikation, aus diesem Grund hinterfragen wir die Prozesse und Strukturen unserer Auftraggeber, um Entscheidungen besser zu verstehen und Tasks zu priorisieren.

Die Kommunikation während des Projekts findet über E-Mail, Telefonkonferenzen, Skype und anderen Online-Tools, wie z.B. Basecamp statt. Um einen agilen und transparenten Projektablauf zu gewährleisten, empfehlen wir mindestens einen 2-7 tägigen Austausch der zuständigen Projektmanager. Gerne führen wir auf Wunsch die komplette Kommunikation auf English.

5.2. Projektmanagement

Das Projektmanagement von Ventzke Media ist ein Mix aus klassischen Wasserfall Methoden und einem agilem Vorgehen. Für die Umsetzung von Webprojekten setzen wir unter anderem auf iterative Entwicklungsschleifen (Sprints) anstatt linearer Umsetzungsmodelle.

Wir stellen je nach Projektgröße bis zu 2 Projektmanager als feste Ansprechpartner zur Verfügung, wobei einer als Product Owner agiert, welcher alle Prozesse und Sprints im Überblick behält. Er geht agil auf interne sowie externe Änderungen während des Fortschritts ein und bespricht diese mit unserem Auftraggeber.

6. Krisenmanagement

Durch die Erfahrungen, aus den vielen Projekten die wir bisher umgesetzt haben, sehen wir uns in der Lage auch in brenzligen Situationen einen kühlen Kopf zu bewahren. Sollte also mal, anders als erwartet, etwas nicht reibungslos ablaufen, haben wir uns im Team einfache Regeln auferlegt.

Die Projektmanager bei Ventzke Media sollen immer ehrlich zu sich selbst sein und stets auf Ihre Erfahrung vertrauen um eine mögliche Krise schnell zu erkennen. Das Team wiederum ist dazu aufgerufen sämtliche Bedenken und Probleme rechtzeitig zu äußern um umgehend mit dem zuständigen Projektleiter eine mögliche Krise präventiv abzuwenden.

Sollte jedoch das Fenster der letzten Gelegenheit bereits überschritten sein, empfehlen wir unseren Mitarbeitern folgende Verhaltensweisen:

Niemals Situationen herunterspielen oder leugnen

Schuldzuweisung und destruktive Kommunikation vermeiden

Bei der Entwicklung von Alternativen oder Lösungsansätzen in kurzen Meetings das gesamte Projektteam einbeziehen.

Um jedoch im gesamten das Krisenmanagement zu verbessern, sehen wir diese Punkte als essentiell:

Zusammenspiel der unterschiedlichen Abteilungen

Zeitangaben sind begrenzt und es gibt für alle Projektabschnitte klare Zeitvorgaben

Konsequente Projektabarbeitung

Klare Hierarchie der jeweiligen Verantwortlichen

Jeder kennt seine Aufgaben

Jedes gemeinsame Ziel wird im Team erarbeitet und es werden Sprints festgelegt