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.

Published by Klaus Breyer

a CTO and Startup Founder/Advisor, living in Berlin and probably offering consulting regarding this topic.

Leave a comment

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