Web-Apps sind nicht gerade für ihren Funktionsumfang bekannt. Werden mobile Anwendungen beschrieben, stehen sie bei der Komplexität oft an letzter Stelle – nach nativen und hybriden Apps . Wir möchten beweisen, dass eine Web-Anwendung bedeutend mehr sein kann, als das letzte Glied in der App-Kette. Für die Modelagentur Brüderchen und Schwesterchen programmierten wir eine Single-Page-Application, die nicht nur auf dem Smartphone eine gute Figur macht.
1 Ausgangspunkt
Die Agentur arbeitet mit drei verschiedenen Systemen, um die gesamten Aufgaben und Prozesse abzubilden: Buchungen, Abrechnungen, Terminplanungen. Effektiv ist das nicht gerade. Das dachte sich auch Markus Lienert, Geschäftsführer der Düsseldorfer Modelagentur Brüderchen und Schwesterchen. Da der Markt keine Standardlösung hergibt, die den Bedürfnissen der rheinländischen Modelscouts gerecht wird, beauftragten sie uns mit der Entwicklung einer Business-Plattform, die in dieser Form bisher einmalig ist.
2 Umsetzung
Neben dem neuen Tool, das alle Systeme in einem Interface vereint, stand eine ansprechende Kundenansprache im Vordergrund. Die Businessplattform der Modelagentur ersetzte entsprechend die bisherige Internetpräsenz. Diese basierte ohnehin auf flash, war nicht responsiv und somit nicht für mobile Geräte optmimiert.
Eine Web-App als Business-Plattform mit solch einem Umfang ist bisher beispiellos. Die Webtechnologien HTML5, Java Scrip und CSS3 sowie das Framework AngularJS waren neben dem Magento-Backend die entscheidenden Technologien. Auch das ist ungewöhnlich: Das Shopsystem Magento bietet jedoch einen großen Funktionsumfang backend-seitig sowie die Flexibilität, über die REST-API das Interface komplett an die Wünsche von Markus Lienert und seiner Truppe anzupassen. Und so entstand sie, die Plattform für vier verschiedene Nutzergruppen.
Abb. 1: Die Business-Plattform ist sowohl Phone- als auch Tablet-optimiert
3 Die unterschiedlichen Rollen
Eine besondere Herausforderung waren die vier verschiedenen Nutzergruppen mit separaten Zugängen und Administrationsrechten:
1. Brüderchen und Schwesterchen
2. Models
3. Kunden mit eigenen Accounts
4. Interessenten ohne Accounts
Brüderchen und Schwesterchen administriert im Backend den Content der Website und stellt News oder aktuelle Projekte und Kampagnen ein. Darüber hinaus speichern, katalogisieren und präsentieren die Agentur-Mitarbeiter ihre Models im System. Auch die Jobplanung der Models, die Terminverwaltung sowie die Abrechnung wird über die Plattform abgewickelt. Sie bildet die Buchungsprozesse genau so ab, wie sie die Agentur benötigt. Ein weiteres Highlight ist die automatische Sedcard-Generierung mit Online-Bildbearbeitungstool.
Abb. 2: Die Administrationsansicht von Brüderchen und Schwesterchen
Abb. 3: HTML5-basierte Programmierung des Online-Bildbearbeitungstools
Eine weitere Benutzerebene entwickelten wir für die Models. Hier können sie sich direkt bewerben. Sind sie bereits in der Kartei aufgenommen, greifen sie auf ein eigenes Dashboard zu und verwalten und planen ihre Jobs darüber.
Bereits registrierte Kunden der Modelagentur können durch ihren Account alle Stammdaten der Models einsehen und sich via Multiple Wishlist eigene Kollektionen zusammenstellen. Bereits vorinstallierte Kollektionen der Agentur sind für die Kunden darüber hinaus downloadbar und können direkt an bestimmte Empfänger versendet werden.
Interessenten, die auf der Website der Düsseldorfer Modelagentur stöbern und sich über sie informieren möchten, sind eine weitere Nutzergruppe. Auch sie können die Modelkarteien durchsuchen und sich Kollektionen anlegen. Aufgrund der diskreten Philosophie und zum Schutz der Models haben die Interessenten ohne eigenen Account jedoch nur einen eingeschränkten Zugriff auf die Stammdaten der Werbegesichter.
Abb. 3: Ein- und ausklappbares Sidemenü, um sich eigene Kollektionen anzulegen
4 Aufbau und Design
Als Full-Service-Agentur übernahmen wir neben der Konzeption und der Programmierung auch das Design. Die Aufmachung der Single-Page-Application ist klar, dezent und flat gehalten. Durch diesen minimalistischen Stil stehen die Gesichter der Models im Vordergrund – getreu dem Motto: “Wir geben Botschaften ein Gesicht.” Fullscreen-Bilder transportieren trotz der dezenten Gestaltung die notwendige Emotionalität, um die Kunden und Interessenten zu überzeugen.
Eine Menüleiste mit Filterfunktionen zur Modelsuche gibt in jeder Ansicht die Möglichkeit, in die Modelsuche einzusteigen. Auch das verdeutlicht das Kerngeschäft der Agentur und stellt die Models in den Fokus der Business-Plattform. Darüber hinaus lassen sich sowohl die Menü- als auch die Kollektionen-Sidebar jederzeit ein- und ausklappen.
Die nötige Funktionalität erreichten wir trotz der einheitlichen Seitenstruktur mit verschiedenen Slidern. Hier wechselt der Nutzer zwischen einzelnen Models oder Newsartikeln.
Abb. 4: Einfacher Einstieg in die Modelsuche
5 Erweiterung
Da wir die Multifunktions-Plattform der Modelagentur auf Basis von Webtechnologien umsetzten, können wie um nachhinein ohne großen Aufwand Zusatzfunktionen und Erweiterungen implementieren. Auch eine Tablet-App für die Models ist in Planung. Die Bewerberinnen und Bewerber können dann ihre persönlichen Daten via Tablet direkt ins System von Brüderchen und Schwesterchen einspeisen.
Eine download-und druckbare Version dieser Case Study findet ihr unter: www.flyacts.com/business-webanwendung-multifunktionsplattform-model-agentur
