Als UX/UI-Designer war ich verantwortlich für:
Die Analysephase war der erste Schritt im Projekt, um eine nutzerzentrierte Gestaltung zu gewährleisten, indem die Bedürfnisse, Herausforderungen und Ziele der Zielgruppe untersucht wurden.
Um die Benutzeroberfläche für das Brainstorming-Tool zu entwickeln, die auf internationale Studierende zugeschnitten sind und sich intensiv mit wissenschaftlichen Texten auseinandersetzen möchten, habe ich drei detaillierte Personas erstellt.
Jede internationale Persona repräsentiert unterschiedliche akademische Disziplinen und einzigartige Herausforderungen, was uns hilft, die verschiedenen Bedürfnisse und Ziele der Benutzer besser zu verstehen.
Persona: Masters Student
Persona: Master Mechanical Engineer
Persona: AI & Computer Science
Eine Empathy Map wurde erstellt, um die Gedanken, Gefühle, Aussagen und Handlungen der Zielgruppe zu erfassen, wodurch Pain Points und Potenziale für Verbesserungen identifiziert wurden.
Für die Wireframes des Webtools wurden zunächst verschiedene Layouts und Interaktionskonzepte entwickelt: ein Node-Artboard mit Floating-Navigationsbar und auftauchenden Nodes, eine Variante mit unterer Toolbar zum Hinzufügen von Nodes, eine Kombination aus rechter Sidebar und Floating-Navigationsbar sowie eine Splitscreen-Ansicht mit zwei nebeneinanderliegenden Boards.
Die Ansätze veranschaulichten die Optionen für Navigation und Interaktion für das Webtool.
Node-Artboard mit Floating-Navigationsbar und auftauchenden Nodes zum Hinzufügen.
Node-Artboard mit Toolbar unten, um Nodes Hinzuzufügen.
Sidebar rechts mit Node-Artboard und Floating Navigationsbar
Splitscreen View: 2 Boards nebeneinander mit Floating Navigationsbar
Nach den Wireframes startete der Designprozess direkt mit der Erstellung von interaktiven High-Fidelity-Prototypen, bei denen das finale Design und die interaktiven Features unmittelbar umgesetzt wurden.
Die Umsetzung erfolgte iterativ und nutzerzentriert, wobei ein Versionierungsworkflow mit GitLab (Commit, Push, Pull) genutzt wurde, um Änderungen effizient zu tracken, Feedback zeitnah einzuarbeiten und frühere Versionen bei Bedarf wiederherzustellen.
Der iterative Workflow ermöglichte es, interaktive Prototypen kontinuierlich zu verfeinern und neue Features flexibel zu integrieren.
Alle Workspaces, Bearbeiter des Workspaces, Schemenhaft wurde als Thumbnail der Arbeitsbereich dargestellt, Tags wurden angezegit, wann zuletzt bearbeitet. Übersicht, Nutzerbereich, Funktion neues Board erstellen, Suchfunktion Nach Boards, Nutzer oben Rechts JG Jan Gemeinhardt bsp. Abmelden Log Out per Dropdown, links war eine sidenav vorgesehen, um weitere Bereiche aufklappen zu können. und noch zue rweiteren. Vorerst war aber fokus auf die Übersicht der Artboards alle zu sehen.
Das Tool bietet Nutzern eine intuitive Suchfunktion, um gezielt nach Themen zu suchen, die sie erkunden möchten. So können relevante Vorschläge schnell gefunden und direkt zum Workspace hinzugefügt werden.
Sobald Nutzer ein Thema ausgewählt haben, können sie es als Knoten direkt in den Arbeitsbereich hinzufügen. Diese Funktion ermöglicht eine visuelle Darstellung der aktuellen Ideensammlung.
Um das Verständnis weiter zu vertiefen, können Nutzer sekundäre Knoten hinzufügen, die weitere Aspekte, wie Nutzernamen, Verantwortliche oder andere Workspaces oder detaillierte Informationen zu den Hauptthemen darstellen. Dies fördert eine umfassendere Analyse und Entwicklung von neuen Ideen.
Die Ergebnisse des Projekts zeigen die nutzerzentrierte Umsetzung der entwickelten Funktionen, und liefern wertvolle Erkenntnisse aus den durchgeführten Tests und Analysen.
Die UI Guidelines wurden entwickelt, um auf der einen Seite ein ästhetisch ansprechendes Interface zu gestalten, aber auch um die Funktionalität und Benutzerfreundlichkeit des Brainstorming-Tools zu gewährleisten. In enger Zusammenarbeit mit unserem Entwicklungsteam konnte sichergestellt werden, dass die gewählten Design Guidelines auch Raum für zukünftige Funktionen bieten kann.
Konsistentes Farbschema für Professionalität und Benutzerfreundlichkeit.Einsatz der Schriftarten Roboto (Überschriften) und Lato (Fließtext).Material Icons für intuitive Navigation.
Für Titel und Überschriften verwenden wir die Schriftart Roboto, die durch ihre klare Lesbarkeit und moderne Ästhetik auf Screens besticht. Für den Fließtext haben wir uns für Lato entschieden, das eine angenehme Lesbarkeit auf verschiedenen Bildschirmgrößen bietet.
Das Icon-Set basiert auf Material Icons, das eine klare und konsistente visuelle Sprache unterstützt. Diese Icons wurden ausgewählt, um eine intuitive Navigation und eine einfache Erkennbarkeit der Funktionen zu gewährleisten.
Das Farbschema wurde gewählt, um eine ausgewogene Balance zwischen Professionalität und Benutzerfreundlichkeit zu gewährleisten. Die klare Unterscheidbarkeit der UI-Elemente hilft dabei, eine übersichtliche Arbeitsumgebung zu schaffen.
Die Tags auf den Knoten sind durch abgerundete Ecken gekennzeichnet, die sowohl visuell ansprechend als auch funktional sind. Benutzer können Kategorien leicht zuweisen und identifizieren, indem sie Tags auf die Knoten anwenden. Dies ermöglicht eine effiziente Organisation und eine schnellere Navigation durch den Arbeitsbereich.
Primary Nodes:
Diese Nodes werden direkt von Usern hinzugefügt, nachdem sie sie durch die Suchfunktion ausgewählt haben. Sie repräsentieren die Hauptthemen oder Ideen, mit denen die User aktiv arbeiten.
Secondary Nodes:
Suggestion Nodes aus der Knowledge Base werden automatisch vorgeschlagen und ergänzen die Hauptthemen der Benutzer. Diese Nodes bieten zusätzliche Informationen, Kontext oder verwandte Konzepte, die User bei der weiteren Ausarbeitung ihrer Ideen unterstützen.
Feature Nodes:
Die Feature Nodes enthalten spezifische Informationen über jeden Arbeitsbereich, einschließlich des Namens des Arbeitsbereichs und des verantwortlichen Teams oder Benutzers. Diese Nodes helfen bei der Strukturierung und Organisation der gesammelten Informationen innerhalb des Tools.
Die Toolbar erscheint beim Klick auf einen Node und ermöglicht die schnelle Anpassung der Node-Einstellungen: Form, Farbe und das Löschen des Nodes. Die Funktion bietet eine unkomplizierte Verwaltung der Nodes.
Mit der Farbänderungsfunktion können Knoten individuell gestaltet werden. Diese visuelle Anpassung hilft, unterschiedliche Inhalte oder Kategorien klar zu unterscheiden, was die Übersichtlichkeit innerhalb komplexer Arbeitsbereiche erhöht.
Nodes können durch Verbindungslinien miteinander verknüpft werden, um Beziehungen und Zusammenhänge zwischen den Themen aufzuzeigen. Diese Funktion unterstützt die Erstellung von Mindmaps und die strukturierte Darstellung von Informationen.
Die Funktion den Titel der Node per Dropdown auszutauschen, ermöglicht es, den Titel von Nodes schnell anzupassen, um den Kontext des Arbeitsbereichs oder der vorgeschlagenen Nodes zu verändern. So können Nutzer den Inhalt im Arbeitsbereich jederzeit präzisieren und anpassen.
Der User-Test wurde mit 10 internationalen Studierenden aus dem Bereich Hypertext in den USA (virtuell) durchgeführt, um die Benutzerfreundlichkeit und Funktionalität des INTR/HT Tools zu evaluieren.
Der Test bestand aus einem Haupttask mit einer Zeitbegrenzung von 10 Minuten, gefolgt von einer Umfrage (max. 10 Minuten).
Ziel war es, die Nutzererfahrung beim Anlegen eines anonymen Accounts, der Erstellung eines Arbeitsbereichs und der Organisation von Informationen in einer kollaborativen Umgebung zu analysieren.
Das Tool zeigt Potenzial, benötigt aber Optimierungen in Usability, Einführungsmaterialien und KI-Funktionalität. Eine Guided Tour wurde im Anschluss integriert, die mobile Optimierung ist geplant, bleibt jedoch sekundär, da der Fokus auf der Desktop-Nutzung liegt.
KI und Datenbanken werden weiter verbessert, um die Nutzererfahrung zu steigern.
.avif)
Das Projekt zeigte mir die Bedeutung eines nutzerzentrierten Ansatzes und die enge Zusammenarbeit mit Entwicklern. Die intuitive Oberfläche erleichtert die Organisation durch Knoten und Verknüpfungen, während die KI-Integration individuelle Vorschläge liefert.
Durch den Einsatz von GitLab und iterativer Versionierung konnte ich wertvolle Erfahrungen in agiler Teamarbeit und technischer Umsetzung sammeln.
Hast du eine Idee oder ein Projekt, das umgesetzt werden soll? Ich freue mich darauf, von dir zu hören.
Für Anliegen und Fragen stehe ich gerne unter design@jangemeinhardt.de zur Verfügung.
Dein Ansprechpartner:
Jan Gemeinhardt
