Portfolio
Hier findet sich eine Auswahl laufender sowie bereits umgesetzter Projekte, die ich in meiner Position als Lean UX Expert in der Produktentwicklung bei der LoadFox GmbH begleitet habe.
Urheberrecht: die nachfolgenden Inhalte sind urheberrechtlich geschützt. Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung bedürfen meiner schriftlichen Zustimmung. Gibt sonst Ärger mit LoadFox ;)
Meine Rollen bei LoadFox
User Experience Design
Zu meinen Hauptaufgaben bei LoadFox zählen die Erstellung von UX-Strategien und UI-Designs. Neben der Konzeption von Nutzerführung, Interaktionsdesign und Informationsarchitektur bin ich maßgeblich für die Einhaltung von Usability-Richtlinien zuständig und visualisiere Ideen mit Hilfe von Wireframes, Prototypen und Flowcharts.
Meine Arbeitsweise zeichnet sich durch besondere Nähe zum User aus – eine nutzerzentrierte Herangehensweise bindet den Nutzer in allen Phasen der Produktentwicklung proaktiv ein. Einfühlungsvermögen und eine rasche Auffassungsfähigkeit erlauben mir, mich schnell in die User hineinzuversetzen und deren Bedürfnisse und Anforderungen zuverlässig zu verstehen.
Um in einem frühen Entwicklungsstadium eines Features bereits wichtiges Feedback zu einer Idee zu sammeln, baue ich funktionale Prototypen und teste diese mit Nutzern:
Die Entwicklerkonsole ist mein zweites Zuhause. HTML und CSS sind für mich nämlich keine Fremdsprachen, sondern nützliche Werkzeuge.
Konzept zur Einführung von Kartenmaterial. Der Prototyp enstand auf Grundlage der Google Maps API. Videoaufnahme siehe hier.
User Interface Design
2018 habe ich ein einheitliches Design System bei LoadFox eingeführt. Nach einer Idee von Brad Frosts Atomic Design wurden so alle Bestandteile des Interfaces zu einem Frontend-Styleguide zusammengefasst. Das erlaubt sowohl Designern als auch Entwicklern von da an schneller und effizienter zu arbeiten.
Grafikdesign
Neben meiner Mitwirkung im Product Development habe ich das Marketing- und Salesteam bei der Erstellung von Social Media- und Online-Kampagnen unterstützt. Dazu zählten neben der Weiterentwicklung des Corporate Design unter anderem auch Illustrationen, Printmaterialien und Fotoaufnahmen.
Infografik auf der Rückseite eines Flyers für eine bevorstehende Messe, die in enger Zusammenarbeit mit Marketing entstand.
Ich bin zwar kein Illustrator, aber mit einem guten Fundament an Stockmaterial ließ sich eine einheitliche Bildsprache entwickeln.
Um das Zusammengehörigkeitsgefühl aller Füchse zu stärken, habe ich ein Fotoshooting organisiert und alle Portraits im Nachgang retuschiert.
Bis hier hin nicht eingeschlafen?
Falls Sie noch wach sind, gebe ich Ihnen jetzt einen detaillierten Einblick in den Relaunch der Website von LoadFox.
Case: Website-Relaunch
Status: in progress (protyping stage)
Um einen besseren Einblick in meine Arbeitsweise zu erhalten, skizziere ich nachfolgend den Ablauf eines aktuellen Projekts bei LoadFox:
Ziel ist es, die User Experience der Website-Besucher durch zielgruppengerechte Ansprache zu verbessern und durch Ausbau bestehender und Neuentwicklung von zusätzlichen Funktionen größeren Mehrwert für Besucher zu schaffen. Zusätzlich sollen Marketing- und Vertriebskanäle gestärkt und interne Abläufe verbessert werden.
Ausgangssituation
Eingangs gesammeltes Feedback bestehender Kunden und von anonymen Website-Besuchern ergab drei wesentliche Problemstellungen an der bestehenden Website von LoadFox:
- Es ist nicht klar, an wen sich das Produkt konkret richtet und an wen nicht
- Aus der Website geht nicht deutlich genug hervor, wie viel das Produkt kostet
- Es gibt keine Möglichkeit der Kontaktaufnahme und die Registrierung für eine Demo fehlt
Ferner ergab Rücksprache mit den übrigen Abteilungen folgende Schwachpunkte ergab:
- Marketing: strukturelle Änderungen lassen sich ohne programmiertechnischen Entwicklungsaufwand häufig nicht umsetzen; zudem fehlt ein Blogsystem und eine Newsletter-Funktion
- Sales: durch das OnePage-Konzept sind nur wenige Einblicke in das Besucherverhalten möglich; Besucher können nicht direkt angesprochen werden
- Human Ressources: es fehlt eine aussagekräftige Seite mit Informationen zu den Unternehmenswerten, dem Team und der Vision von LoadFox
Vorgehensweise
In enger Zusammenarbeit mit Marketing wurde im Rahmen eines Workshops abteilungsübergreifend erarbeitet, welche Anforderungen an die zukünftige Website gestellt werden. Die Kollegen baten wir hierzu Ihre Bedürfnisse, Ideen und Verbesserungsvorschläge proaktiv einzubringen.
Unter Einbezug aller Kollegen wurde abteilungsübergreifend Input gesammelt und damit gleichzeitig die Projekttransparenz erhöht.
Die Informationen wurden im Anschluss geclustert, in einer Mindmap visualisiert und schließlich gemeinsam priorisiert.
Nach der Anforderungsanalyse entschieden wir uns zugunsten eines zügigeren Projektablaufs für eine Wordpress-Neuinstallation und griffen auf ein fertiges Drittanbieter-Theme zurück. Vorhandenes Bild- und Textmaterial wurde von der bestehenden Website ins neue Konzept übersetzt und fortan direkt im Prototypen gepflegt.
Die Schulung der übrigen Projektbeteiligten erlaubte die eigenständige Anpassung von Seitenstrukturen und Pflege von Inhalten unmittelbar im Prototypen. Programmiererfahrung war wegen des besonders benutzerfreundlichen Page Builders nicht erforderlich.
Der im Wordpress-Theme mitgelieferte Page Builder erlaubt es selbst Laien, ganze Unterseiten ohne eine Zeile Code zu erstellen.
Easter Egg: um den Besuchern das Prinzip des cleveren LoadFox-Algorithmus spielerisch zu vermitteln, enstand ein Tetris-Klon.
Learnings
Positiv hervorzuheben ist der zügige Projektstart – zwischen Workshop und erstem Prototypen sind nur wenige Tage vergangen, wodurch sich alle Projektbeteiligten schon sehr früh ein gutes Bild vom Look & Feel der neuen Website machen konnten. Das half auch dabei, intern möglichst früh Verbesserungsvorschläge einzuholen. Think, make, check, think, make, check, think, make...
Als besonders hilfreich erwiesen sich außerdem die Insights der anderen Abteilungen, weil diese einen wichtigen Perspektivwechsel ermöglichten. So konnten Anforderungen gesammelt werden, an die man selbst nicht gedacht hätte.
Ausblick
Sobald alle Unterseiten vom Management abgesgnet worden sind, erfolgt eine Verdichtung der wichtigsten Informationen auf der Startseite. Diese wurde bewusst zum Schluss aufgespart, da sie eine Teilmenge der gesamten Website ist.
Vernachlässigt man zunächst Themen wie Suchmaschinenoptimierung und Cross-Browser-Optimierung ist der Prototyp inzwischen so weit ausgereift, dass man ihn – zwar nicht in vollem geplanten Funktionsumfang – veröffentlichen könnte. Der frühzeitige Launch soll Möglichkeit dazu geben, weiteres Feedback von außen einzuholen. Hierfür sind Telefoninterviews mit bestehenden und Neu-Kunden geplant. Außerdem sollen Besucher über Intercom angeschrieben und um ihre Meinung gebeten werden. Der gesammelte Input soll daraufhin in die Weiterentwicklung des Prototypen fließen, sodass dieser iterativ ausgebaut und verbessert wird.
Rapid protyping ❤
Dieser One-Pager entstand in zwei Nachtschichten mit einer gehörigen Portion Spotify. Hierfür kam das HTML5 boilerplate Skeleton in Version 2.0.4 zum Einsatz. Ferner wurde die Seite um jQuery und Slick sowie die Slick Lightbox erweitert und ist ganz nebenbei bemerkt responsiv. Mangels Schlaf sind Darstellungsfehler jedoch nicht auszuschließen und wer den IE nutzt, ist selbst schuld ;)
Der unschlagbar schnellste Weg Ideen zu UI/UX greifbar zu machen sind schlichtweg Stift und Papier. Skizzen eignen sich hervorragend als Diskussionsgrundlage im Team.
Komplexe Nutzerführung lässt sich mit Wireframes und BPMN Flowcharts am besten beschreiben. Hierfür verwende ich Wireframing-Tools wie Lucidchart oder InVision.
Die Erfassung und Auswertung von quantitativen sowie qualitativen UX-Metriken ist ein wichtiges Instrument, um Nutzer und ihr Verhalten besser zu verstehen.
Tools wie Kibana, Metabase oder Inspectlet ermöglichen es zahlengetrieben zu arbeiten und geben Aufschluss über die Usability des User Interfaces.
Eine gut durchdachte User Story senkt den Abstimmungs- und Kommunikationsaufwand mit Entwicklern und erlaubt ein lückenloses Interaktionsdesign.
Telefoninterviews und Feldstudien im Arbeitsumfeld der User erlauben tiefe Einblicke in Arbeitsabläufe und Gewohnheiten. Sie sind essentiell für herausragende Ergebnisse.
