EmbedSocial veröffentlicht neue Bewertungs-Widgets

Wir freuen uns, ankündigen zu können, dass wir heute ein komplettes Redesign unserer Bewertungs- und Testimonial-Widgets veröffentlichen.

Im folgenden Text beschreiben wir den Prozess und stellen die neuen Widgets vor, die du ab sofort nutzen kannst.

Die Inspiration: Kundenbedürfnisse bestimmen unsere Roadmap

Seit den allerersten Anfängen beim Aufbau von EmbedSocial ist es unsere oberste Priorität, dem Feedback und den Wünschen unserer Kunden zuzuhören und sie in unsere Entwicklungs-Roadmap einfließen zu lassen.

Eine der zentralen Funktionen, die wir gemeinsam entwickelt haben, ist die Möglichkeit, ein Widget mit Social Reviews ganz einfach auf jeder Website anzuzeigen, ganz ohne Programmierkenntnisse.

Doch als sich die Widgets mit neuen Funktionen weiterentwickelten und neue Kundensegmente unsere Produkte übernahmen, entstand der Bedarf nach einer größeren Vielfalt an Widgets:

„Die Funktionalität der Plattform ist großartig, allerdings könnten die Layouts noch etwas verbessert werden. Ich hoffe, sie könnten gleichzeitig fortschrittlicher und einfacher sein“, sagt ein Nutzer aus den USA.

Eine der häufigsten Anfragen war, unsere Bewertungs- und Testimonial-Widgets zu vereinfachen, indem wir die UI-Erfahrung der Nutzer verbessern.

Deshalb freuen wir uns heute, dir zu zeigen, woran wir in den letzten Monaten gearbeitet haben.

5 neue Bewertungs-Widgets!

Wir haben den Code, das Design, die Layouts und die Wirkung der Bewertungs-Widgets komplett überarbeitet.

So sind wir den gesamten Prozess angegangen:

Wir haben sie einfacher und responsiv gestaltet, damit sie standardmäßig zu jedem Design und jeder Website passen.

Wenn du dennoch Anpassungen vornehmen möchtest, sind unser Code und unsere CSS-Klassen jetzt einfacher zu nutzen, und du kannst die Option für individuelles CSS ganz, ganz leicht verwenden.

Wir hoffen, dass die Veröffentlichung unserer neuen Bewertungs-Layouts die technischen Dinge so einfach wie möglich hält und gleichzeitig sicherstellt, dass unsere Kunden mehr Flexibilität dabei genießen, was auf ihren Websites angezeigt wird.

Die ersten Kommentare sind überwiegend positiv:

„Ich liebe das Design und das Format. Diese Art von Layout inspiriert mich dazu, eine Bewertung zu schreiben. So wertvoll!“, sagt ein Nutzer aus Tokio.

Kommentare wie diese bestätigen einfach, dass wir auf dem richtigen Weg sind.

Lies weiter, um zu erfahren, wie es hinter den Kulissen aussah, wie wir einige Design-Herausforderungen gelöst haben, und schau dir unbedingt die neuen Widget-Demos an.

Hinter den Kulissen: Der Redesign-Prozess

Kundenbewertungen werden zu einem der wichtigsten Auslöser für Kaufentscheidungen, wenn Menschen sich für ein Produkt entscheiden.

Und positive Bewertungen zu erfassen wird wirklich zur Herausforderung, da Verbraucher immer aufgeklärter werden und weiterhin überlegene Produkte und Dienstleistungen verlangen.

Wie du vielleicht weißt (oder auch nicht), besteht der Hauptzweck von EmbedSocial darin, deine Social Reviews und Kunden-Testimonials zu erfassen und auf deiner Website zum Leben zu erwecken.

Wir tun dies durch die direkte Integration mit den wichtigsten sozialen Netzwerken und synchronisieren die generierten Bewertungen in Echtzeit auf deiner Website mit hochinteraktiven Widgets.

Ein komplexer Prozess, den wir zu lösen versuchen, oder?

Nun, wir glauben an die Kraft echter Social Proof. Deshalb sind wir überzeugt, dass es einen zusätzlichen Mehrwert für unsere Nutzer schafft, sie im einfachsten, aber zugleich eindrucksvollsten Format zu präsentieren.

Deshalb haben wir die Herausforderung angenommen, angeführt von unserer hyperkreativen Produktdesignerin Angela Ristovska und unserem Customer-Success-Team.

So sah der gesamte Prozess aus:

1. Brainstorming-Meetings mit dem Kundensupport-Team
2. Kundenfeedback, Bedürfnisse und Wünsche analysieren
3. Eine Liste der wichtigsten Wünsche und Bedürfnisse rund um die Plattform erstellen
4. Atomic-Design-Komponenten definieren
5. Erste Entwürfe erstellen und präsentieren
6. (Mehr als nur ein paar) Anpassungen an den Entwürfen vornehmen
7. CSS und HTML integrieren
8. Testen, testen, testen
9. Veröffentlichen

Schau dir unten die wichtigsten Ergebnisse dieses Prozesses an:

Design-Komponenten der neuen Widgets

Mehr als 3 Monate lang haben wir unsere Anstrengungen darauf konzentriert, unsere Bewertungs-Widgets neu zu gestalten, die du LIEBEN wirst, auf deinen Websites einzubinden.

Hier sind die wichtigsten Redesign-Elemente:

• Stern-Redesign
• Atomic-Components-Design der Widgets
• Themes der Widgets

Jedes dieser Design-Elemente hat seine eigene Geschichte.

Hier sind die Details:

Den… Stern neu erfinden!

Du fragst dich vielleicht, warum wir zuerst zum Stern gegriffen haben.

Nun, wir glauben, dass das Kernkonzept eines Kunden-Testimonials das 5-Sterne-Symbol ist.

Einfach ausgedrückt: Wenn du nur einen Text hast, ist es bloß ein Absatz. Aber wenn du die Sterne daneben hinzufügst… (Tadaa!) wird es zu einem Testimonial.

Also machen die Sterne dieses Format eigentlich zu dem, was es ist. Ohne sie ist es nur ein Zitat oder ein Absatz.

Und wir wollten unbedingt unsere eigenen Sterne entwickeln.

Nach ein paar Stunden Brainstorming entschied sich unser Team also, ein gebrandetes EmbedSocial-Stern-Design zu gestalten.

Wir wollten, dass der Stern die EMBED-Symbolik widerspiegelt, was als Verb bedeutet: ein Objekt fest und tief in eine umgebende Masse einbetten.

Genau das wollen wir, dass du mit deinen Kunden-Testimonials tust: mach sie zu einem festen Bestandteil deiner Website.

Falls dir eine gewisse Ähnlichkeit zwischen dem EmbedSocial-Logo und unserem neuen Stern-Design auffällt, bist du nicht allein.

Diese Analogie ist kein Zufall:

Wir haben uns in unsere brandneuen Sterne verliebt, also haben wir sie auf all unsere Widgets angewendet.

Das Ergebnis: Ein frischer Look und ein Widget, das die Stimme des Kunden hervorhebt.

Mission erfüllt :)

Der Weg zu einem so schönen Stern-Design war voller Versuche und Fehlschläge, bevor wir ein Design entwickelten, das uns den Atem raubte.

Hier sind einige der Designs, die wir in Betracht gezogen haben:

Design-Komponenten der Widgets

Auch wenn wir uns entschieden hatten, nur ein Auffrischen der aktuellen Layouts vorzunehmen, wussten wir, dass der Prozess überhaupt nicht einfach sein würde.

Redesign ist ein kreativer Prozess, und es ist wirklich leicht, vom Auffrischen zum Erfinden des neuen Tesla-Autos überzugehen. Um sicherzugehen, dass wir das Ziel im Auge behalten, haben wir eine Liste von Zielen, Prioritäten und Grundlagen erstellt, die wir während dieses Projekts befolgen müssen:

1. Halte es einfach!
2. Atomic-Design-Prinzipien befolgen
3. Ein System von Komponenten für jedes Widget in Figma mit einem neuen (einfachen) Design erstellen.
4. Komponenten mit HTML, CSS und JS umsetzen: Sauberer Code, neue Benennung der Klassen, einfach anzuwendendes individuelles CSS.
5. Neue Widgets testen

Und so begann die Reise.

Einen einfachen Satz von Komponenten als Designsystem zu definieren hilft uns, eine feste Aussage darüber zu treffen, was die Hauptelemente jedes Widgets sind, und half uns, alle wichtigen CSS-Klassen zu definieren, wodurch das Design und seine Umsetzung sehr einfach werden.

Als Zusammenfassung hier die am häufigsten verwendeten Komponenten in jedem Widget:

Von der Komponente zum Widget, durch laaange Arbeitstage und Mühe, ist es nun offiziell… Sie sind live!

Harte Arbeit hat sich ausgezahlt! Wir haben moderne und responsive Widgets entwickelt, die standardmäßig zu jedem Design und jeder Website passen.

Widget-Themes

Als Ergebnis des oben beschriebenen Prozesses glauben wir, dass du, sobald du eines der neuen Widgets erstellst und einbindest, es (hoffentlich) nicht weiter anpassen musst, was dir hilft, Zeit und Aufwand zu sparen, um dich mehr auf deine täglichen Aktivitäten zu konzentrieren.

Die Themes helfen dir, mit nur einem Klick schnell zwischen dunklen und hellen Layouts zu wechseln:

Wenn du dennoch Anpassungen vornehmen möchtest, sind unser Code und unsere CSS-Klassen jetzt einfacher zu nutzen, und du kannst die Option für individuelles CSS ganz, ganz leicht verwenden.

Neue Widgets im Überblick

Und schließlich ist das Design mit den zwei Hauptelementen des EmbedSocial-Brandings konzipiert:

1. Das verbindende Code-Tag, das den eingebetteten Teil der Marke repräsentiert
2. Das Symbol einer Beziehung, die unsere Nutzer mit ihren Kunden aufbauen möchten

Wir glauben, dass diese Veränderung den Look der Widgets auffrischt und hinter der Marke steht, um die unbestreitbare Kraft des Nutzer-Feedbacks zu repräsentieren.

Hier sind also endlich die neuen Widgets:

Grid-Widget

Das Grid-Widget zeigt Social Reviews in einem responsiven Masonry-Layout, das ein modernes Raster simuliert und auf jede vollformatige Seite passt, auf der du so viele Bewertungen wie möglich anzeigen möchtest.

Grid-Widget-Demo

Column-Widget

Ein zweispaltiges Layout, perfekt für Vollbildseiten, um mehrere Bewertungen auf einer Seite anzuzeigen.

Column-Widget-Demo

Carousel-Widget

Der Slider zeigt deine Bewertungen in einem Autoplay-Format, perfekt für deine Startseite. Du kannst die Bewertungen ansehen, indem du auf eine Box klickst, die die Bewertung in einer Slider-Lightbox oder einem vertikalen, fixierten Slider als Popup anzeigt.

Carousel-Widget-Demo

Slider-Widget

Sehr ähnlich zum Carousel-Widget, mit leichten Änderungen im Design und einem flachen Look für minimalistische Website-Designs.

Slider-Widget-Demo

Page-Widget

Wir haben dieses Layout „Page“ genannt, da es wie eine vollständige Bewertungsseite funktioniert, mit Buttons und Filtern, die die Webseite voll und ganz auf die Anzeige von Nutzerbewertungen ausrichten. Es ist hauptsächlich für Produktseiten konzipiert, auf denen Nutzer zusätzliche Optionen nutzen können, um die bereitgestellten Bewertungen zu durchsuchen und zu filtern.

Page-Widget-Demo.

Table-Widget

Wenn du am Ende eine vereinfachte Version des Page-Layouts brauchst, die keine Filter und kein Suchfeld enthält, kannst du das Table-Layout verwenden, das eine vollständige Liste der Bewertungen in einem Tabellenformat anzeigt, ähnlich einem Bewertungsbereich im Stil von Amazon.

Table-Widget-Demo

Popup-Widget

Zeige Social Proof auf deiner Website mit einem einfachen Popover, das als fixiertes Widget unten links oder unten rechts auf deiner Website erscheint.

Dieses Widget erscheint beim Laden einer Seite und kann so eingestellt werden, dass es alle Bewertungen mit einem Klick öffnet. Schau dir den Demo-Link an, um es live auszuprobieren.

Popup-Widget-Demo

Anwendbarkeit der neuen Bewertungs-Widgets

Unser Ziel bleibt es, Produkte zu entwickeln, die Kunden LIEBEN würden, auf ihren Websites einzubinden, und IHREN Kunden ein innovatives, fesselndes Erlebnis zu bieten.

Hier sind ein paar Beispiele, wie du deine Website mit Bewertungs-Widgets aufwerten kannst:

Bewertungs-Slider oder -Carousel für Startseiten

Binde deinen Slider oder dein Carousel direkt auf deiner Startseite ein. Der Social Proof kommt normalerweise direkt unter deinem Hero-Bild oder deinem Call-to-Action auf deiner Startseite.

Ähnlich kannst du dieselbe Struktur auf jeder Landingpage anwenden, die du in deinem Conversion-Funnel auf der Website verwendest.

Testimonials-Widget für E-Commerce-Produktseiten

Die Table- und Page-Widgets sind perfekt für Produktseiten. Das Beste an diesen Widgets ist die Möglichkeit, direkt auf dieser Seite eine Bewertung für dieses Produkt zu erhalten. So kannst du im Widget Bewertungen kombinieren, die aus deinem Social-Media-Account erfasst wurden, aber auch von Besuchern, die eine Bewertung auf der Produktseite hinterlassen haben.

Wie startest du mit den neuen Bewertungs-Widgets?

Wie du an den Bildern oben sehen kannst, sind unsere neuen Layouts startklar!

Du kannst die neuen Widgets ab sofort nutzen, indem du einfach zum Bereich Reviews Feed navigierst und auf den Feed klickst, den du bearbeiten möchtest.

Der letzte Schritt besteht darin, einfach die Option Layouts zu ändern und Grid, Column, Page, Table, Slider oder Carousel auszuwählen.

Und falls du noch kein Nutzer der EmbedSocial-Plattform bist, kannst du dich gerne für eine kostenlose Testversion anmelden und die neuen Bewertungs-Widgets ausprobieren.

Wenn du zusätzliche Hilfe brauchst, steht dir unser engagiertes Customer-Success-Team jederzeit zur Verfügung (wir können das gerne für dich übernehmen). Kontaktiere uns gerne bei Fragen.

Doch so sehr sich unser Design auch ändert, unsere Hauptmission bleibt: alles daranzusetzen, um unseren Kunden und Nutzern zu helfen, Vertrauen zu ihren Kunden aufzubauen und dadurch die Conversions zu steigern.