Case Study: Multi-Language Inputs
Disclaimer
Dieses Projekt unterliegt einer Vertraulichkeitsvereinbarung. Im Einklang mit diesen Vorgaben zeige ich hier abstrahierte Screens, nachgebaute Dummies sowie generische Funktionen wie z. B. das Editieren von Inhalten oder das Filtern von Daten. Detaillierte Informationen zu spezifischen Features, Prozessen oder unternehmensbezogenen Inhalten wurden entsprechend der jeweiligen Vereinbarung entfernt, anonymisiert oder bewusst allgemein gehalten.
Über das Projekt
Nach rund 20 Jahren kontinuierlicher Weiterentwicklung wurde die Event-Management-Software von EventClass vollständig neu konzipiert – nicht als rein technisches Redesign, sondern als strategischer Neustart mit Fokus auf Nutzererlebnis und langfristige Wartbarkeit. Zum ersten Mal stand dabei nicht das klassische Entwickler-getriebene Design („Dev-Design“) im Vordergrund, sondern eine durchdachte Informationsarchitektur, die sich konsequent an den Arbeitsabläufen von Veranstaltern und Organisatoren orientiert.
Statt Funktionalität auf Funktionalität zu stapeln, wurde das System modular und kontextsensitiv neu aufgebaut. Prozesse, die zuvor tief im System verborgen lagen oder schwer zugänglich waren, sind jetzt klar strukturiert und intuitiv auffindbar. Diese Neuausrichtung erlaubt nicht nur eine effizientere Bedienung, sondern auch eine deutlich bessere Skalierbarkeit für zukünftige Erweiterungen. Besonders im Eventbereich, wo Flexibilität und Übersicht entscheidend sind, setzt EventClass damit neue Maßstäbe.
Produktkategorie
Event-Management-Software (Desktop-fokussiert)
Aufgabenbereiche
User-Research, Usability-Audits, Informationsarchitektur, UX-Konzeption, Designsystem, UI-Design, Testing & Iteration, Icon-Entwicklung
Nutzergruppe
Fachanwender:innen im B2B-Kontext
Teamstruktur
1 Designerin + 8 Entwickler
Tools
Figma, Miro, Illustrator
Projektlaufzeit
1 Jahr 11 Monate
Ausgangssituation
In der ursprünglichen Version der Event-Management-Software von EventClass konnten Nutzer:innen zwischen verschiedenen Sprachversionen eines Formulars über ein Dropdown-Menü wechseln. Allerdings fehlte eine umfassende Unterstützung für den effizienten Umgang mit mehrsprachigen Inhalten: Nutzer:innen mussten ständig zwischen den Sprachversionen hin- und herschalten, um Eingaben zu vergleichen oder anzupassen. Zudem gab es keine visuelle Anzeige, die anzeigte, an welchen Stellen noch Übersetzungen fehlten – dies wurde erst beim Speichern bemerkt, was den Arbeitsprozess erheblich verlangsamt und fehleranfällig gemacht hat.
Alter Aufbau
Zuvor war die Auswahl der Sprache durch ein Dropdown-Menü realisiert, was die Benutzeroberfläche unnötig verkomplizierte und den Wechsel zwischen den Sprachen erschwerte. Die Dropdowns waren nicht sofort sichtbar und erforderten mehrere Klicks, um die gewünschte Sprache auszuwählen. Diese Art der Interaktion war nicht optimal, insbesondere für Benutzer, die häufig zwischen verschiedenen Sprachen wechseln mussten.
Neuer Aufbau
Um die Benutzerfreundlichkeit zu verbessern, habe ich die Dropdown-Menüs durch klar sichtbare und direkt zugängliche Sprachbuttons ersetzt. Diese Buttons sind sowohl oben auf der Seite als auch in jedem Multi-Language-Feld selbst integriert. Dadurch haben die Nutzer jederzeit die Möglichkeit, die Sprache entweder global über die obersten Buttons oder direkt in den jeweiligen Eingabefeldern zu wechseln. Sobald eine Sprache ausgewählt wird, wird sie sowohl in den Multi-Language-Feldern aktualisiert. Diese Lösung ermöglicht einen schnellen und nahtlosen Wechsel zwischen den Sprachen, ohne die Benutzerfreundlichkeit zu beeinträchtigen. Der Zugriff auf die Spracheinstellungen wurde somit deutlich vereinfacht und optimiert.
Gleichzeitige Eingabe der Sprachen
Bisher ermöglichte das Design nur das Wechseln einer Sprache gleichzeitig, was die Bearbeitung von Inhalten in mehreren Sprachen unübersichtlich und umständlich machte.
In der neuen Umsetzung öffnet sich beim Klick auf ein Multi-Language-Feld direkt an der gleichen Stelle im Formular eine Box, die die Eingabefelder für alle unterstützten Sprachen anzeigt. Diese Felder sind durch Flaggen visuell hervorgehoben, sodass der Wechsel zwischen den Sprachen schnell und intuitiv erfolgt. Nutzer können nun alle Sprachinhalte gleichzeitig bearbeiten, ohne die Ansicht wechseln zu müssen, was den gesamten Prozess deutlich übersichtlicher und benutzerfreundlicher gestaltet.
Automatisches Übersetzen
Im bisherigen Design gab es keine automatische Übersetzung, was den Nutzern viel manuelle Arbeit abverlangte, insbesondere wenn sie Inhalte in mehreren Sprachen eingeben wollten.
Im neuen Design erfolgt die automatische Übersetzung sofort, sobald ein Nutzer in eines der Felder etwas eingibt und eines der anderen Felder noch leer ist. Die Eingabe wird dann automatisch in die entsprechenden Felder der anderen Sprachen übertragen. Sollte die automatische Übersetzung nicht gewünscht sein, kann sie jederzeit verworfen werden, sodass der Nutzer die manuelle Bearbeitung übernehmen kann. Diese Funktion sorgt für eine schnellere und effizientere Eingabe, da Nutzer sofort eine Basisübersetzung erhalten, die bei Bedarf weiter angepasst werden kann.
Übersetzung erneut starten
Im Nachhinein kann die automatische Übersetzung jederzeit erneut gestartet werden, indem der entsprechende Button im Eingabefeld betätigt wird. Falls mehrere Sprachen verfügbar sind, kann hier auch die gewünschte Ausgangssprache ausgewählt werden, um die Übersetzung entsprechend anzupassen.
Fehleranzeige bei Eingabefehlern
Um sicherzustellen, dass keine Eingaben vergessen werden, habe ich eine direkte Fehleranzeige in die Auswahl der Sprache an den Eingabefeldern integriert. So werden Nutzer sofort darauf hingewiesen, wenn eine Eingabe fehlt oder fehlerhaft ist, und können dies direkt korrigieren, ohne den Überblick zu verlieren.