Basler AG
Crafting a cutting-edge Web Experiencefor the Leader in Machine Vision
Die Basler AG ist ein weltweit führender Anbieter von Industriekameras und Bildverarbeitungslösungen. Das Unternehmen mit Hauptsitz in Ahrensburg entwickelt und vertreibt hochwertige Hard- und Software im Bereich des maschinellen Sehens, die weltweit in der industriellen Automation, Forschung und Qualitätssicherung eingesetzt werden. Basler steht für technologische Exzellenz, hohe Produktqualität und Innovationsgeist – Werte, die sich auch im digitalen Auftritt des Unternehmens widerspiegeln.
Hypercode hat in enger Zusammenarbeit mit dem Basler-Team die Informationsarchitektur und User Experience der globalen Web-Plattform neu gestaltet, zentrale Anwendungen weiterentwickelt und ein leistungsfähiges, modulares Design-System aufgebaut. Entstanden ist eine zukunftsfähige, digitale Plattform, die komplexe Inhalte klar strukturiert, das umfangreiche Produktportfolio intuitiv präsentiert und die Positionierung von Basler als technologischen Marktführer stärkt.
A modular design system
Für die Neuausrichtung der Basler Web-Plattform wurden bestehende Inhalte, Navigationspfade und technische Einstiegspunkte grundlegend überarbeitet. Durch einen iterativen Prozess aus Anforderungsanalyse, Wireframing und Design-Exploration ergab sich eine zielführende Informationsarchitektur und klare Gestaltung, die unterschiedliche Zielgruppen gleichermaßen ansprechen – von Technik und Einkauf bis zu Entwicklung und Entscheidungsebene.
Das Ergebnis ist eine digitale Struktur, die Orientierung schafft, ohne technische Tiefe einzubüßen. Dafür wurden die Interface-Komponenten so konzipiert, dass sie modular aufgebaut, kontextübergreifend kombinierbar und in verschiedenen Anwendungsszenarien flexibel einsetzbar sind. Das entstandene Design-System bildet die visuelle und funktionale Grundlage für alle Web-Anwendungen von Basler: Von detaillierten Produkt-Landingpages über die Suche, den Warenkorb und Checkout bis hin zum Kundenkonto. Alle Komponenten sind vollständig responsiv und passen sich nahtlos an verschiedene Bildschirmgrößen und Nutzungsszenarien an.
Technologies
Das zentrale Element der technischen Umsetzung war die Überführung des Design-Systems in eine komponentengestützte Frontend-Architektur. Hypercode entwickelte hierfür die „Basler Components Library" – eine eigenständige UI-Bibliothek auf Basis von Vue.js, die versioniert gepflegt und über eine private npm-Registry bereitgestellt wird. Sie ermöglicht eine konsistente, zugängliche und wartbare Umsetzung aller Frontends – unabhängig vom jeweiligen Projekt oder Integrationsteam.
Die Library umfasst neben Basiselementen wie Buttons, Grids und Formularen auch komplexe UI-Komponenten für Filter, Text- und Tabellendarstellungen, Medieninhalte, Konfiguratoren und strukturierte Inhaltslayouts, die via Storybook interaktiv dokumentiert werden. Bei der Frontend-Entwicklung wurde großer Wert auf semantisches HTML, beständige Schnittstellen und Wartbarkeit sowie auf responsives Verhalten, Barrierefreiheit und Performance gelegt.
Die Basler-Website fungiert nicht nur als Informationsplattform, sondern auch als internationaler B2B-Shop mit integriertem Kundenkonto. Hypercode verantwortete hierfür das Design und die Frontend-Umsetzung wesentlicher Anwendungsteile, unter anderem in einer Nuxt.js-Anwendung. Durch den engen Austausch mit dem Basler-Team und die Verzahnung von User Experience, Design und Frontend-Entwicklung bei Hypercode entstand eine leistungsfähige, erweiterbare und zukunftssichere Plattform für alle digitalen Touchpoints des Unternehmens.
Mobile-App-Entwicklung mit Figma
Mobile-App-Entwicklung mit Storybook
Mobile-App-Entwicklung mit Vue.js
Mobile-App-Entwicklung mit Nuxt
Mobile-App-Entwicklung mit GraphQL
Mobile-App-Entwicklung mit Contentful