Für offizielle Dokumente wie Führerscheine, Geburtsurkunden oder Arbeitsverträge werden bei Ein- oder Auswanderung, Reisen und vielen anderen Anlässen beglaubigte Übersetzungen benötigt. Genau hier kommt lingoking ins Spiel: Das Unternehmen hilft Menschen, notwendige Übersetzungen für Behörden zu identifizieren und anschließend bequem und schnell über eine benutzerfreundliche Online-Plattform zu bestellen.
lingoking kam mit einer relativ offenen Challenge auf uns: Das Markenprofil und der Online-Auftritt sollten nach Entwicklung einer neuen strategischen Geschäftsausrichtung geschärft und modernisiert werden. In einem ersten Design Sprint erarbeiteten wir deshalb nicht nur die neue Website-Architektur, sondern erarbeiteten auch eine neue Markenpositionierung.
- Gesamtkonzept
- Markenstrategie
- User Experience Design
- User Interface Design
- Illustrationen
- Content-Strategie
Technisches Konzept & Development
lingoking hat sich aus unternehmerischer Sicht dazu entschieden, den Fokus künftig auf beglaubigte Übersetzungen zu legen. Durch diese strategische Neuausrichtung änderten sich auch die Bedürfnisse der Zielgruppen auf der bestehenden Website von lingoking. Denn Personen, die beglaubigte Übersetzungen benötigen, haben meist eine Herausforderung: Sie wissen nicht, wo sie anfangen sollen. Was brauche ich, wenn ich in Deutschland Autofahren möchte? Müssen Abschlüsse und Zertifikate übersetzt und beglaubigt werden, wenn ich in Deutschland arbeiten möchte? Im Vordergrund der Konzeption der neuen Website stand also auf Basis der neuen Markenstrategie eine bedürfnis- und anlassorientierte Produktsuche. Diese gibt Nutzern und Nutzerinnen eine schnelle Übersicht über das Angebot von lingoking. Über einen Shop-ähnlichen Checkout-Prozess können die Übersetzungen dann individuell konfiguriert und bestellt werden.
Aber nicht nur im B2C-Bereich werden beglaubigte Übersetzungen benötigt, sondern auch in Unternehmen, Kanzleien, Agenturen, HR-Abteilungen, etc. Für diese sogenannten "Power User" schufen wir einen übersichtlichen Login-Bereich, in welchem mehrere Übersetzungen gleichzeitig verwaltet und bearbeitet werden können.
Nach der Bestellung einer Übersetzung haben User im Login-Bereich volle Kontrolle über ihre Aufträge. Sie können Bestellungen einsehen, benötigte Dokumente hochladen, die gelieferten Übersetzungen herunterladen und freigeben sowie den aktuellen Projektstatus überwachen. Für Rückfragen steht eine praktische Chatfunktion zur direkten Kommunikation mit den Übersetzern zur Verfügung.
Als wir das Team von lingoking zum ersten Mal trafen, wurde uns sofort klar: Dieses Unternehmen besitzt einen einzigartigen Spirit und beeindruckenden Ehrgeiz. Ihre Werte – Nahbarkeit, Transparenz und Freude am Produkt – spiegeln sich in einem modernen, mutigen und frischen UI wider. Komplexe Übersetzungsservices wie Apostillen und Bankdokumente werden durch individuell gestaltete Icons spielerisch visualisiert und damit greifbarer gemacht.
Zur Abrundung des visuellen Erscheinungsbildes und zur Verbesserung der Benutzerinteraktion wurden kleine CSS-Animationen implementiert. Diese Animationen sorgen für eine ansprechende und dynamische Nutzererfahrung, ohne die Performance der Seite zu beeinträchtigen. Sie verleihen der Website eine moderne und professionelle Anmutung und tragen dazu bei, dass die Interaktion mit der Seite intuitiver und angenehmer wird.
Da auch lingoking ein eigenes Inhouse-Entwicklerteam hat, entschieden wir uns, die Produktentwicklung als gemeinsames Projekt anzugehen. Schnell formierten wir zusammen mit dem Kunden ein agiles Projekt-Setup und arbeiteten im Sprint-Verfahren Hand in Hand. Dabei teilten wir unser gebündeltes Know-how. Während das lingoking-Team sich auf die technische Umsetzung des internen Bereichs konzentrierte, übernahm Format D die Konzeption des UX- und UI-Designs. Zudem entwickelten wir den öffentlichen Bereich mit NEOS und integrierten die dazugehörigen Komponenten. Des Weiteren unterstützten wir lingoking bei der Strukturierung des Contents auf der Website, sowie bei der Pflege in NEOS.
Durch die Kombination dieser Technologien konnte eine leistungsstarke, flexible und visuell ansprechende Website realisiert werden, die sowohl den Anforderungen des Kunden als auch den Erwartungen der Nutzer gerecht wird.
Für die Gestaltung und Verwaltung der Inhalte wurde NEOS als Content-Management-System (CMS) verwendet. NEOS bietet eine flexible Plattform zur Erstellung und Pflege von Inhalten, die sich optimal an individuelle Anforderungen anpassen lässt. Um die Corporate Identity (CI) des Projekts zu wahren, wurde ein eigenes Design-System entwickelt. Dieses ist vollständig in NEOS integriert und ermöglicht eine konsistente Darstellung aller Inhalte im Einklang mit den CI-Richtlinien. Durch die flexible Gestaltung können Inhalte effizient erstellt und angepasst werden, was sowohl die Benutzerfreundlichkeit als auch die Wartbarkeit der Website erheblich verbessert.
Für die Entwicklung der Vue.js Plugins wurde zusätzlich PrimeVue, eine UI Component Library für Vue.js, integriert. PrimeVue bietet eine Vielzahl vorgefertigter, hochfunktionaler UI-Komponenten, die eine schnelle und effiziente Entwicklung ermöglichen. Diese Komponenten wurden bereits im Login-Bereich von lingoking erfolgreich eingesetzt und haben sich dort bewährt. Durch die Kombination von PrimeVue mit Tailwind CSS, einem leistungsstarken CSS-Framework, konnten die Komponenten stilistisch an das bestehende Design-System angepasst und erweitert werden. Tailwind CSS ermöglicht eine einfache und konsistente Gestaltung, wodurch die visuelle Kohärenz der Website weiter gestärkt wird.
Zur Verbesserung der Benutzererfahrung bei der Produkt-Suche auf der Startseite, der Produkt-Übersicht und der Blog-Seite wurden spezialisierte Vue.js Plugins entwickelt. Diese Plugins ermöglichen eine performante Filterung der angezeigten Produkte und Blogeinträge, wodurch die Ladezeiten minimiert und die Interaktivität der Seite maximiert werden. Die Nutzer können somit schnell und effizient die gewünschten Informationen finden. Das erhöht die Zufriedenheit und Verweildauer auf der Website.
