Um globale Best Practices zu verstehen, analysierte ich führende Social Listening Plattformen wie
Brandwatch, Sprout Social und Mention.
Ich verglich deren Stärken und Schwächen, um herauszufinden, wie wir das Nutzungserlebnis von Mahta gezielt verbessern und auf ein neues Niveau heben konnten.
Social Listening
UI/UX Case Study
Team
Reza Tavassoli
UIUX Designer
Amir Zehtabchi
Product Designer
Verwendete Tools
Figma. Photoshop. Illustrator
Dauer
2 Months
Link
🗂Projektübersicht
Mahta ist eine leistungsstarke Social Listening Plattform, entwickelt für digitale Marketer, Unternehmen und Agenturen. Sie sammelt und analysiert Daten aus Quellen wie Twitter, Instagram und Online-Nachrichtenportalen – unterstützt durch KI und Machine Learning.
Unsere Aufgabe bestand darin, die bestehende Plattform grundlegend zu überarbeiten und neue Funktionen zu integrieren, um die Benutzerfreundlichkeit zu verbessern, die Informationsarchitektur zu optimieren und Echtzeit-Insights in einem handlungsorientierteren Format bereitzustellen.
❗️Problemstellung
Die bestehende Version von Mahta litt unter einer überladenen Benutzeroberfläche, inkonsistenten Designmustern und fehlender visueller Hierarchie bei der Datenaufbereitung. Nutzer hatten Schwierigkeiten, Informationen effektiv zu filtern, wichtige Kennzahlen schnell zu finden und Trends auf einen Blick zu erfassen. Zudem fehlten essenzielle Funktionen, was das strategische Potenzial der Plattform deutlich einschränkte.
🎯 Ziele und Bedürfnisse der Nutzer:innen
Design Prozess
1. 🗣 Interviews mit Produktteam
Ich startete mit einer Reihe kollaborativer Sessions mit dem Produktteam. Ziel war es, Einblicke in die Geschäftsziele, aktuelle Nutzerprobleme und technische Einschränkungen zu gewinnen. Diese Gespräche halfen uns, fehlerhafte Nutzerflüsse zu identifizieren, fehlende UX-Elemente aufzudecken und eine klarere, effektivere Informationsarchitektur gemeinsam abzustimmen.
2. 📊 Benchmarking und Wettbewerbsanalyse
| ✅ Stärken | ❌ Schwächen |
| Saubere und intuitive Dashboards mit klarer visueller Hierarchie | Einige Tools bieten eine überwältigende Datenmenge bei eingeschränkten Anpassungsmöglichkeiten |
| Echtzeit-Stimmungsanalyse und Benachrichtigungssysteme | Gelegentliche Performance-Probleme beim Echtzeit-Tracking |
Einfache Filterung nach Schlüsselwort, Kanal oder Zeitraum | Hohe Lernkurve aufgrund komplexer Datendarstellung |
| Kollaborative Tools für Team-Workflows | Eingeschränkte Unterstützung für nicht-englische Inhalte oder lokalisierte Benutzeroberflächen |
| Handlungsorientierte Berichte und Exportoptionen | Fehlende mobiloptimierte Dashboards in einigen Fällen |
3. 🧱 Moodboard-Erstellung
Wir erstellten ein Moodboard, um den visuellen Ton und die gestalterische Ausrichtung für das neue Mahta festzulegen. Es enthielt gezielte Referenzen zu Farbpaletten, Typografie, Dashboard-Layouts und Icon-Stilen – abgestimmt auf datenintensive Umgebungen. Dabei legten wir besonderen Wert darauf, die Benutzeroberfläche klar, übersichtlich und leicht zugänglich zu gestalten.
4. Informationsarchitectur
Basierend auf unseren Interviews, der Analyse der Nutzerflüsse und dem Benchmarking haben wir die Informationsstruktur von Mahta neu gestaltet – logischer und stärker nutzerzentriert. Die neue Informationsarchitektur vereinfacht die Navigation, gruppiert zusammengehörige Tools sinnvoll und rückt zentrale Erkenntnisse durch eine intelligentere Inhalts-Hierarchie gezielt in den Fokus.
5. User flows
Nach intensiven Workshops mit dem Produktteam und einer detaillierten Analyse benchmarkbasierter Plattformen entwickelten wir die zentralen User Flows.
Der Fokus lag darauf, den Nutzern einen reibungslosen Ablauf zu ermöglichen – vom Einrichten von „Listening Topics“ bis hin zur Analyse und dem Export von Erkenntnissen.
Diese Flows bildeten die Grundlage für die Wireframes und sorgten dafür, dass jede Interaktion klar, zielgerichtet und benutzerfreundlich gestaltet war.
6. Nutzerumfrage
Um die Bedürfnisse der Nutzer besser zu verstehen, führten wir eine praktische Nutzerumfrage durch, bei der die Teilnehmenden mit dem Live-Produkt interagierten.
Sie sollten zentrale Aufgaben ausführen, um Schwachstellen, unklare Abläufe und fehlende Funktionen zu identifizieren.
Wir legten besonderen Wert auf die Bewertung von Navigationsfreundlichkeit, Tracking-Genauigkeit und Verständlichkeit der gelieferten Insights.
Das Feedback spielte eine entscheidende Rolle bei der Optimierung der User Flows und der Priorisierung funktionaler Verbesserungen.
7. User journey map
Eine User Journey Map ist eine visuelle Darstellung der Schritte, die ein Nutzer unternimmt, um ein bestimmtes Ziel im Produkt zu erreichen – einschließlich Handlungen, Emotionen, Schmerzpunkten und Erwartungen. Dieses Werkzeug hilft Teams, sich besser in die Nutzer hineinzuversetzen, Usability-Probleme aufzudecken und gezielte Optimierungsmöglichkeiten zu erkennen.
In diesem Projekt erstellten wir eine Journey Map für Amir, einen engagierten Business Manager, der auf Social-Media-Insights angewiesen ist, um Markttrends im Blick zu behalten. Seine Reise durch das Mahta-Dashboard offenbarte Herausforderungen wie unklare Begrifflichkeiten, mangelhafte visuelle Hierarchie und Verständnisschwierigkeiten bei Funktionen wie dem Analysebereich und dem Social Listening Tool.
Durch die Dokumentation von Amirs Erlebnissen – vom Dashboard-Check bis zur Feature-Nutzung – konnten wir:
Momente der Verwirrung und Frustration identifizieren
Erkennen, wo mehr Anleitung erforderlich ist
Navigation und Datenpräsentation gezielt verbessern
Diese Journey half uns, ein intuitiveres und praxisnahes Nutzererlebnis zu schaffen, das auf reale geschäftliche Anforderungen abgestimmt ist.
8.User Persona
User Personas sind fiktive, aber forschungsbasierte Darstellungen echter Nutzer. Sie helfen dabei, Ziele, Bedürfnisse, Verhaltensweisen und Schmerzpunkte der Zielgruppe greifbar zu machen.
Im Fall von Mahta begleiteten uns Personas wie Amir – der Business Manager durch den gesamten Designprozess und halfen uns, gezieltere und relevantere UX-Entscheidungen zu treffen.
6. Wireframes
Auf Grundlage der finalisierten User Flows und der überarbeiteten Informationsarchitektur erstellten wir Low-Fidelity-Wireframes, um Layout und Struktur zu definieren.
Diese Wireframes ermöglichten es uns, zentrale Interaktionen frühzeitig zu validieren – mit Fokus auf Klarheit, Inhalts-Hierarchie und Datenvisualisierung.
Vor dem Übergang in das High-Fidelity-Design teilten wir die Entwürfe mit dem Team und holten gezieltes Feedback ein.
🎨UI Kit and Styles
Das UI-Kit wurde auf Basis von Vuetify entwickelt, abgestimmt auf das Frontend-Framework des Entwicklungsteams. Ich passte die Komponenten individuell an und integrierte eine rosé-lila Primärfarbe, inspiriert vom Mahta-Logo, um die Markenidentität visuell zu stärken.
Die Typografie orientierte sich an den Material-Design-Richtlinien, was eine gute Lesbarkeit und visuelle Konsistenz über alle Bildschirmgrößen hinweg sicherstellte.
Farben
Typografie
Die Typografie spielte eine zentrale Rolle bei der Gestaltung einer klaren und gut lesbaren Benutzeroberfläche. Ich entwickelte ein Typografiesystem, das auf klarer Hierarchie und Einfachheit basiert:
Überschriften – Verwendet für Abschnittstitel und Diagrammbeschriftungen, fett und schnell erfassbar
Fließtext – Für mobile Lesbarkeit optimiert, mit ausgewogenem Zeilenabstand und Schriftgewicht
Hinweise & Mikrotexte – Eingesetzt für Tooltips, Hilfetexte und ergänzende Informationen
Das System orientierte sich an der Material Design Typography, und es wurde eine einheitliche Vereinbarung getroffen, vordefinierte Schriftgrößen und -gewichte durchgängig im Design zu verwenden.
Ich nutzte konsistente Benennungskonventionen für alle Textstile (z. B. Heading-L, Body-M, Caption-S) und implementierte sie über Figma-Tokens, um visuelle Harmonie und Skalierbarkeit über verschiedene Bildschirmgrößen hinweg sicherzustellen.
Finales Design
