Positive UX object of the week
Interface
[00] Ideensammlung zu nachhaltigen Unternehmen
Für das Semesterprojekt habe ich gemeinsam mit Max einige Unternehmen gesammelt, die im weitesten Sinne nachhaltig sind. Dabei haben wir zunächst den Begriff „Nachhaltigkeit“ genauer betrachtet und schnell wurde klar, dass ein Unternehmen nicht bloß ökologisch nachhaltig sein kann. Wir haben also nicht nur nach ressourcensschonenden und umweltfreundlichen Unternehmen gesucht, sondern auch nach solchen, die ökonomisch, gesellschaftlich oder sozial nachhaltig sind.
Zunächst ist uns „Tesla“ als nachhaltiges Unternehmen eingefallen. Durch ihre fortschreitende Technik bietet das Unternehmen der Gesellschaft einen ökologischen Mehrwert: nämlich die Reduzierung des CO2-Fußabdruckes.
Aber auch Streamingdienste wie „Spotify“ oder „Netflix“ können als nachhaltig betrachtet werden, da sie das phyische Vorhandensein einer CD/DVD ausschließen. Solche Dienste können den Alltag der Menschen erleichtern, indem sie eine große Auswahl an Musik und Filmen anbieten.
Außerdem beinhalten Lernplattformen wie „Skillshare“ eine nachhaltige Komponente. Von Kreativen für Kretive werden hier in strukturierter Weise Inhalte zu Themen wie User Experience oder Grafikdesign erläutert.
Nachhaltigkeit ist auch in der Finanzwelt zu finden. „Trade Republic“ macht die Relevanz von Anlage und Finanzprodukten deutlich. Mit einem modernen Marketing nimmt dieser Neobroker vor allem jungen Menschen die Angst vor dem Investieren.
Änlich wie „Skillshare“ ist auch „finally freelancing“ eine Plattform, die angehenden Freelancern bei der Umsetzung ihres Vorhabens hilft. Das deutschsprachige Team ist sympathisch, begeistert und erreichbar, sodass das Unternehmen direkt vertraut wirkt.
Der US-Konzern „Stark Future“ stellt elektrische Motorräder her, der sich von ihrer Leistung in der MX-Klasse hervorheben. Zugleich sind die Fahrzeuge geräuschelos, wartungsarm und emissionsfrei, was sie zu einer nachhaltigen Alternativen zu herkömmlichen Endurofahrzeugen macht.
Für die nächste Aufgabe – der Auswahl von drei Unternehmen – haben wir uns auf „Stark“ „finally freelancing“ und „Trade Republic“ bezogen.
[01] Auswahl nachhaltiger Unternehmen
Nun haben wir die drei eben erwähnten Unternehmen genauer unter die Lupe genommen.
„Finally freelancing“
Das Team von „FF“ bietet ein 1:1 Mentoring, Trainingskurse, Skripte, Vorlagen und Updates zu marktrelevanten Themen.
Sie sind sehr zugänglich und auf verschiedenen Plattformen vertreten. Etwa über ihre Website, YouTube, Podcast, TikTok oder LinkedIn. Dies nutzen sie, um kostenlos Informationen bereitzustellen und das Vertrauen der „Kunden“ zugewinnen. Auch bieten sie ein 15-minütige Erstgespräch an, wo man das Team kennenlernt.
Dennoch sind uns einige UX Chancen und Probleme aufgefallen.
Zunächst einmal verlangen sie einen ziemlich hohen Preis für den Onlinekurs, der nicht genau festgelegt wird und anhand des Erstgesprächs ermittelt wird – hier fehlt also die Transparenz.
Wie bei einer Black Box weiß der Nutzer daher kaum, welche Inhalte ihn während sowie nach der Kauf des Kurses erwarten. Es wäre hierbei hilfreich, wenn Kontaktaufnahme zu erfolgreichen Teilnehmern ermöglicht wird, um die Validität dieses Unternehmens zu garantieren.
„Trade Republic“
Sie gelten als erster Neobroker und Direktbank, bieten Aktien, ETFs, physische Anlage und Crypto an. Dabei fallen sie vor allem durch ihre niedrigen Gebühren auf, mit der Intention Vermögensaufbau zu demokratisieren.
Durch die Verwendung einer App sind ermöglicht einfache Kontrolle des Portfolios, sodass Investieren von jedem Ort aus möglich ist. Auch nutzen sie Instagram & TikTok, um Informationen allen zugänglich zu machen.
Dennoch gibt es klare UX-Chancen und Probleme. So ist die App nur verständlich, sofern ein gewisses Grundwissen über Wertanlage besteht. Anfänger fühlen sich oft überfordert durch die eher knappe Einführung in der App. Zudem ist eine Communityfunktion in der App noch nicht vorhanden, würde aber das Vertrauen und die Authentizität stärken.
„Stark Future“
Dieses amerikanische Unternehmen hat in den letzten Jahren für große Aufmerksamkeit in der Elektromotorrad-Szene gesorgt. Mit drei Varianten bieten sie ein Motorrad an, das sowohl auf der Crosstrecke (MX), im Wald (EX) oder auf der Straße (SM) gefahren werden kann. Alle Varianten haben eines gemeinsam, nämlich eine beeindruckende Performance. Das 120kg schwere Motorrad wird von einem Motor angetrieben, der bis zu 80PS Leistung auf den Hinterreifen bringt.
Auch in ihrem Marketing fällt Stark auf. Eine moderne Website, Storytelling mit Gründer als zentrale Person oder eine Kampagne mit anderen Content Creators.
Trotzdessen gibt es auch bei Stark einige UX Chancen. So bedarf es dem potentiellen Kunden bereits vor dem Kauf eines „Starkaccounts“, um an spezifische Informationen zu kommen. Aufbau und Zusammensetzung der Komponenten sind zudem unklar beschrieben. Auch das Arkenstone – ein zugehöriges Smartphone, welches als Tacho und Konfigurator dient – weißt einige Schwachstellen auf. So sind einige Funktionen an die Proversion des Arkenstones gebunden, was bei vielen zu Kopfschütteln geführt hat, zumal das Motorrad alleine um die 13.000€ kostet.
Feedback
Nach dem Feedback ist uns klar geworden, dass wir uns mit den Themen Finanzen und Elektromobilität genauer beschäftigen werden.
Im folgenden habe ich mich von „Stark Future“ losgelöst und habe mich generell „Elektromobilität auf zwei Rädern“ beschäftigt.
[02] Konzepte zum Thema „Elektromobilität auf zwei Rädern“
Wie bereits beim obigen Beitrag erwähnt, habe ich mich etwas von Stark distanziert. Nun habe ich mich an einem Händler orientiert, der Elektromotorräder aus verschiedenen Preisklassen anbietet.
Konzept 1 – App „Ridairy“
Es gibt bereits Apps für sogenannte „E-Motos“, doch diese bestehen zu großen Teilen nur aus Zahlen und Daten, aus denen der Nutzer wenig interpretieren kann. Die App „Ridairy“ soll Elektromobilität zu einem sozialen und emotionalen Erlebnis machen, bei dem der Grad der Nachhaltigkeit visualisiert werden kann. Wie soll das gehen?
Die App zeichnet Fahrten auf und erstellt daraus eine Story. Diese Ergebnisse können mit anderen geteilt werden.
Nach Ende der Fahrt wird der Nutzer von einem Infofeld begrüßt, auf dem interessante Fakten stehen:
->„Mit einer 4-Takter hättest du jetzt 0,5kg CO2 ausgestoßen. Mit deiner Surron bist du vollends emmisonsfrei.“->„Rehe bereiten sich gerade auf den Winter vor. Danke, dass du keinen Lärm verusachst.“
Außerdem kann der Nutzer Highlights und schöne Momente nach der Fahrt auf der Map markieren. Danach kann er die Route posten und andere Nutzer können diese sehen und darauf reagieren.
Konzept 2 „WhatTheBike“
Gerade in Deutschland ist das Thema rund um „Elektro auf zwei Rädern“ noch ziemlich neu. Um an Informationen zu kommen muss man sich durch englischsprachige YouTube-Videos quälen, unübersichtliche Redditposts durchforschen oder auf GuteFrage.de nach Antwoten suchen.
Diese Website/Web-App fungiert als interaktive Communityplattform, die Nutzern beim Schrauben und Pflegen ihrer E-Motos hilft – mit der Absicht, die Langlebigkeit der Bikes zu fördern und den Ressourcenverbrauch zu mindern.
Zunächst erstellt der Nutzer einen Account, wählt Bike und Baujahr, sodass er anschließend einen spezifischen Tag erhält.
Die Plattform, die visuell an eine „node-based“ Netzwerk erinnert, dient als Datenbank zu Lösung von auftretenden Problemen. Dabei werden die Nutzer selbst aktiv, sie schreiben Beiträge und laden Erklärvideos hoch, die dann korrekt im Datennetzwerk geordnent werden. Man sieht also, dass auch der Communityaspekt eine große Rolle spielt, die Plattform lebt von einem regen Austausch zwischen „Elektrobegeisterten“.
Konzept 3 – App „ELMOX Pulse“
Diese Idee verbindet Technik mit Emotionen, indem mittels einer App Healthdaten des Nutzers während der Fahrt aufgezeichnet werden. Auf dieser Grundlage wird der Nutzer einer Fahrerklasse zugeordnet und sein individueller Fahrstil wird bewertet.
Nach der Erstellung eines Accounts landet der Nutzer auf einem Dashboard. Hier wird ein Großteil der Daten visualisiert und basierend auf seinen Aktivitäten erhält er Auszeichnungen oder Medaillen.
Auch gibt es Challenges, die den Nutzer zum Beispiel zu einem ruhigeren Fahrstil motivieren sollen.
Mithilfe dieser App kann der Nutzer seinen Fahrstil reflektieren und wird zu bewussterem Fahren ermutigt. Damit versteht er den Zusammenhang zwischen Daten und seinem Fahrstil und kann wie bei Konzept 1 den Grad seiner Nachhaltigkeit visualisieren.
Konzept 4 – ELMOX „Website 3D Tool“
Da sich Konzept 1 und 3 stark ähnelten, habe ich noch ein viertes Konzept entwickelt.
Beim Onlinshopping kann man sich oft die Größe des Objektes in der Realität nur bedingt vorstellen. Damit der Nutzer schon vor dem Kauf weiß, was ihn erwartet, kann eine 3D-Simulation sinnvoll sein.
Dieses Konzept ergänzt den Onlineshop von Händlern wie „ELMOX“ um ein 3D-Tool. Der Kunde kann verschiedene Konfigurationen ausprobieren, und erhält zusätzliche Informationen, die er bei statischen Bildern nicht erhalten hätte.
Insgesamt wird hiermit das Erlebnis beim Scrollen durch den Onlineshop verbessert. Mithilfe einer AR-Funktion kann der Nutzer sein zukünftiges Traumbike in seine Garage projizieren, um zu schauen ob zwischen Rasenmähre, Anhänger und Schubkarren noch Platz für ein weiteres Fahrzeug ist.
Feedback
Ich habe mich nun für Konzept 2 entschieden. Es bietet für Nutzer den größten Mehrwert und ich lerne dabei hilfreiche Skills, die mir als Designer weiterhelfen.
Eine Kombination aus Konzept 1 und 3 wäre auch möglich gewesen, allerdings gibt es schon Unmengen an Tracking-Apps. Auch wäre die Implementierung einer Karte eine sehr großes Problem geworden.
[03] Deep Research
Idee festigen
Durch das Feedback ist mir klar geworden, dass eine Plattform, die als interaktives Datennetzwerk dient, sowohl mir als Designer als auch der „Elektrocommunity“ einen großen Mehrwert bietet. Eine Plattform, die sowohl auf Desktop als auch auf dem Smartphone abrufbar ist, soll mich nun die nächsten Wochen begleiten.
Research
Während der Entwicklung dieses Konzeptes habe ich mich schon damit auseinandergesetzt, über welche Tools Nutzer Informationen zu dem Thema „E-Moto“ aufgreifen. Nun habe ich mir Reddit nochmal genauer angeschaut, um zu verstehen, was gut funktioniert (Bild 1) und wo Probleme (Bild 2) bestehen.
(+) Das ständige Vorhandensein einer Searchbar ist ein großer Pluspunkt mit Blick auf die Bedienbarkeit. Egal auf welcher Subpage, der Nutzer kann immer ein Stichwort in die Suchleiste schreiben und erhält Ergebnisse.
(+) In Reddit gibt es verschiedene Communities. Der Screenshot unten zeigt die „r/surron“ Community. Es besteht also schon eine gewisse Struktur und Beiträge können in die jeweilige Community gepostet werden.
(+) Eine Kommentarfunktion ermöglicht den Austausch zwischen verschiedenen Nutzern.
(-) Das zweie Foto zeigt die gesamte Redditseite beim ersten Aufrufen der Website. Für viele Nutzer wirkt sie überladen, unübersichtlich und löst negaiGefühle wie Frustration aus.
(-) Reddit ist nicht optimal, um Lösungen für Probleme bezogen auf sein E-Moto zu finden. Es gibt viele Funktionen, z.B. „Games on reddit“, die den Nutzer ablenken und ihm die Suche nach einer Lösung erschweren.
(-) Reddit gibt dem Nutzer zu viel Freiheit, wie sie einen Beitrag posten können. Das mag für andere Bereiche funktionieren, bei „r/surron“ leider nicht.
Es gibt keine Struktur, die den Beitrag für andere vereinfacht, die den Post zum ersten Mal sehen. Nutzer haben die Möglichkeit Videos, Text oder Fotos zu posten, ohne an die Einhaltung einer Länge oder Verwendung von Schlagwörtern gebunden zu sein.
Experteninterview
Nun ging es darum, sich noch intensiver mit dem Thema „Elektromobilität auf zwei Rädern“ zu beschäftigen, um zu erfahren, welche Funktionen für eine Webapp wirklich sinnvoll sind.
Dafür habe ich ein semi-strukturiertes Interview mit einem Experten aus der Branche – nämlich dem Eigentümer von „Motokult“ – geführt, was mir einige aufschlussreiche Antworten bot.
Pain Points
„Als Verkäufer kostet es mich viel Zeit, ständig wiederkehrende Fragen zu beantworten.“
„Ich würde gerne die Beziehung zu meinen Kunden pflegen und ausbauen. Als Händler muss ich da jedoch auf den Datenschutz achten, falls ich die Kunden kontaktieren möchte.“
Kernaussagen
„Digital affin sind mittlerweile alle Altersgruppen. Mit unserem Marketing richten wir uns an jung und alt, da das Thema rund um Elektro auf verschiedene Arten begeistern kann.“
„Viele unserer Kunden suchen gar kein persönliches Gespräch vor dem Kauf. Sie informieren sich selbst und kaufen dann online über die Website ein.“
Golden Circle
Ich glaube daran, dass man Informationen rund um das Thema Service bei E-Motos leicht zugänglich und erlebbar machen kann. Zeitgleich verbessert man die Verbindung zwischen Verkäufer und Kunden [WHY].
Das funktioniert mithilfe einer Plattform, die die wichtigsten Informationen bereitstellt. Einerseits werden Nutzer belehrt, andererseits entsteht so ein Austausch zwischen Mitgliedern der Community, um das oben beschriebene Ziel zu erreichen [HOW].
Das Produkt ist eine App/Webapp, bei der Nutzer Beiträge zu spezifischen Problemen hochladen können, wenn sie dafür Lösungen gefunden haben. Eine zusätzliche Communitysektion ermöglicht das Verabreden zum gemeinsamen Fahren an ausgewählten Orten [WHAT].
[04] Personas
Für diese Aufgabe habe ich zwei Personas entwickelt, das „Schwartzmodell“ angewandt und sie einem Sinus-Mileu zugeordnet.
Zunächst gibt es Lukas Vogel, ein 20-jähriger Elektriker mit großem Interesse für das Schrauben von E-Motos. Durch sein Azubi-Gehalt ist er finanziell etwas beschränkt, weshalb er sich den Kauf von neuen Teilen gut überlegen muss. Die Zeit am Wochenende nutzt der begeisterte Handwerker für Ausfahrten mit seinen Freunden.
Die nächste Persona hat den Namen Thomas Schmidt. Der IT-ler und Familienvater ist erst vor kurzem in die Welt der E-Motos eingetaucht, kann sich jedoch schnell für technische Themen begeistern und will dann alles darüber wissen. Ihm sind gute Aufbereitung von Informationen wichtig, damit er sich zielgerichtet seinem Problem widmen kann.
Lukas Vogel
Thomas Schmidt
[05] User Journey
Nun habe ich eine konkrete User Journey entwickelt, die beschreibt wie Thomas Schmidt die Plattform nutzen würde. In diesem Anwendungsfall trifft die Persona auf ein Problem und nutzt die Plattform als Lösung. Nachdem der Nutzer die Informationen erfolgreich aufgenommen hat, besteht auch die Möglichkeit einen Kommentar zu verfassen. Dads steigert die insgesamte Authentizität des ursprünglichen Beitrags.
Die Entwicklung dieser Journey hat mein Verständnis erhöht und mir ist bewusst geworden, wie ich das Thema „Service“ mit „Community“ verbinden kann.
Ich habe eine weiter User Journey erstellt, die beschreibt wie die Persona „Lukas Vogel“ die mobile Variante nutzt, um eine gemeinsame Ausfahrt zu planen.
[06] User Storys
Die User Journeys haben bereits eine gute Basis geschaffen, wie mögliche Nutzer meine Anwendung bedienen. Um einen noch tieferen Einblick zu bekommen, habe ich die User Storys der beiden Personas analysiert.
Notiz: Aus Gesprächen mit Kommilitonen wurde mir klar, dass die einzelnen Steps noch zu ungenau beschrieben sind.
[07] Skizze und erste Designs
Die User Journey und Story haben mir gezeigt, welche Auswirkung das Interface auf die Emotionen und Gefühle der Nutzer hat. Mit der Intention, eine möglichst angenehme User Experience zu schaffen, habe ich ein erstes Design für die mobile Variante skizziert.
Die Skizzen habe ich noch etwas ergänzt und in Figma zu einem clickbarem Prototyp gewandelt. Da ich mich momentan mit den m3components beschäftige, habe ich versucht, das Wissen bezüglich navigation bars und icons hier anzuwenden.
[08] Hifi-Figma + Moodboards
Nun habe ich 3 Moodboards in unterschiedlichen Varianten angefertigt.
An diesen werde ich mich bei der Weiterarbeit orientieren, um ein Interface zu schaffen, das intuitiv in der Benutzung ist und ästhetisch zum Thema „Elektromobilität auf zwei Rädern“ passt.
[09] Zwischenpräsentation + Umsetzung der Moodboards
[10] Verbesserung des High Fidelity
In einem letzten Gespräch vor der Weihnachtspause ist mir aufgefallen, dass mein High Fidelity Wireframe noch nicht alle Funktionen beschreibt, die meine App haben wird.
Daher habe ich diesen weiter ausgearbeitet: Nach einem ersten Download landet der Nutzer auf dem Onboarding Screen, in dem er wichtige Daten über sich und sein Elektromotorrad angibt.
Danach landet er in einem Dashboard, wo ihm zusätzliche Aktionen zur Vervollständigung seines Accounts empfohlen werden, er aktuelle Events, Builds der Woche und Bekannte Nutzer sieht.
Des Weiteren habe ich für die beiden Hauptfunktionen meiner App passende Filtersysteme entwickelt. Beim Eventsfilter kann man Fahrstil wählen, Datum angeben und mehr, während man beim Buildfilter nach Kriterien wie der Dauer oder der Schwierigkeit des Umbaus filtern kann.
Auch habe ich eine Search-Universal entwickelt, die jederzeit zu erreichen ist. Die Suchleiste merkt sich, auf welchem Tab sich der Nutzer zuvor befand und zeigt dies über die jeweiligen Chips.
Auch gibt es nun einen Tab für das Profil, bei dem Angaben aus dem Onboardingscreen angezeigt werden und einen Tab für News, bei dem neue Follower angezeigt werden.
Onboarding - High Fidelity
Dashboard - High fidelity
Builds (Buildstab, Buildsfilter, Buildspost) – High fidelity
Events (Eventstab, Eventsfilter, Eventspost) – High fidelity
Search, profile und news - High fidelity
[11] Anwendung des Glasstils pt.1
Ich habe mich nun doch für den Glasstil entschieden. Damit für den Nutzer eine Vielfalt und Individualität dennoch bestehen bleibt, kann man das farbliche Theme der App ändern. Das geht beispielsweise direkt nach dem ersten Starten der App. Über Variablen wird hier die Farbe des Gradients sowie wichtiger Elemente geändert.
[12] Anwendung des Glasstils pt.2
Die letzten Wochen habe ich dafür genutzt, den Glasstil zu verwirklichen. Nach dem Onboarding Screen landet der Nutzer nun auf dem Dashboard. Dort sieht er einige „ToDos“, die ihm bei der Vervollständigung seines Accounts fehlen. Darunter sieht er „aktuelle Events“ und „Builds der Woche“. Durch Klicken auf eines dieser Buttons, gelangt er zu einem weiteren Tab.
Im Build-Tab werden dem Nutzer zunächst previews der Anleitungen angezeigt. Badges informieren über essentielle Informationen und erleichtern das Scanning. Suchergebnisse können über den Filter oben rechts angepasst werden. Dieselben Kriterien, die später auch bei der Erstellung eines Builds verwendet wurden, dienen hier dem Filtern der Beiträge. Hat der Nutzer schließlich einen interessanten Beitrag gefunden, kann er sich die „Schritt-Für-Schritt“-Anleitung auf der Detailseite anschauen.
Auch im Event-Tab werden Nutzer mit previews von aktuellen Events begrüßt. Ein kurzer Blick soll genügen, um bereits wichtige Informationen aufzunehmen. Schon hier gibt es die Möglichkeit, am Event teilzunehmen. Zusätzliche Informationen – etwa die Art des Events – kann der Nutzer auf der Detailseite erfahren. Erneut dient ein Filter dazu, die Ergebnisse zu sortieren.
Beim Add-Tab haben Nutzer die Möglichkeit, selbst einen Beitrag zu verfassen. Es besteht die Wahl zwischen Build und Event, wobei die Struktur stark an den Filtern orientiert ist, um eine möglichst intuitive und einfache Bedienung zu ermöglichen.
Im News-Tab sehen Nutzer aktuelle Mitteilungen. Sie können entscheiden, ob ihnen alle oder nur ausgewählte Mitteilungen angezeigt werden sollen. Zum Beispiel: Bei „Teilnehmer“ erhalten sie einen genauen Überblick, welche Person bei ihrem Event teilnimmt.
Der Profile-Tab greift die Daten auf, die beim Onboardingscreen erfasst wurden und präsentiert sie dem Nutzer. Möchte dieser eine Änderung vornehmen – einschließlich des Stylings – so gelangt er über einen „Bearbeiten“-Button zurück zum Onboarding.
Über den Search-Tab können Nutzer nach gezielten Schlagwörtern suchen. Abhängig davon, bei welchem Tab der Nutzer sich zuvor aufhielt, zeigt Suchleiste entwerder „builds-search“ oder „events-search“ an.
[13] Abschlusspräsentation
[13.5] Finaler FIGMA-Prototype
[14] Eigene Mockups
Mit der Intention, ein interessantes Abschlussvideo zu erstellen, habe ich im Studio eigene Mockups erstellt. Dafür habe ich mein iPhone in die Tischmitte gelegt und diverses Werkzeug und Moos (Danke an Max und Melissa) darum platziert. Allerdings habe ich die Idee eines realen Mockups verworfen, weil sie Szene in ihrer Ästhetik zu sehr von den Gradienten und Glaseffekten abweicht.
[15] Zusätzlicher Stil: Crazymode
Nach der Abschlusspräsentation habe ich die Zeit genutzt, um die anfängliche Idee einer „App im Comicstil“ in meine bestehende App zu integrieren. Dafür habe ich einen weiteren Screen im Onboarding hinzugefügt, welcher dem Nutzer die Möglichkeit gibt, den „Crazymode“ anzuschalten. Hierfür habe ich exemplarisch je einen Screen für den „Buildstab“, den „Eventstab“, den „Addtab“ und das „Profile“ entwickelt.
Bei der Wahl der Farbpalette habe ich hier die gleiche Collection aus Variablen benutzt, die auch bei dem „normalen“ Stil ihre Verwendung gefunden haben.
Entscheidet sich der Nutzer im „normalen“ Stil beispielsweise für „V2“, so werden die Farben – in leicht abgewandelter Weise – auf die Elemente im „Crazymode“ angewandt.
[16] Screencast
[17] Abschlussvideo
[18] Styleguide
[19] Poster
