CASE STUDY
STYLECHECK-APP
E-COMMERCE TRIFFT AUF FASHION-COMMUNITY
ÜBER DIE STYLECHECK GMBH Für alle Modebegeisterten, Trendhungrigen und manchmal unentschlossenen Shopping-Fans ist StyleCheck DIE App. Fragen wie: Welches Kleidungsstück steht mir am besten? Für welches Teil entscheide ich mich in der Umkleidekabine? Und woher bekomme ich dieses Outfit? werden im Handumdrehen durch die StyleCheck-Community beantwortet. Hinter der Fashion-Anwendung steckt die StyleCheck GmbH, die FLYACTS mit der professionellen Umsetzung beauftragte.
WIR SIND SEHR ZUFRIEDEN. NICHT NUR MIT DER APP, SONDERN AUCH MIT DER SEHR POSITIVEN ZUSAMMENARBEIT. MEINE ANSPRECHPARTNER BEI EUCH SIND IMMER FREUNDLICH UND HOCHMOTIVIERT. ES IST WIRKLICH BEEINDRUCKEN MIT ANZUSEHEN, WIE SICH STYLECHECK ENTWICKELT HAT. ICH FREUE MICH SEHR AUF DIE ZUKÜNFTIGE ZUSAMMENARBEIT. Tim Kahlhofen, StyleCheck GmbH
FLYACTS GMBH EBERTSTRASSE 8 // 07743 JENA +49 3641 55 987 90 mail@flyacts.com www.flyacts.com
DAS PROJEKT WURDE UMGESETZT FÜR
1
CASE STUDY
DIE APP-IDEE: ZEIG, WAS DIR GEFÄLLT. Fashion-Community, persönlicher Modeblog und E-Commerce-Funktionen in einer App. Das ist StyleCheck. Trendsetter und Fashionbegeisterte tauschen sich innerhalb einer Plattform aus und inspirieren sich gegenseitig. Eigene Outfits hochladen, andere Styles entdecken, bewerten und sogar nachkaufen sind die Hauptfunktionen der Mode-Anwendung. StyleCheck schafft eine Community, die sich nur auf das Thema Fashion konzentriert. Die App präsentiert Mode im Alltag - da, wo sie hingehört: auf die Straßen, in die Clubs, Festsäle oder Büros dieser Welt, getragen von „Normalos“ wie du und ich. Die ansonsten sehr heterogene Zielgruppe der Anwendung hat jedoch eine Gemeinsamkeit: die Liebe zur Mode.
DIE UMSETZUNG: WIR ZEIGEN, WIE ES UNS GELANG. Bei einer diffusen Zielgruppe wie bei StyleCheck fiel die Wahl schnell auf die Programmierung mittels hoch performanter Webtechnologien. Neben HTML5, CSS3 und JavaScript kamen außerdem die Frameworks AngularJS, Ionic, PhoneGap, Bootstrap, Node.js und MongoDB zum Einsatz. Auf diese Weise erreichten wir kosten- und zeitsparend die Funktionsfähigkeit auf allen Betriebssystemen. Darüber hinaus programmierten wir nach dem Multi-Channel-Ansatz ein einheitliches und interagierendes System aus mehreren Bestandteilen: Die StyleCheck-App gibt es mit einigen Anpassungen nicht nur als Hybrid-, sondern auch als Web-App.
Technologien HTML5 CSS3 JavaScript Schnittstellenanbindung zum Affiliate-Netzwerk tracdelight Dauer 6 Monate Betriebssysteme iOS, Android, Webbrowser Endgeräte Smartphone, Tablet, Desktop Leistung Beratung, Konzeption, Corporate Design, Screedesign, Projektmanagent, Entwicklung, Backend & Schnittstellenanbindung Frameworks AngularJS Ionic PhoneGap Bootstrap Node.js MongoDB
FLYACTS GMBH EBERTSTRASSE 8 // 07743 JENA +49 3641 55 987 90 mail@flyacts.com www.flyacts.com
DAS PROJEKT WURDE UMGESETZT FÜR
2
CASE STUDY
DIE KERNFUNKTIONEN: OUTFITS PRÄSENTIEREN, ENTDECKEN, BEWERTEN, NACHKAUFEN
NACHKAUFEN Fashionliebhaber registrieren sich entweder über ihre Mail-Adresse oder via Social Login mit ihrem Facebook-Profil. Zwei der wichtigsten Funktionen werden dem Nutzer beim Onboarding direkt auf dem Startscreen präsentiert: “Mode hochladen” und “Mode entdecken”. Für die Bewertung der Outfits arbeiteten wir eine besondere Swipe-Geste ein. Von top bis bis flop können die Bewertungen durch den Swipe in eine bestimmte Richtung abgegeben werden. Um einen Style hochzuladen, kann der Nutzer entweder ein neues Bild aufnehmen oder eins aus der eigenen Galerie auswählen. Im Anschluss bestimmt er eine Kleider-Kategorie. So lassen sich die die Styles beim „Mode entdecken“ nach Freizeit, Business, Party & Club, Sport oder Abendmode filtern.
DIE SWIPE-GESTE ZUR BEWERTUNG
SHOP IT: DAS BUSINESS-MODEL Um die dritte Kernfunktionalität - das Nachkaufen einzelner Outfits - zu gewährleisten, fügt der Anwender seinen Kleidungsstücken Tags hinzu. Neben Farbe und Art der Kleidung speichert das System zusätzlich die Marke. Mithilfe dieser Informationen zeigt die Shop-it-Funktion die passenden Kleidungsstücke aus verschiedenen Online-Shops zum direkten Nachkauf an - E-Commerce modern und situationsgetrieben. Als Schnittstelle zwischen den Online-Shops und StyleCheck agiert ein Affiliate-Netzwerk. Diese Netzwerke bilden eine attraktive Refinanzierungsmöglichkeit, da für jeden über die App kommenden Interessenten bestimmte Vermittlungskonditionen verhandelt werden.
DIE TAGS ZUM DIREKTEN NACHKAUFEN
SHOP-IT: DIE EINBINDUNG DES AFFILIATE-NETZWERKS
DE AUFLISTUNG PASSENDER KLEIDUNGSSTÜCKE
Der Markt der Affiliate-Netzwerke ist auch in Deutschland groß. Zunächst setzen wir auf eines der größten Netzwerke “affilinet”. Nach einigen Probedurchläufen wechselten wir jedoch zu “tracdelight”. Dieses Netzwerk hat sich direkt auf Fashion und Beauty spezialisiert. Darüber hinaus konnten wir über die öffentliche API die technischen Voraussetzungen besser testen und evaluieren.
FLYACTS GMBH EBERTSTRASSE 8 // 07743 JENA +49 3641 55 987 90 mail@flyacts.com www.flyacts.com
DAS PROJEKT WURDE UMGESETZT FÜR
3
CASE STUDY
DAS SUCHTPOTENZIAL: WEITERE FEATURES Viele Modeblogger posten mindestens einmal täglich das “Outfit of the day” (#ootd). Um das Foto nicht für jede Plattform separat zu posten, integrierten wir die Social-Share-Funktion für Instagram, Facebook und Twitter. Darüber hinaus animiert ein ausgefeiltes Bonussystem zur erhöhten Interaktion: Mit jedem neuen Style sowie für abgegebene Bewertungen sammeln die Nutzer Punkte, durch die sie wiederum Level für Level aufsteigen können. Im Notification-Bereich werden Anwender entsprechend informiert. Neben den eigenen Outfits stehen vor allem auch die aktuellen Trendsetter im Mittelpunkt der App. Der Fashionfeed beispielsweise inspiriert die Modefreaks durch neuste Styles mit besten Bewertungen. Desweiteren können die Inhalte hier redaktionell bestimmt werden. In einem weiteren Newsfeed verfolgen die Anwender direkt die Styles der eigenen Freunde. Eine zusätzliche Besonderheit ist die Testfunktion. Ohne sich registrieren zu müssen, können potenzielle App-User die besondere Swipe-Bewertung ausprobieren und sich überzeugen.
DER FASHIONFEED
DAS MULTI-CHANNEL-SYSTEM: NUTZERGEWOHNHEITEN VERSTEHEN StyleCheck ist eine sogenannte Multi-Channel App: Die im Mittelpunkt stehende Hybrid-App wird zusätzliche um eine Single-Page-Application für den Desktop erweitert. Diese zwei Anwendungen ergänzen sich untereinander und legen je nach Nutzergewohnheiten andere Schwerpunkte. Die Hybrid-App fokussiert den Community-Gedanken, sodass die Funktionen ‘Outfits teilen’ sowie ‘Outfits entdecken’ und per
FLYACTS GMBH EBERTSTRASSE 8 // 07743 JENA +49 3641 55 987 90 mail@flyacts.com www.flyacts.com
Swipe ‘bewerten’ im Vordergrund stehen. Die größeren und übersichtlicheren Screens der Desktop-Anwendung unterstützen den Nachkauf der Outfits. Die Shop-it-Funktion spielt in der Web-App somit die Hauptrolle. Studien belegen zudem, dass ein Großteil der Online-Käufe über Desktop-Geräte getätigt wird. Außerdem ist der Testzugang ausgeweitet, sodass auch nicht registrierte Nutzer die Outfits des Fashionfeeds anschauen und nachkaufen können.
DAS PROJEKT WURDE UMGESETZT FÜR
4
CASE STUDY
Die Web-App macht StyleCheck insgesamt zu einem geräteübergreifenden Erlebnis. Darüber hinaus administriert das StyleCheck-Team die Fashion-Plattform über ein Backoffice (Web-App). Hier verwaltet er die Nutzer und ihre Styles: Wird ein Bild gemeldet, löscht er es direkt über das Backoffice. Auch werden hier die Einträge für den Fashionfeed geplant und generiert. Durch eine Filterfunktion können die Einträge nach Durchschnittsbewertungen, Erstelldatum oder Tags separiert und für den Feed ausgewählt werden. Zusätzlich werden die Bonuspunkte für die verschiedenen Levels im Backoffice konfiguriert und die Contentseiten mit Inhalten gefüllt.
Alle drei Anwendungen sind an ein einheitliches Backend geknüpft und bilden somit ein Multi-Channel-System.
BACKOFFICE Verwaltung Nutzer / Styles Fashionfeed Bonussystem
WEB-APP Fashionfeed Shop-it
APP bewerten entdecken teilen
DIE ERWEITERUNGEN: NACH DEM RELEASE IST VOR DEM RELEASE Nicht nur aufgrund der Veränderungen der Betriebssysteme sollte eine App nach dem Release gepflegt und aktualisiert werden. Auch die Kommentare der User in den App-Stores bringen ständig neuen Input, auf den App-Entwickler eingehen sollten. Treue als auch neue Nutzer werden es Ihnen mit Conversion und Aktivität danken. Auch bei StyleCheck warten nach dem Launch noch einige Features auf die Implementierung: Zum Beispiel die Kommentarverlinkungsfunktion: Sie unterstreicht den Community- und Kommunikationscharakter von StyleCheck. Ein weiterer Mehrwert-Lieferant ist die Erweiterung der Shop-it-Funktion um zusätzliche Artikel in Form von “Nutzer kaufen auch ..." FLYACTS GMBH EBERTSTRASSE 8 // 07743 JENA +49 3641 55 987 90 mail@flyacts.com www.flyacts.com
Funktionen im Überblick: Registrierung / Social Login Testversion ohne Login Profilverwaltung (Profilbild, Daten, Lieblingsmarken) Styles hochladen, bewerten, kommentieren Social Share Favoritenauswahl anderer Profile Fashionfeed: Styles mit den besten Bewertungen, redaktionell bestimmt News Feed mit den aktuellsten Styles der Favoriten Nachkauf aller Outfits über die Shop-It-Funktion Bonussystem DAS PROJEKT WURDE UMGESETZT FÜR
5
CASE STUDY
DIE GESCHÄFTSAUSSTATTUNG
DAS DESIGN: DAS STYLECHECK-UNIVERSUM NIMMT FORM AN
LOGO WORT- UND BILDMARKE
Neben der technischen Umsetzung und der konzeptionellen Beratung erstellten wir zusätzlich das Design rund um StyleCheck. Das beinhaltete abgesehen vom Screendesign der Anwendungen auch das gesamte Corporate Design der StyleCheck GmbH von Logo und Farbschema bis zu den Geschäftspapieren, Visitenkarten und Briefumschlägen. Die Bildmarke des Logos, die gleichzeitig auch das App Icon bestimmt, ist ein Kleiderbügel. Stylisch und direkt transportiert sie sofort das Thema der App: Fashion. Zur Bild- gesellt sich die Wortmarke, die das Logo komplett macht. Ein einprägsamer Schriftzug vervollständigt den wichtigsten Part des Außenauftritts. Die Komposition lässt sich so mit oder ohne Bildmarke in verschiedenen Farben an den unterschiedlichsten Stellen einbinden.
FLYACTS GMBH EBERTSTRASSE 8 // 07743 JENA +49 3641 55 987 90 mail@flyacts.com www.flyacts.com
DAS PROJEKT WURDE UMGESETZT FÜR
6
CASE STUDY
Die Hauptfarbe der Anwendung ist ein rot, das etwas in die Magenta-Richtung driftet. Dieser leicht feminin angehauchte Farbton unterstreicht ebenso den Fashion- und Mode-Charakter. Um jedoch nicht zu weiblich zu wirken, wurde schwarz als zweite Farbe gewählt.
FARBWERTE
TYPO
HAUPTFARBEN
Frutiger Lt Std Condensed Rot
Schwarz
Weiß
# e1122e
# 000000
# ffffff
NEBENFARBEN
Regular Condensed
ABCDEFGHIJKLMNOPQRSTUVWXYZ Bold Condensed
ABCDEFGHIJKLMNOPQRSTUVWXYZ Grau
Hellgrau
Light Condensed
# 9d9d9d
# e8e8e8
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Die größte Besonderheit im Screendesign der App ist das Menü auf der rechten Seite des Screens. Der Menü-Button ist angelehnt an das das Google Material Design und beinhaltet die einzige Schattierung in der sonst sehr flat gehaltenen Aufmachung. Die Optik der App lebt entsprechend von den hochgeladenen Style-Bildern der Nutzer. Darüber hinaus verzichteten wir außer beim Menü auf Icons und Buttons, da neben den Bildern die Typografie eine wichtige Rolle spielt. Da die Icons im Menübereich die einzigen sind, wurden sie sehr sorgsam gewählt und designt. Tippt der Nutzer auf den Menü-Button, fahren sich ebenso in Form von Buttons sechs Unterpunkte nach unten aus. Jeder Menüpunkt ist mit einem anderen Icon versehen (Profil, Community, Fashionfeed, Favoriten usw.), das dem Nutzer entsprechend deutlich macht, an welcher Stelle er sich gerade befindet. Auf diese Weise sparten wir uns den Subheader.
MENÜ / SCHNELLZUGRIFFSLEISTE
Eine kleine Sonderrolle spielt auch hier der Kleiderbügel des StyleCheck-Logos und erzeugt damit einen absoluten Wiedererkennungswert: Befindet sich der Nutzer in der Detailansicht eines Styles, sieht er unterhalb des Bildes den Kleiderbügel. Durch einen Tap auf das Icon wird die wichtige Shop-it-Funktion aktiviert und die Tags der Kleidungsstücke werden sichtbar. Darüber hinaus kann der Nutzer erkennen, wie gut der Style von den anderen Nutzern bereits bewertet wurde.
FLYACTS GMBH EBERTSTRASSE 8 // 07743 JENA +49 3641 55 987 90 mail@flyacts.com www.flyacts.com
DAS PROJEKT WURDE UMGESETZT FÜR
7