Projektstudie: creAce – Prototyping-Prozess einer React Native Mobile App von Proof bis Release đŸ‡©đŸ‡Ș

Letztes Jahr kamen die Jungs des frisch gegrĂŒndeten Startups Native Studios mit einer App-Idee auf mich zu, die sich inzwischen creAce nennt und in einem mustergĂŒltigen Prototyping Prozess implementiert wurde. Diesen Prozess möchte ich heute einmal vorstellen.

Idee

Die grundsĂ€tzliche Idee dahinter ist, dass Nutzer UnterstĂŒtzung bekommen hochqualitativen Video-Content zu produzieren, indem sie beim Aufnehmen Regie-Anweisungen sehen und die eigenen anschließend mit professionell produziertem ÜbergĂ€ngen und Content einer Produktionsfirma zusammengefĂŒgt werden.

Inzwischen ist die App Live in sowohl einer Android– als auch einer iOS-Version live.

Die Ergebnisse werden euch ĂŒberraschen – probiert es mal aus! Aktuell gibt es auch eine Promo zum neuen NERVE Film, wo Nutzer Filme mit Hilfe der creAce App Videos produzieren und veröffentlichen.

Einen guten Überblick ĂŒber das Produkt gibt es auf dem Blog von Schröder Schömbs. Bei mir geht es heute hauptsĂ€chlich um den Prozess.

Prozess

Erst mal 1 Prototyp.


Gestartet wurde mit einem ganz kleinen Prototypen, welcher lediglich 3 Manntage benötigte. Dieser Prototyp konnte ein einziges Templates mit Regieanweisungen “aufnehmen” und die aufgenommenen Videos zusammen mit professionellem Content hintereinander abspielen. Es gab noch keine MenĂŒfĂŒhrung, sondern es wurde lediglich der Kern der Wertschöpfung abgebildet.

Challenges: Erste Entscheidungen zum grundsÀtzlichen Aufbau wurden ganz pragmatisch getroffen. Unter anderem hat sich das Touch to Record bewÀhrt und wurde bis zum Release beibehalten.
Am meisten hat der Prototyp dazu beigetragen, dass auch im GrĂŒnderteam ĂŒber Dinge gesprochen wurde, die man so vorher noch nicht auf dem Radar hatte. Offensichtlichster Punkt war die Frage nach den großen Upload- und Download-Volumen, die so eine Video-App mit sich bringt – sowohl technisch, als auch des Userinterfaces wegen.

Prototyp bekommt MenĂŒfĂŒhrung und mehrere Templates

Im nĂ€chsten Prototyp gab es eine Basic MenĂŒfĂŒhrung und zwei funktionierende Templates.

An diesem Schritt haben wir uns sehr viel darĂŒber unterhalten, welche Herausforderungen es beim generativen Erstellen von Videos gibt. Das Schneiden von professionellem Video-Content lĂ€sst sich eben schlecht in eine Schablone pressen, da der Cutter doch sehr viele Entscheidungen intuitiv und nach GefĂŒhl trifft. Das macht der Cutter vor allem bei ÜbergĂ€ngen (beispielsweise geht die Hintergrundmusik bei Schnitten leicht versetzt hoch und runter). ZusĂ€tzlich kann bei User Generated Content nicht immer davon ausgegangen werden, dass die Inhalte immer die selbe LĂ€nge haben.
Ergebnis war eine eigene Template-Notation und ein fest definiertes Featureset fĂŒr die Film-Kreativen, welche ein Rendering-Service programmatisch verarbeiten kann.

Challenges: Eine Balance an Abstraktion zu finden, welche zwar noch ein großartiges Ergebnis zulĂ€sst aber trotzdem auch automatisiert von einem Renderingservice erstellt werden kann.
Wir bewegen uns im Bereich der Teil-Automatisierung von Video-Rendering. Wir haben hier keine Invididual-Leistung wie in einem professionellem Avid like Schnittprogramm, wo ein Cutter jedes mal ein Unikat macht und alles hĂ€ndisch anpassen kann und will. Wir bewegen uns aber auch nicht im Bereich der Voll-Automatisierung, wo wir am Ende ein App nur fĂŒr ein einziges Template mit wechselndem User-Content programmieren. Es muss konfigurierbar und wiederverwendbar sein.

Prototyp mit releasenaher User Experience

Mit dem ganzen Team und UX-Experten haben wir gebrainstormed, was die finale App an Featureset benötigt. Anschließend wurden die Features in releasekritisch und eine spĂ€tere Roadmap unterteilt.

Mit dem releasekritischen Featureset und den bisherigen Learnings der Nutzung wurde der Prototyp um ein möglichst releasenahes Interfaces erweitert und ca. 200 externen Testern ausgeliefert. Wertvolles Feedback!

Challenges: Eine normale App möchte man im Portrait Modus nutzen, doch was ist mit aufgenommenen Videos? Die möchte man vermutlich ja im Querformat haben. Wie halten wir den Nutzer bei der Stange, wĂ€hrend das Video im Hintergrund hochgeladen und verarbeitet wird? MĂŒssen wir etwas fĂŒr Nutzer vorsehen, die gerade kein W-Lan haben?

Die Antworten dazu könnt ihr in der Release-Version selbst herausfinden. 😉

Livegang

Inzwischen hatte das Startup den ersten Kunden gesigned und damit einher endlich auch ein Launchtermin. In 10 Wochen wurde dann die App aus ihrem Prototyping-Stadium heraus bis zum Release fĂŒr Android und iOS inkl. API und kompletter Rendering-Pipeline von einem 5-köpfigen Entwicklerteam verteilt in Berlin und Frankfurt gestemmt.

ZusÀtzlich wurde im Hintergrund auf der kreativen Seite auch schon massiv an der Erstellung von Templates und professionellem Content gearbeitet.

Technologie

Schon der erste Prototyp wurde in React Native (damals v0.13) implementiert. Zum Release waren wir dann schon bei Version 0.13 angekommen.
Die API setzt auf PHP/MySQL und die Frameworks Laravel und Dingo.
Das Rendering zu beschreiben wĂ€re nochmal ein komplett eigenes Thema, aber im Grunde setzt es auf dem Amazon Simple Workflow Service und das MLT Framework auf – gescripted durch Node.JS.

Ich begleitete das Startup zu Anfangs durch Erstellung der Prototypen und wĂ€hrend der Entwicklungsphase als Berater, Dev-Ops/Infrastruktur und Code-Reviews.

Leave a comment

Your email address will not be published. Required fields are marked *