UI/UX-Design
Eine Website für Fashion-Liebhaber
RUNWAY
Programme & Tools
Figma
Adobe Premiere Pro
Adobe After Effects
Design Art
UI Design
UX Design
Video Editing
Projekttyp
Studenten Einzelprojekt
Hochschule Macromedia
Zeitspanne
Oktober 2021 - Januar 2022
Challenge
IN DIE MODEWELT EINTAUCHEN
Die Modewelt ist eine riesen Industrie, die am Anfang unüberschaubar und einschüchternd wirken kann
Mainstream-Medien stellen die Fashionwelt oft nur einseitig dar. Vielen sind die diversen Stile, Designer, Konzepte und Bewegungen, die die Fashion-Industrie zu bieten hat, gar nicht bewusst
Designer wechseln häufig Modehäuser, überall fallen Markennamen und im Internet findet man die skurrilsten Kleidungsstücke
Runway ist eine Plattform auf der Modeliebhaber mehr über die Fashionwelt lernen und sich von Fashion Shows, Designern, Marken und Kleidungsstücken inspirieren lassen können.
Lösung
TARGET GROUP ANALYSIS
Durch meine Recherchen fand ich heraus, dass die größte Gruppe von Leuten, die an High Fashion interessiert sind, Frauen im Alter von 16 bis 35 Jahren aus Industrieländern mit einem akademischen Bildungsniveau sind. Die meisten von ihnen sind entweder Studenten oder arbeiten in einem kreativen Bereich.
Aus psychologischer Sicht strahlt High Fashion Anerkennung, einen luxuriösen Lebensstil und Selbstdarstellung aus.
Die Hauptmotivation der Runway-User ist ein tieferes Verständnis von der Fashion-Industrie, Marken und Designern, um sich ein genaueres Bild dieser zu bilden und Inspirationen für den eigenen Alltag zu sammeln.
Menschen, die sich mit der Modebranche beschäftigen, leben in der Regel einen komfortablen und privilegierten Lebensstil. In anderen Fällen, wie bei Studenten zum Beispiel, wird ein größerer Wert auf innovative Ideen gelegt, die als Inspiration für den eigenen Kleidungsstil dienen können, ohne, dass unbedingt Designer-Brands gekauft werden.
WETTBEWERB- UND BENCHMARKANALYSE
Die meisten Websites, die sich auf Mode fokussieren, sind Zeitschriften und Blogs. Ihre Themen beschränken sich meist nicht nur auf Mode, sie sprechen auch über Beauty, Lifestyle, Prominente und alles um das Thema Popkultur.
Dazu gehörten “Vogue” – das beliebteste Magazin der Welt, und “InStyle”.
Die Website “Fashion Now” fokussiert sich ausschließlich auf Mode und hat damit das ähnlichste Konzept zu Runway.
In einer Wettbewerb Analyse wurden die Websites verglichen und auf Ihre Stärken und Schwächen untersucht. Daraufhin wurde bei einer Benchmarkanalyse herausgearbeitet, welche Features Runway vertreten soll und wie sich die Website auf dem Markt positionieren soll.
USER RESEARCH
Menschen, die eine Mode-Webseite besuchen, sind in der Regel aus eigenem Interesse tief in der Materie drin und interessieren sich nicht ausschließlich für Statussymbole. Sie bewundern die Handwerkskunst und die einzigartigen Kreationen der Künstler.
Viele Leute nutzten Modenschauen, um ihren eigenen Stil zu finden und sind so auf Lieblingsbrands- und Designer gestoßen.
Runway sollte ein Ort sein, zu dem Menschen kommen, die Mode als Kunst sehen.
USER INTERVIEWS
Um ein genaueres Bild von potentiellen Usern für realistische Personas, zu bekommen, habe ich Interviews mit Fashion-Begeisterten durchgeführt.
Ziel der Interviews war es nachzuvollziehen, welche Aspekte der Fashion-Industrie für die Zielgruppe besonders interessant sind und welche weniger.
Durch die Interviews wurde deutlich, dass durchaus Interesse daran besteht mehr über Mode zu lernen, viele aber nicht wissen, wo genau sie anfangen sollen. Basierend auf den Interviews konnten Personas erstellt werden.
PERSONAS
Basierend auf der Zielgruppenanalyse, meinen eigenen Beobachtungen und den Nutzerinterviews habe ich 3 verschiedene Personas, die unterschiedliche Zielgruppen repräsentieren, erstellt.
USER JOURNEY
Die User Journey beschreibt die User Experience in verschiedenen Phasen bei Interaktion mit der Webseite.
ARCHITEKTUR
Die Architektur der Website beschreibt, wie der User die Website navigiert.
Mir war besonders wichtig, dass der Nutzer einen schnellen Überblick darüber bekommt, was er auf Runway alles lernen und erkunden kann.
WIREFRAMES
Mit der Informationsarchitektur als Grundlage habe ich Low-Fidelity- und High-Fidelity-Wireframes erstellt.
Die Low-Fidelity-Wireframes wurden grob von Hand gezeichnet, um ein Gefühl für die Struktur, Größen und Proportionen zu bekommen.
Die High-Fidelity-Wireframes wurden daraufhin in Figma erstellt.
MOODBOARD
BRANDING
Wie schon beim Moodboard, habe ich mich dafür entschieden, nur mit Rot, Weiß und Schwarz zu arbeiten.
Das Logo kombiniert eine Serifenschrift, welche gerne mit High Fashion Modelabels assoziiert wird, mit einer modernen Sans-Serif für ein zeitloses Gefühl.
Während die Headline- und Body-Fonts minimalistisch und vor allem gut lesbar und deutlich sind, dient die Playfair als Akzentschrift um erneut Kontrast und den Bezug zu klassischen Modelabels herzustellen.
RUNWAY
Reflexion
Runway war mein “Passion-Project” und hat mir deutlich gemacht, dass ich große Freude an UI/UX-Design habe und auch in Zukunft weiter in die Richtung gehen will.
WAS ICH GELERNT HABE
Figma
Ich habe bereits Erfahrung mit Adobe XD gehabt, wollte aber für dieses Projekt Figma nutzen, da ich wusste, dass es in Agenturen häufiger genutzt wird.
Recherche ist das A und O von UX
Bei einem Passion-Project besteht immer die Gefahr, zu stark von sich selbst als Nutzer auszugehen. Die Interviews haben mir dabei geholfen ein realistisches, objektives Bild von potentiellen Usern zu formen.
Ohne einen Userflow verliert man den roten Faden
Da ich keinen Userflow erstellt habe, habe ich den Prototypen so weit ausgebaut, dass er fast völlig funktionsfähig war. Mit einem Userflow hätte ich alle wichtigen Funktionen und Interaktionen darstellen können, ohne so viel Zeit zu opfern.
WAS ICH ANDERS GEMACHT HÄTTE
Ich habe den Prototypen so weit ausgebaut, dass er fast komplett interaktiv war. Das hat sehr viel Zeit und Mühe gekostet, obwohl ein simpler Prototyp, der einem Userflow folgt, völlig gereicht hätte.