StyleCheck

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
[email protected]
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
[email protected]
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
[email protected]
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
[email protected]
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
[email protected]
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
[email protected]
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
[email protected]
www.flyacts.com
DAS PROJEKT WURDE UMGESETZT
FÜR
7