Case Study: StyleCheck - die Fashion-App

CASE STUDY

1

DAS PROJEKT WURDE UMGESETZT FR

FLYACTS GMBHEBERTSTRASSE 8 // 07743 JENA

+49 3641 55 987 [email protected]

BER DIE STYLECHECK GMBH

Fr alle Modebegeisterten, Trendhungrigen und manchmal unentschlossenen Shopping-Fans ist Style-Check DIE App. Fragen wie: Welches Kleidungsstck steht mir am besten? Fr welches Teil entscheide ich mich in der Umkleidekabine? Und woher bekomme ich dieses Outfit? werden im Handumdrehen durch die StyleCheck-Community beantwortet. Hinter der Fashi on-Anwendung steckt die StyleCheck GmbH, die FLYACTS mit der professionellen Umsetzung beauftragte.

STYLECHECK-APP

E-COMMERCE TRIFFT AUF FASHION-COMMUNITY

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 ZUKNFTIGE ZUSAMMENARBEIT.

Tim Kahlhofen, StyleCheck GmbH

CASE STUDY

2




DIE APP-IDEE: ZEIG, WAS DIR GEFLLT.

Fashion-Community, persnlicher Modeblog und E-Com-merce-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 konzent-riert. Die App prsentiert Mode im Alltag - da, wo sie hingehrt: auf die Straen, in die Clubs, Festsle oder Bros dieser Welt, getragen von Normalos wie du und ich. Die ansonsten sehr heterogene Zielgruppe der Anwendung hat jedoch eine Ge-meinsamkeit: 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 ka-men auerdem die Frameworks AngularJS, Ionic, PhoneGap, Bootstrap, Node.js und MongoDB zum Einsatz. Auf diese Weise erreichten wir kosten- und zeitsparend die Funktionsfhigkeit auf allen Betriebssystemen. Darber 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 HTML5CSS3JavaScript

Schnittstellenanbindung zum Affiliate-Netzwerk tracdelight

Dauer 6 Monate

BetriebssystemeiOS, Android, Webbrowser

Endgerte Smartphone, Tablet, Desktop

Leistung Beratung, Konzeption, Corporate Design, Screedesign, Projektmanagent, Entwicklung, Backend & Schnittstellenanbindung

FrameworksAngularJSIonicPhoneGap BootstrapNode.jsMongoDB

CASE STUDY

3




DIE KERNFUNKTIONEN: OUTFITS PRSENTIEREN, ENTDE-CKEN, BEWERTEN, NACHKAUFENNACHKAUFEN 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 prsen-tiert: Mode hochladen und Mode entdecken.Fr die Bewertung der Outfits arbeiteten wir eine besondere Swipe-Geste ein. Von top bis bis flop knnen 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 auswhlen. Im Anschluss be-stimmt 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

DE AUFLISTUNG PASSENDER

KLEIDUNGSSTCKE

DIE TAGS ZUM DIREKTEN NACHKAUFEN

SHOP IT: DAS BUSINESS-MODEL

Um die dritte Kernfunktionalitt - das Nachkaufen einzelner Outfits - zu gewhrleisten, fgt der Anwender seinen Kleidungsstcken Tags hinzu. Neben Farbe und Art der Kleidung speichert das System zustzlich die Mar-ke. Mithilfe dieser Informationen zeigt die Shop-it-Funktion die passenden Kleidungsstcke aus verschiedenen Online-Shops zum direkten Nachkauf an - E-Commerce modern und situationsgetrieben. Als Schnittstelle zwi-schen den Online-Shops und StyleCheck agiert ein Affiliate-Netzwerk. Diese Netzwerke bilden eine attraktive Refinanzierungsmglichkeit, da fr jeden ber die App kommenden Interessenten bestimmte Vermittlungskonditio-nen verhandelt werden.

SHOP-IT: DIE EINBINDUNG DES AFFILIATE-NETZWERKS

Der Markt der Affiliate-Netzwerke ist auch in Deutschland gro. Zunchst setzen wir auf eines der grten Netzwerke affilinet. Nach einigen Probe-durchlufen wechselten wir jedoch zu tracdelight. Dieses Netzwerk hat sich direkt auf Fashion und Beauty spezialisiert. Darber hinaus konnten wir ber die ffentliche API die technischen Voraussetzungen besser testen und evaluieren.

CASE STUDY

4




DAS SUCHTPOTENZIAL: WEITERE FEATURES

Viele Modeblogger posten mindestens einmal tglich das Outfit of the day (#ootd). Um das Foto nicht fr jede Plattform separat zu posten, integrierten wir die Social-Share-Funktion fr Instagram, Facebook und Twitter.Darber hinaus animiert ein ausgefeiltes Bonussystem zur erhhten Interaktion: Mit jedem neuen Style sowie fr abgegebene Bewertungen sammeln die Nutzer Punkte, durch die sie wiederum Level fr Level aufsteigen knnen. 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 knnen die Inhalte hier redaktio-nell bestimmt werden.In einem weiteren Newsfeed verfolgen die Anwender direkt die Styles der eigenen Freunde.Eine zustzliche Besonderheit ist die Testfunktion. Ohne sich registrieren zu mssen, knnen potenzielle App-User die besondere Swipe-Bewertung ausprobieren und sich berzeugen.

DERFASHIONFEED

DAS MULTI-CHANNEL-SYSTEM: NUTZERGEWOHNHEITEN VERSTEHEN

StyleCheck ist eine sogenannte Multi-Channel App: Die im Mittelpunkt stehende Hybrid-App wird zustzliche um eine Single-Page-Application fr den Desktop erweitert. Diese zwei Anwendungen ergnzen 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

Swipe bewerten im Vordergrund stehen.Die greren und bersichtlicheren Screens der Desk-top-Anwendung untersttzen den Nachkauf der Outfits. Die Shop-it-Funktion spielt in der Web-App somit die Hauptrolle. Studien belegen zudem, dass ein Groteil der Online-Kufe ber Desktop-Gerte gettigt wird. Auerdem ist der Testzu-gang ausgeweitet, sodass auch nicht registrierte Nutzer die Outfits des Fashionfeeds anschauen und nachkaufen knnen.

CASE STUDY

5




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, redaktio-

nell bestimmt

News Feed mit den aktuellsten Styles der Favoriten

Nachkauf aller Outfits ber die Shop-It-Funktion

Bonussystem

Nicht nur aufgrund der Vernderungen der Betriebssysteme sollte eine App nach dem Release gepflegt und aktualisiert werden. Auch die Kommentare der User in den App-Stores bringen stndig neuen Input, auf den App-Entwickler eingehen sollten. Treue als auch neue Nutzer werden es Ihnen mit Con-version und Aktivitt danken.Auch bei StyleCheck warten nach dem Launch noch einige Features auf die Implementierung: Zum Beispiel die Kommentarverlinkungsfunktion: Sie unter-streicht den Community- und Kommunikationscharakter von StyleCheck. Ein weiterer Mehrwert-Lieferant ist die Erweiterung der Shop-it-Funktion um zustzliche Artikel in Form von Nutzer kaufen auch ..."

DIE ERWEITERUNGEN: NACH DEM RELEASE IST VOR DEM RELEASE

Die Web-App macht StyleCheck insgesamt zu einem gerte-bergreifenden Erlebnis.Darber hinaus administriert das StyleCheck-Team die Fashi-on-Plattform ber ein Backoffice (Web-App). Hier verwaltet er die Nutzer und ihre Styles: Wird ein Bild gemeldet, lscht er es direkt ber das Backoffice. Auch werden hier die Eintrge fr den Fashionfeed geplant und generiert. Durch eine Filter-funktion knnen die Eintrge nach Durchschnittsbewertungen, Erstelldatum oder Tags separiert und fr den Feed ausgewhlt werden. Zustzlich werden die Bonuspunkte fr die verschie-denen Levels im Backoffice konfiguriert und die Contentseiten mit Inhalten gefllt.

BACKOFFICEVerwaltung Nutzer / StylesFashionfeedBonussystem

WEB-APPFashionfeedShop-it

APPbewerten

entdeckenteilen

Alle drei Anwendungen sind an ein einheitliches Backend ge-knpft und bilden somit ein Multi-Channel-System.

CASE STUDY

6




DAS DESIGN: DAS STYLECHECK-UNIVERSUM NIMMT FORM AN

Neben der technischen Umsetzung und der konzeptionellen Beratung erstellten wir zustzlich das Design rund um StyleCheck. Das beinhaltete abgesehen vom Screen-design der Anwendungen auch das gesamte Corporate Design der StyleCheck GmbH von Logo und Farbschema bis zu den Geschftspapieren, Visitenkarten und Briefumschlgen. Die Bildmarke des Logos, die gleichzeitig auch das App Icon bestimmt, ist ein Klei-derbgel. Stylisch und direkt transportiert sie sofort das Thema der App: Fashion. Zur Bild- gesellt sich die Wortmarke, die das Logo komplett macht. Ein einprgsamer Schriftzug vervollstndigt den wichtigsten Part des Auenauftritts. Die Komposition lsst sich so mit oder ohne Bildmarke in verschiedenen Farben an den unterschied-lichsten Stellen einbinden.

DIEGESCHFTS-

AUSSTATTUNG

LOGOWORT- UND BILDMARKE

CASE STUDY

7




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-Charak-ter. Um jedoch nicht zu weiblich zu wirken, wurde schwarz als zweite Farbe gewhlt.

# e1122e # 000000 # ffffff

# 9d9d9d # e8e8e8

Rot Schwarz Wei

Grau Hellgrau

FARBWERTEHAUPTFARBEN

NEBENFARBEN

TYPO

Frutiger Lt Std Condensed

Regular Condensed

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Bold Condensed


Light Condensed


Die grte 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. Darber hinaus verzichte-ten wir auer beim Men auf Icons und Buttons, da neben den Bildern die Typografie eine wichtige Rolle spielt.

Da die Icons im Menbereich die einzigen sind, wurden sie sehr sorgsam gewhlt und designt. Tippt der Nutzer auf den Men-Button, fahren sich ebenso in Form von Buttons sechs Unterpunkte nach unten aus. Jeder Menpunkt ist mit einem anderen Icon versehen (Profil, Community, Fashi-onfeed, Favoriten usw.), das dem Nutzer entsprechend deutlich macht, an welcher Stelle er sich gerade befindet. Auf diese Weise sparten wir uns den Subheader.

Eine kleine Sonderrolle spielt auch hier der Kleiderbgel des Style-Check-Logos und erzeugt damit einen absoluten Wie der er ken nungs wert: Befindet sich der Nutzer in der Detailansicht eines Styles, sieht er unterhalb des Bildes den Kleiderbgel. Durch einen Tap auf das Icon wird die wichtige Shop-it-Funktion aktiviert und die Tags der Kleidungsstcke werden sicht-bar. Darber hinaus kann der Nutzer erkennen, wie gut der Style von den anderen Nutzern bereits bewertet wurde.

MEN /SCHNELLZUGRIFFS-

LEISTE

Case Study: StyleCheck - die Fashion-App

Documents

Transcript of Case Study: StyleCheck - die Fashion-App