{"id":173,"date":"2025-04-14T12:17:09","date_gmt":"2025-04-14T08:47:09","guid":{"rendered":"https:\/\/rezatavasoli.ir\/?page_id=173"},"modified":"2025-05-03T02:10:09","modified_gmt":"2025-05-02T22:40:09","slug":"social-listening","status":"publish","type":"page","link":"https:\/\/reza-tavasoli.com\/en\/social-listening\/","title":{"rendered":"Social Listening"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Social Listening<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

UI\/UX Case Study<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Team<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Reza Tavassoli<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

UIUX Designer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Group\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Amir Zehtabchi<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Product Designer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Verwendete Tools<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Figma. Photoshop. Illustrator<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Dauer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

2 Months<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Link<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

https:\/\/mahta.co\/<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\ud83d\uddc2Projekt\u00fcbersicht<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Mahta ist eine leistungsstarke Social Listening Plattform, entwickelt f\u00fcr digitale Marketer, Unternehmen und Agenturen. Sie sammelt und analysiert Daten aus Quellen wie Twitter, Instagram und Online-Nachrichtenportalen \u2013 unterst\u00fctzt durch KI und Machine Learning.<\/p>

Unsere Aufgabe bestand darin, die bestehende Plattform grundlegend zu \u00fcberarbeiten und neue Funktionen zu integrieren, um die Benutzerfreundlichkeit zu verbessern<\/strong>, die Informationsarchitektur zu optimieren<\/strong> und Echtzeit-Insights<\/strong> in einem handlungsorientierteren Format bereitzustellen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\u2757\ufe0fProblemstellung<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die bestehende Version von Mahta litt unter einer \u00fcberladenen Benutzeroberfl\u00e4che, 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\u00e4nkte.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\ud83c\udfaf Ziele und Bed\u00fcrfnisse der Nutzer:innen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

    • Marken-Erw\u00e4hnungen, Trends und Stimmungen plattform\u00fcbergreifend einfach \u00fcberwachen<\/p><\/li>

    • Komplexe Daten durch \u00fcbersichtliche Dashboards und Diagramme visualisieren<\/p><\/li>

    • Benachrichtigungen und Berichte individuell anpassen \u2013 nach Themen, Zeitr\u00e4umen oder Kan\u00e4len<\/p><\/li>

    • Daten gezielt filtern und tiefgehende Analysen nach Branche oder Interessen durchf\u00fchren<\/p><\/li>

    • Mobiloptimiertes Nutzungserlebnis f\u00fcr Insights unterwegs<\/p><\/li><\/ul><\/div><\/div><\/div><\/div><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t

      \"\u2699\ufe0f\" Design Prozess<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      1. \ud83d\udde3 Interviews mit Produktteam<\/h2>

      Ich startete mit einer Reihe kollaborativer Sessions mit dem Produktteam. Ziel war es, Einblicke in die Gesch\u00e4ftsziele, aktuelle Nutzerprobleme und technische Einschr\u00e4nkungen zu gewinnen. Diese Gespr\u00e4che halfen uns, fehlerhafte Nutzerfl\u00fcsse zu identifizieren, fehlende UX-Elemente aufzudecken und eine klarere, effektivere Informationsarchitektur gemeinsam abzustimmen.<\/p>

      2. \ud83d\udcca Benchmarking und Wettbewerbsanalyse<\/h2>

      Um globale Best Practices zu verstehen, analysierte ich f\u00fchrende Social Listening Plattformen wie
      Brandwatch<\/strong>, Sprout Social<\/strong> und Mention<\/strong>.
      Ich verglich deren St\u00e4rken und Schw\u00e4chen, um herauszufinden, wie wir das Nutzungserlebnis von Mahta<\/em> gezielt verbessern und auf ein neues Niveau heben konnten.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article>

      \u00a0<\/div>

      \"\"<\/p>
      \u2705 St\u00e4rken<\/td>\u274c Schw\u00e4chen<\/td><\/tr>
      Saubere und intuitive Dashboards mit klarer visueller Hierarchie<\/td>Einige Tools bieten eine \u00fcberw\u00e4ltigende Datenmenge bei eingeschr\u00e4nkten Anpassungsm\u00f6glichkeiten<\/td><\/tr>
      Echtzeit-Stimmungsanalyse und Benachrichtigungssysteme<\/td>Gelegentliche Performance-Probleme beim Echtzeit-Tracking<\/td><\/tr>

      Einfache Filterung nach Schl\u00fcsselwort, Kanal oder Zeitraum<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article><\/td>

      		Hohe Lernkurve aufgrund komplexer Datendarstellung<\/td><\/tr>
      Kollaborative Tools f\u00fcr Team-Workflows<\/td>Eingeschr\u00e4nkte Unterst\u00fctzung f\u00fcr nicht-englische Inhalte oder lokalisierte Benutzeroberfl\u00e4chen<\/td><\/tr>
      Handlungsorientierte Berichte und Exportoptionen<\/td>Fehlende mobiloptimierte Dashboards in einigen F\u00e4llen<\/td><\/tr><\/tbody><\/table>

      3. \ud83e\uddf1 Moodboard-Erstellung<\/h2>

      Wir erstellten ein Moodboard, um den visuellen Ton und die gestalterische Ausrichtung f\u00fcr das neue Mahta<\/em> festzulegen. Es enthielt gezielte Referenzen zu Farbpaletten, Typografie, Dashboard-Layouts und Icon-Stilen \u2013 abgestimmt auf datenintensive Umgebungen. Dabei legten wir besonderen Wert darauf, die Benutzeroberfl\u00e4che klar, \u00fcbersichtlich und leicht zug\u00e4nglich zu gestalten.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article>

      \u00a0<\/div>

      \"\"<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      4. Informationsarchitectur<\/h2>

      Basierend auf unseren Interviews, der Analyse der Nutzerfl\u00fcsse und dem Benchmarking haben wir die Informationsstruktur von Mahta<\/em> neu gestaltet \u2013 logischer und st\u00e4rker nutzerzentriert. Die neue Informationsarchitektur vereinfacht die Navigation, gruppiert zusammengeh\u00f6rige Tools sinnvoll und r\u00fcckt zentrale Erkenntnisse durch eine intelligentere Inhalts-Hierarchie gezielt in den Fokus.<\/p><\/div><\/div><\/div><\/div>

      \u00a0<\/div><\/div><\/div><\/div><\/div><\/div><\/article>
      \u00a0<\/div>

      \"\"<\/p>

      \"\"<\/p>

      5. User flows<\/h2>

      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\u00f6glichen \u2013 vom Einrichten von \u201eListening Topics\u201c bis hin zur Analyse und dem Export von Erkenntnissen.
      Diese Flows bildeten die Grundlage f\u00fcr die Wireframes und sorgten daf\u00fcr, dass jede Interaktion klar, zielgerichtet und benutzerfreundlich gestaltet war.<\/p>

      \"\"<\/p>

      6. Nutzerumfrage<\/h2>

      Um die Bed\u00fcrfnisse der Nutzer besser zu verstehen, f\u00fchrten wir eine praktische Nutzerumfrage durch, bei der die Teilnehmenden mit dem Live-Produkt interagierten.
      Sie sollten zentrale Aufgaben ausf\u00fchren, um Schwachstellen, unklare Abl\u00e4ufe und fehlende Funktionen zu identifizieren.
      Wir legten besonderen Wert auf die Bewertung von Navigationsfreundlichkeit, Tracking-Genauigkeit und Verst\u00e4ndlichkeit der gelieferten Insights.
      Das Feedback spielte eine entscheidende Rolle bei der Optimierung der User Flows und der Priorisierung funktionaler Verbesserungen.<\/p>

      \"\"<\/p>

      7. User journey map<\/h2>

      Eine User Journey Map<\/strong> ist eine visuelle Darstellung der Schritte, die ein Nutzer unternimmt, um ein bestimmtes Ziel im Produkt zu erreichen \u2013 einschlie\u00dflich Handlungen, Emotionen, Schmerzpunkten und Erwartungen. Dieses Werkzeug hilft Teams, sich besser in die Nutzer hineinzuversetzen, Usability-Probleme aufzudecken und gezielte Optimierungsm\u00f6glichkeiten zu erkennen.<\/p>

      In diesem Projekt erstellten wir eine Journey Map f\u00fcr Amir<\/em>, 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\u00e4ndnisschwierigkeiten bei Funktionen wie dem Analysebereich und dem Social Listening Tool.<\/p>

      Durch die Dokumentation von Amirs Erlebnissen \u2013 vom Dashboard-Check bis zur Feature-Nutzung \u2013 konnten wir:<\/p>

      • Momente der Verwirrung und Frustration identifizieren<\/p><\/li>

      • Erkennen, wo mehr Anleitung erforderlich ist<\/p><\/li>

      • Navigation und Datenpr\u00e4sentation gezielt verbessern<\/p><\/li><\/ul>

        Diese Journey half uns, ein intuitiveres und praxisnahes Nutzererlebnis zu schaffen, das auf reale gesch\u00e4ftliche Anforderungen abgestimmt ist.<\/p>

        \"\"<\/p>

        \"\"<\/p>

        8.User Persona<\/h2>

        User Personas<\/strong> sind fiktive, aber forschungsbasierte Darstellungen echter Nutzer. Sie helfen dabei, Ziele, Bed\u00fcrfnisse, Verhaltensweisen und Schmerzpunkte der Zielgruppe greifbar zu machen.
        Im Fall von Mahta<\/em> begleiteten uns Personas wie Amir \u2013 der Business Manager<\/em> durch den gesamten Designprozess und halfen uns, gezieltere und relevantere UX-Entscheidungen zu treffen.<\/p>


        \"\"<\/p>

        6. Wireframes<\/h2>

        Auf Grundlage der finalisierten User Flows und der \u00fcberarbeiteten Informationsarchitektur erstellten wir Low-Fidelity-Wireframes, um Layout und Struktur zu definieren.
        Diese Wireframes erm\u00f6glichten es uns, zentrale Interaktionen fr\u00fchzeitig zu validieren \u2013 mit Fokus auf Klarheit, Inhalts-Hierarchie und Datenvisualisierung.
        Vor dem \u00dcbergang in das High-Fidelity-Design teilten wir die Entw\u00fcrfe mit dem Team und holten gezieltes Feedback ein.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

        \n\t\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t

        \ud83c\udfa8UI Kit and Styles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Das UI-Kit wurde auf Basis von Vuetify<\/strong> entwickelt, abgestimmt auf das Frontend-Framework des Entwicklungsteams. Ich passte die Komponenten individuell an und integrierte eine ros\u00e9-lila Prim\u00e4rfarbe<\/strong>, inspiriert vom Mahta-Logo, um die Markenidentit\u00e4t visuell zu st\u00e4rken.<\/p>

        Die Typografie orientierte sich an den Material-Design-Richtlinien<\/strong>, was eine gute Lesbarkeit und visuelle Konsistenz \u00fcber alle Bildschirmgr\u00f6\u00dfen hinweg sicherstellte.<\/p>

        Farben<\/h2>

        \"\"<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

        \n\t\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t

        Typografie<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Die Typografie spielte eine zentrale Rolle bei der Gestaltung einer klaren und gut lesbaren Benutzeroberfl\u00e4che. Ich entwickelte ein Typografiesystem, das auf klarer Hierarchie und Einfachheit<\/strong> basiert:<\/p>

        • \u00dcberschriften<\/strong> \u2013 Verwendet f\u00fcr Abschnittstitel und Diagrammbeschriftungen, fett und schnell erfassbar<\/p><\/li>

        • Flie\u00dftext<\/strong> \u2013 F\u00fcr mobile Lesbarkeit optimiert, mit ausgewogenem Zeilenabstand und Schriftgewicht<\/p><\/li>

        • Hinweise & Mikrotexte<\/strong> \u2013 Eingesetzt f\u00fcr Tooltips, Hilfetexte und erg\u00e4nzende Informationen<\/p><\/li><\/ul>

          Das System orientierte sich an der Material Design Typography<\/strong>, und es wurde eine einheitliche Vereinbarung getroffen, vordefinierte Schriftgr\u00f6\u00dfen und -gewichte durchg\u00e4ngig im Design zu verwenden.<\/p>

          Ich nutzte konsistente Benennungskonventionen<\/strong> f\u00fcr alle Textstile (z.\u202fB. Heading-L<\/em>, Body-M<\/em>, Caption-S<\/em>) und implementierte sie \u00fcber Figma-Tokens<\/strong>, um visuelle Harmonie und Skalierbarkeit \u00fcber verschiedene Bildschirmgr\u00f6\u00dfen hinweg sicherzustellen.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article>

          \u00a0<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
          \n\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t

          Finales Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          \u00a0<\/p>

          \"\"<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

          \n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t

          More Than 40 Screens<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          \n\t\t\t
          <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

          Social Listening UI\/UX Case Study Team Reza Tavassoli UIUX Designer Amir Zehtabchi Product Designer Verwendete Tools Figma. Photoshop. Illustrator Dauer 2 Months Link https:\/\/mahta.co\/ \ud83d\uddc2Projekt\u00fcbersicht Mahta ist eine leistungsstarke Social Listening Plattform, entwickelt f\u00fcr digitale Marketer, Unternehmen und Agenturen. Sie sammelt und analysiert Daten aus Quellen wie Twitter, Instagram und Online-Nachrichtenportalen \u2013 unterst\u00fctzt durch KI […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-173","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":25,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages\/173\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages\/173\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/media?parent=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}