Besuchen Sie unsere Länder-Seiten
Besuchen Sie unsere Länder-Seiten
Thespie ist eine medienübergreifende Plattform mit über 1.000 digitalen Ressourcen, die Zugang zu Theater- und Kunstaufführungen, Musikvideos, Podcasts, E-Books, Livestreams, Ausstellungen und Konzerten bietet. Die Plattform wurde 2019 von Tyler Stoops – einem Theaterprofi mit umfassender Erfahrung in den Bereichen Technologie und Kunstmarketing – gegründet. Thespie wurde als Ticketing-Plattform für Theateraufführungen im Vereinigten Königreich konzipiert. Doch nach und nach entwickelte sie sich zu einer Plattform, die eine Verbindung zur Welt der Unterhaltung durch Online-Dienste bietet.
Obwohl die COVID-19-Pandemie viele Probleme verursacht hat, hat sie auch Menschen ermutigt, über den Tellerrand hinauszuschauen und neue Kreativitätsmittel zu finden. Da die meisten Läden und Veranstaltungsorte geschlossen waren, haben die Künstler ihre Arbeit ins Internet verlagert. So hat es auch Thespie gemacht. Was als Ticketverkaufsdienst gedacht war, hat sich 2019 zu einer medienübergreifenden Plattform mit einer Vielzahl von Unterhaltungsinhalten entwickelt.
Diese Vielfalt an Inhalten und Kategorien ist für die Nutzer verwirrend, was sich negativ auf das Nutzererlebnis auswirkt. Ester Digital hat alle Anstrengungen unternommen, um das zu vermeiden. Unser Ziel war, das derzeitige UX-Design zu verbessern und neue Möglichkeiten des Zugriffs auf Inhalte einzuführen.
Unser Entwicklungsteam hatte noch eine weitere Herausforderung zu bewältigen: Es musste sicherstellen, dass die Website auch bei jeder Menge Inhalten so schnell wie möglich lädt.
In Zusammenarbeit mit Thespie haben wir einen Online-Dienst geschaffen, der es den Menschen ermöglicht, mit der Welt des Theaters in Verbindung zu bleiben und das kulturelle Leben bequem von zuhause aus zu erleben, ohne ihre Gesundheit durch Covid zu gefährden.
Da der Umfang des Projekts zu Beginn schwer zu bestimmen war, hat Ester Digital ein spezielles Team bereitgestellt, das sich ausschließlich mit der Thespie-Website befasst hat. Das hat den Entwicklern ermöglicht, sich auf eine einzige Aufgabe zu konzentrieren und dabei die Anforderungen des Kunden zu berücksichtigen; das garantierte eine erfolgreiche Zusammenarbeit zwischen Kunde und Team sowie ein tieferes Verständnis des Endziels.
Ohne die richtige Content-Strategie ist es fast unmöglich, eine Website zu promoten und bei Google weiter vorn zu ranken. Für den Thespie-Blog wurde Prismic Headless CMS gewählt – eine der Standardlösungen auf dem Markt. Diese leistungsstarke Plattform bietet eine hervorragende Kompatibilität mit React und NextJS und eine große Anzahl von Bibliotheken zur Integration. Durch die Verwendung einer Standardlösung für den Blog konnten wir Zeit und Entwicklungskosten sparen.
Die Client-Side ist der wichtigste Teil des gesamten Projekts. Beginnen wir mit der Definition. “Client-Side” ist der Teil der Website, das den ersten Eindruck vermittelt. Es ist im Wesentlichen das Frontend, das dafür verantwortlich ist, wie die Nutzer Thespie wahrnehmen und wie sie mit der Plattform interagieren. Für die Arbeit an dieser Komponente des Projekts haben wir uns für das NextJS-Framework entschieden, weil es folgende Vorteile bietet:
Die Gemeinschaft von Kreativen erscheint oft unzugänglich und exklusiv. Vor diesem Hintergrund haben wir in Zusammenarbeit mit Thespie ein Webdesign entwickelt, das den Besuchern das Gefühl gibt, willkommen zu sein. Mit dem neuen visuellen Stil ist es gelungen, den ungewöhnlichen Charakter der Theaterkunst beizubehalten und gleichzeitig die vorgebenen Datenstrukturen einfacher und übersichtlicher darzustellen.
Werfen wir einen Blick auf die Seiten, die nach UX-Standards modernisiert wurden.
Gibt es eine andere Seite in der Struktur der Webplattform, die als Herzstück der Website bezeichnet werden könnte? Mit unserer gesamten Erfahrung und Kenntnis der Branche würden wir das verneinen. Zuvor gab es auf der Startseite von Thespie nur einen einzigen Abschnitt „Ausstellungen“. Da der Umfang der Inhalte zugenommen hat, musste eine neue Seitenstruktur geschaffen werden. Wir haben eine Seite entwickelt, die einen einfachen Zugang zu allen Kategorien von Inhalten bietet. Es ist nun möglich, mit nur zwei Klicks theaterbezogene Informationen zu finden, indem man eine der folgenden Kategorien auswählt: Video, Audio und Musik, E-Books, Skripte und Songbooks, Lernressourcen usw. Ein Blog ist ebenfalls verfügbar.
Ein besonderer Platz auf der Seite ist dem Blog gewidmet. Es geht um eine Initiative zur Unterstützung von Künstlern und Kreativschaffenden während der COVID-19-Pandemie. Das konnte das Thespie-Team einfach nicht auslassen.
Der Header und der Footer sind keine Komponenten, die informativ und für den Nutzer unverzichtbar sein sollten. Wie viel Zeit verbringen Sie damit, sich die Fußzeile Ihrer Lieblingswebsite anzusehen? Wir vermuten, nicht so viel?
Bei der Arbeit an der Thespie-Plattform haben wir versucht, das zu ändern und den Platz in der Kopf- und Fußzeile optimal zu nutzen. Der neu gestaltete Header hat jetzt ein mehrstufiges Dropdown-Menü. Einige Videos sind jetzt direkt über das Menü in den Kategorien Digital und London verfügbar. Rechts vom Header befindet sich die Suchleiste.
Die neue Version des Footers enthält einstufige Links, so dass es jetzt unglaublich einfach ist, zu Kategorieseiten für bestimmte Videos zu gelangen. Im Footer finden Sie außerdem Informationen zum Datenschutz, zu den Allgemeinen Geschäftsbedingungen (AGB) und zur Cookie-Richtlinie – das sind all diese Seiten, die niemand liest, die aber vorhanden sein müssen.
Thespie hat Hunderte von Filmen, Serien, Theaterstücken und Vorträgen in seinem Archiv. Es ist leichter, sich in den vielen Unterhaltungsmöglichkeiten zu verlieren, als ihre Vielfalt zu genießen. Und die Ester-Designer haben sich wieder einmal selbst übertroffen. Unser Team hat eine vielseitige Kategorieseite mit mehreren Filtern erstellt, die gleichzeitig funktionieren. Thespie-Benutzer können jetzt Produkte nach Genre, Stimmung, Preis und Verfügbarkeit sortieren. Die zuvor vorgestellten Kategorien wurden in den Unterabschnitt „Format“ verschoben, wo sie zu Unterkategorien geworden sind.
Als Ergebnis dieser Änderungen sind nun alle digitalen Sendungen in Kategorien unterteilt, die dynamisch mit dem Backend verbunden sind. Die folgende Technik zur Erstellung dynamischer Seiten wurde im Next.JS-Framework verwendet:
Ein durchdachtes Design allein reicht jedoch nicht aus, um eine angemessene Leistung der Plattform zu gewährleisten. Auch die Entwicklung ist wichtig. Zusätzlich zu den zahlreichen Filtern haben wir ein Seitenlayout entwickelt, das so kompakt und einfach wie möglich ist und die maximale Anzahl von Produktkarten anzeigt. Wir haben uns entschieden, die einfache Paginierung durch einen unendlichen Bildlauf zu ersetzen.
Was haben wir durch diese Lösung gewonnen? Wir konnten dadurch das Laden und den laufenden Betrieb der Plattform um ein Vielfaches beschleunigen, da die Nutzer nicht warten müssen, bis die Seite vollständig geladen ist, um die erwarteten Shows zu sehen. Diese Funktionalität haben wir mit Hilfe der React-Visibility-Sensor-Bibliothek implementiert.
Hohe Leistung und die Generierung von Traffic sind nicht der einzige Zweck der Webseitengestaltung. Bei der Arbeit an einer Kategorieseite ist es auch wichtig, der SEO-Optimierung besondere Aufmerksamkeit zu schenken. Alle von uns gewählten Filter sind suchmaschinenfreundlich. Alle Änderungen an den Filtern spiegeln die Änderungen in der Adressleiste des Browsers wider. Das bedeutet, dass jeder Filter seinen eigenen Link hat, der indiziert und in einer Werbekampagne verwendet werden kann.
Eine gut gestaltete Kategorieseite mit verschiedenen Filtern ist wichtig, aber sie ist nicht die einzige Lösung, um die Auswahl von Thespie-Besuchern zu vereinfachen. Wir haben eine Suchleiste komplett neu entwickelt, um den Benutzern die Suche zu erleichtern.
Mit jedem Buchstaben, den der Nutzer eingibt, wird das Suchergebnis aktualisiert und präzisiert. Wir haben berücksichtigt, dass die Leute manchmal nicht den genauen Namen der Show kennen, sich aber vielleicht erinnern, wo die Aufführung stattgefunden hat. Deshalb haben wir uns dafür entschieden, den Namen nicht als einziges Suchkriterium heranzuziehen. Wir haben ein System verwendet, das es uns ermöglicht, eine bestimmte Kette von Fragen zu erstellen, um die besten Suchergebnisse auf der Grundlage der folgenden Kriterien zu erhalten:
Mit jedem Buchstaben, den der Nutzer eingibt, wird das Suchergebnis aktualisiert und präzisiert. Wir haben berücksichtigt, dass die Leute manchmal nicht den genauen Namen der Show kennen, sich aber vielleicht erinnern, wo die Aufführung stattgefunden hat. Deshalb haben wir uns dafür entschieden, den Namen nicht als einziges Suchkriterium heranzuziehen. Wir haben ein System verwendet, das es uns ermöglicht, eine bestimmte Kette von Fragen zu erstellen, um die besten Suchergebnisse auf der Grundlage der folgenden Kriterien zu erhalten:
Zur Veröffentlichung dieser Lösung haben wir eine Match-Sorter-Bibliothek verwendet.
Thespie bietet zahlreiche Livestreams und Podcasts, digitale Ausstellungen, Konzertmitschnitte, Auftritte der Künstler, Drehbücher, E-Books und mehr. Die Plattform verlinkt jede Aufführung mit einer bestimmten Plattform, die sie streamt, z. B. Audible, National Theatre Live, YouTube, Netflix, Kindle, oder öffnet sie direkt vor Ort. Jedes Produkt enthält eine kurze Beschreibung oder Zusammenfassung. Man kann sich auch ähnliche Optionen ansehen, die von der Plattform empfohlen werden. Die Nutzer können ihre eigenen Konten erstellen, wo sie Sendungen hinzufügen können, die sie später ansehen möchten, und sie nach verschiedenen Kriterien filtern und sortieren.
Mit der wachsenden Zahl von Inhalten steigt auch die Anzahl der Webkomponenten. Daher ist der bisherige Ansatz zur Optimierung und Beschleunigung der Website nicht mehr effektiv, und das Ester-Entwicklungsteam musste neue Wege finden, um das Problem zu lösen. Wir haben aber keine Angst vor Hindernissen.
Ursprünglich hat die Plattform eine Javascript-Datei mit allen Komponenten auf jede vom Benutzer besuchte Seite geladen. Dieser Ansatz ist recht effektiv für Websites mit wenigen Seiten, und anfangs hat er bei Thespie gut funktioniert. Als jedoch die Anzahl der Komponenten zunahm, konnte das System die übermäßige Belastung nicht mehr bewältigen, und wir mussten eine Code-Aufteilung einführen.
Lassen Sie uns für eine Minute Ihr Wikipedia sein. Mit Code-Aufteilung kann man den Code in Komponenten aufteilen und nur die Teile zu laden, die der Nutzer zu einem bestimmten Zeitpunkt benötigt. Das bedarfsgerechte Laden von Komponenten hilft, die Leistung der Plattform zu verbessern und die Belastung des Gerätespeichers zu verringern, was zu einem geringeren Batterieverbrauch führt. Die bessere Bewertung Ihrer neuen Website in Google-Pagespeed-Insights ist ebenfalls ein netter Bonus.
Bei der Optimierung der Thespie-Website haben wir beschlossen, das Smart Loading für Komponenten und Bibliotheken einzusetzen, die nicht mit dem Hauptkern der Website zusammenhängen, gleichzeitig aber ein erhebliches Gewicht haben. Alle anderen Bibliotheken wurden im Hauptpaket belassen, da das Geteilte Laden die Arbeit mit einer steigenden Anzahl von Anfragen nur beeinträchtigen könnte.
Wie kann man aber verstehen, welche Bibliotheken die oben genannten Anforderungen erfüllen und welche nicht? Wir haben Informationen benötigt, die uns entscheiden lassen, welche Javascript-Komponenten überflüssig sind und entladen werden können. Bei diesem Schritt haben wir die Bibliothek @next/build-analyzer verwendet und eine interaktive Visualisierung mit allen Komponenten und Unterkomponenten des Projekts erstellt.
Wir bemühen uns, jede unserer Lösungen so einfach und benutzerfreundlich wie möglich zu gestalten. Wir bieten digitale Lösungen, die klar und effizient sind und keine Heerscharen von Entwicklern und Designern benötigen, um ständig Änderungen und Verbesserungen vorzunehmen. Thespie ist da keine Ausnahme.
Jedes Projekt, egal wie einfach es ist, hat komplexe Verbindungen zwischen seinen Komponenten. Es gibt Tausende von Basiselementen wie Schaltflächen oder Bilder, die an vielen Stellen der Plattform verwendet werden und in Beziehung zueinander stehen. Um die Verwaltung der Plattform zu vereinfachen, haben wir die Atomic Design-Methode eingeführt und alle UI-Komponenten in die folgenden Elemente unterteilt:
Atome. Dies sind die grundlegenden Bausteine, das Fundament von allem. Wenn es um Webschnittstellen geht, sind Atome HTML-Tags wie Labels, Input-Felder oder Schaltflächen.
Moleküle. Labels, Input-Felder oder Schaltflächen sind für sich genommen nicht sehr benutzerfreundlich. Wenn sie aber in einer Form kombiniert werden, können sie wirklich wertvoll werden. Diese Integration von Grundelementen – Atomen – ist ein Molekül ein Skelett der gesamten Benutzeroberfläche.
Organismen. Es handelt sich um eine Gruppe von Molekülen, die einen separaten komplexen Abschnitt der Schnittstelle bilden. Organismen können ähnliche oder unterschiedliche Arten von Molekülen enthalten. Ein Seitentitel kann zum Beispiel aus verschiedenen Komponenten bestehen – einem Logo, dem Hauptmenü und einem Suchformular, während das Product-Grid ein Molekül darstellt (Produktbild, Name und Preis), das viele Male wiederholt wird.
Atomic Design ist eine großartige Struktur, die zeigt, welche Komponenten für verschiedene Teile der Website verwendet werden. Das verringert die Wahrscheinlichkeit von Code-Duplizierung und ermöglicht die Wiederverwendung einiger Atome der Website (z. B. Schriftarten, Blöcke usw.). Durch ihre Kombination können auch völlig neue Moleküle und Organismen geschaffen werden.
Mit Hilfe verschiedener von Ester Digital entworfener Funktionen hat Thespie seine Plattform erneuert und sie in eine hoch optimierte Website verwandelt, die Menschen zusammenbringt, ihr Leben während der Covid-Selbstisolation bereichert und talentierten Künstlern hilft, ihre Arbeit zu promoten.
