Case Study: memo-media Pt. 2

Teil 2/2: UI-Design, Betrieb & SEO

Im zweiten Teil unserer Case Study zum Eventbranchenverzeichnis von memo-media gehen wir detaillierter auf die praktischen Umsetzungen in den Bereichen Usability und Betrieb der Software ein.

Illustration von Softwarenentwicklern bei der arbeit

Redesign der GUI

  • Das User Interface von Startseite, Suchergebnisseite und Detailseite erhielt ein Redesign

  • Neues Navigationskonzept der Kategoriensuche: Unterkategorien der ersten Ebene werden direkt beim Klick auf die Hauptkategorie angezeigt. In der mobilen Ansicht gelangen Nutzer*innen mit dem Klick auf eine Hauptkategorie direkt auf die Suchergebnisseite. Statt Bildern wird nun eine neue Ikonographie für die Kategorievorschau genutzt. Dies sorgt für einen moderneren Webauftritt.

Screenshot der alten Website
Screenshot 1: Bisheriges Oberflächendesign der Startseite
Screenshot der neuen Benutzeroberfläche
Screenshot 2: Redesigntes UI
  • Andere Darstellung der Suchergebnisse: Anwender*innen können nun einfach zwischen den Kategorien (linke Sidebar) hin- und herspringen ohne den Suchkontext zu verlieren.

  • Durch eine Sortierungsoption kann nun erstmalig nach Relevanz und Bewertung sortiert werden.

  • Ortsnahe Anbieter werden zuerst angezeigt.

  • Der Suchradius kann durch einen Slider erweitert werden.

  • Ein “Back-To-Top”-Button bringt den Nutzer mit einem Klick zum Seitenanfang und erleichtert somit das Navigieren.

  • Die Kartenansicht ist durch eine Schaltfläche erreichbar und User haben die Möglichkeit zwischen einer Listen- und Kartenansicht umzuschalten.

Screenshot der Suchergebnisseite
Screenshot 3: Neues Interface der Suchergebnisseite (Listenansicht)
Screenshot der Kartenansicht
Screenshot 4: Kartenansicht (Desktop)
  • Anbieterseite/Detailseite: Aus den User-Tests wussten wir, dass Bilder für die Suchenden wichtig sind, um einen ersten Eindruck zu gewinnen. Daher platzierten wir die Bildergalerie gleich zu Anfang der Seite. Auch der Bewertungsbereich am Ende der Detailseite erhielt einen neuen visuellen Anstrich (siehe Screenshot 5).

Screenshot der Anbieterseite
Screenshot 5: Headeransicht einer Anbieterseite
Screenshot des Bewertungsbereich
Screenshot 6: Bewertungsbereich

Betrieb

Das Alt-System wurde auf einem in die Jahre gekommenen On-Premise-System betrieben. Von Beginn an wurde geplant, mehrere parallele Deployments zu nutzen. Da außerdem die Nutzung von externen Services (Geolocation, ML) nicht ausgeschlossen werden sollte, wurde ein Cloud-Offering als initiale Betriebsplatform gesetzt.

 

Im aktuellen Fall ist diese eine Kombination aus Cloud SQL (Postgres 13) und Google Cloud Run. Dieses Setup garantiert weiterhin, dass möglichen Lastspitzen bei vielen Anfragen durch das automatische Starten von weiteren Instanzen abgefangen werden, ohne dass das spätere Produktiv-Deployment nicht mehr erreichbar ist.

 

Wie in den meisten Projekten bei Inspired arbeiteten wir mit einem CI/CD-Setup. Dieses stellt den aktuellen Stand des Hauptentwicklungzweiges automatisiert in einem Dev-Deployment für alle im Projekt zur Verfügung. Außerdem bildet es die Basis der regelmäßigen Sprint-Reviews und ermöglichte uns auch in diesem Projekt wieder, frühzeitig Feedback zu erhalten und zeitnah umzusetzen.

Illustration von Servern

Da wir in der initialen Phase Alt-System und Neu-Entwicklung parallel betrieben, galt es auch hier eine Möglichkeit zu schaffen, die Daten in beiden Systemen aktuell zu halten.

 

Bis kurz vor der Live-Schaltung, war das Alt-System noch als treibendes System für Datenänderungen gesetzt. So wurde im Laufe der Umsetzung ebenfalls eine ETL-Pipeline erstellt, die mehrmals am Tag einen Snapshot der Daten vom Alt-System erstellt, diesen ensprechend der neuen Anforderungen des Neu-Systems umwandelt (Full-Text Index/Erstellung der Geo-Koordinaten/Normalisierung der Daten) und automatisiert in die Cloud-SQL-Instanz importiert. Das Ziel war, zu jedem Zeitpunkt Zugriff auf einen aktuellen, stabilen Entwicklungsstand zu haben.

 

Zum Zeitpunkt der Umsetzung des Produktiv-Deployment galt es nur noch, einen fixen Code-Stand zu definieren (prod-* tags). Von diesem wurde manuell jeweils ein Produktiv-Release auf ein identisches Googe-Cloud-Setup ausgerollt.

SEO-Optimierung

Ein Verzeichnis lebt zu einem großen Teil von der Platzierung eigener Links in der Suchergebnis-Seite von z.B. Google. Die Zielsetzung des Projektes war die Ablösung eines Alt-Systems, ohne Positionierung im Index globaler Suchmaschinen zu verlieren). In der Übergangsphase war deshalb besondere Sorgfalt notwendig.

Illustration einer SEO Agentur
  • Die initiale Entwicklung wurde in eine separate DEV-Umgebung deployed, die unter einer eigenen Domain erreichbar war. Das Altsystem lief unverändert weiter.

  • Während der gesamten Entwicklung wurde der aktuelle Entwicklungsstand durch ein externes SEO-Tool analysiert und kontinuierlich optimiert, um mindestens den gleichen Stand wie das Alt-System zu erreichen. Dies betraf insbesondere:

    • korrekter Inhalt von Meta-Tags auf den einzelnen Detail-Seiten

    • direkte Einstiegspunkte für spezielle Seiten (Listing für einen bestimmten Ort z.B. “in Köln”, Listing für bestimmte Kategorieren z.B. “Eventlocations” und Kategorien in einem bestimmten Ort – z.B. “Eventlocations in Köln”). Insbesondere mussten hier auch vom Alt-System bereits indizierte Links beachtet werden.

    • Diese Einstiegsseiten liefern neben der Suche mit Queries (per Suchbegriff, Ort, Umkreis) eine weitere Möglichkeit an die Suchergebnisse zu gelangen.

  • Nachdem die Analyse durch die SEO-Tools zu einem akzeptablen Ergebnis führte, wurde die Domain vom Alt-System auf ein produktives Deployment des neues Systems umgestellt.

  • Das neue System ist nun ein paar Monate online und das Resultat ist bislang:

    • Visibility der Seite in Suchergebnissen ist von 19 auf 28 gestiegen ↗.

    • Die Anzahl der Active Users ist um 60% gestiegen ↗.

Ausblick

  • Erstellen eines neuen Self-Service-Kunden-Portals, zur Registrierung von neuen Kunden und die Verwaltung von Einträgen, News, Events und Subscriptions.

  • Umbau des Adresspickers für einen späteren Zeitpunkt geplant. Hierzu sind weitere Konzeption und Planung nötig.

  • Optimierung der Darstellung von Suchergebnissen. Über die AI-Funktionen wie Google Vision (Link) können wir Tags über den Inhalt von Bildern generieren und diese dann sowohl dem Suchindex zuordnen, als auch bei der Anzeige der Suchergebnisse passendere Bilder präsentieren. Erste Tests hierfür sind vielversprechend:

 

Screenshot der Google Vision API
Screenshot 7: Tag-Ausgabe der Google Vision API

Links & further reading:

Passende Inspired Stories:

Sophie Rauhut

Sophie Rauhut

Sophie arbeitet als UX Designerin bei Inspired Consulting. Sie unterstützt und begleitet die Kunden in der Konzeption und Realisierung von digitalen Produkten. Um die Feebackschleife kurz zu halten, setzt sie dabei auf klickbare Prototypen und zeitnahe Verprobung durch User-Tests.

Philipp Haußleiter

Philipp Haußleiter

Philipp ist IT-Consultant bei Inspired und Mit-Gründer von Connected Streams. Neben der Konzeption und der Entwicklung von verteilten Anwendungen liegen seine weiteren Schwerpunkte auf dem Entwurf und dem Setup von Umgebungen für Continuous Integration und Delivery und auf IT-Infrastrukturen.

Kürzliche Posts

Elixir

Code BEAM Europe 2023

Last month we attended Code BEAM Europe, a conference centered around programming languages that run on the BEAM virtual machine

Read More »
Projekte

Case Study: WSAM ProDu

Die Wärtsilä SAM Electronics GmbH (WSAM) aus Hamburg ist spezialisiert auf die Konstruktion, Montage, Verkabelung und Inbetriebnahme von komplexen elektrischen

Read More »