Basler AG

Crafting a cutting-edge Web Experiencefor the Leader in Machine Vision

The Basler web platform with a modern interface, clear typography and animated transitions. | Hypercode, Digital Product Studio, Cologne

Basler AG is a global leader in industrial cameras and machine vision solutions. Based in Ahrensburg, the company develops and sells high-quality hardware and software used worldwide in industrial automation, research and quality assurance. Technological excellence, product quality and a spirit of innovation define Basler, and its digital presence reflects these values.

Hypercode worked closely with the Basler team to redesign the information architecture and user experience of its global web platform, develop key applications further and build a modular design system. The resulting platform structures complex content clearly, makes the extensive product range easy to explore and supports Basler’s position as a technology leader, with room to grow.

Visit the Basler website
The Basler online shop, from the basket and checkout to the customer account. Hypercode’s UX/UI design brings the purchasing and account management steps together in a clear interface. | Hypercode, Digital Product Studio, Cologne
Product cards for Basler’s industrial cameras, lenses, frame grabbers, software and AI tools, designed by Hypercode to present the range clearly. | Hypercode, Digital Product Studio, Cologne

A modular design system

Rethinking Basler’s web platform meant reviewing its content, navigation paths and technical entry points. An iterative process of requirements analysis, wireframing and design exploration led to a clear information architecture and design that serve the needs of technical specialists, procurement teams, developers and decision-makers alike.

The new structure helps people find their way without losing technical depth. Its interface components are modular and can be combined and reused across different contexts. The design system provides the visual and functional foundation for all Basler web applications, from detailed product pages and search to the basket, checkout and customer account. Every component is fully responsive, adapting to different screen sizes and ways of using the site.

Screens from the Basler component handbook created during the design phase, showing colors, grids, header structures, component states and checkout elements. | Hypercode, Digital Product Studio, Cologne
Account and basket widgets from the Basler web platform, with personalized areas and shopping features in an interface developed by Hypercode. | Hypercode, Digital Product Studio, Cologne
Components, layouts and design elements from the Basler Storybook, documenting the UI library developed by Hypercode and the consistency of the design system. | Hypercode, Digital Product Studio, Cologne

Technologies

At the heart of the implementation was translating the design system into a component-based frontend architecture. We developed the “Basler Components Library”, a standalone Vue.js UI library maintained with versioned releases and distributed through a private npm registry. It gives each project and integration team a shared basis for building consistent, accessible and maintainable frontends.

The library includes buttons, grids and forms alongside more complex components for filters, text, tables, media, configurators and structured content layouts. These are documented interactively in Storybook. Our frontend development focused on semantic HTML, stable interfaces and maintainability, as well as responsive behavior, accessibility and performance.

Alongside product information, the Basler website offers an international B2B shop with an integrated customer account. We designed and built the frontends for key parts of this experience, including a Nuxt.js application. Close collaboration with Basler, and the combination of UX, design and frontend development within our team, created a platform that performs well and can evolve across the company’s digital touchpoints.

  • Logo of Figma
  • Logo of Storybook
  • Logo of Vue.js
  • Logo of Nuxt
  • Logo of GraphQL
  • Logo of Contentful
Working in partnership with Hypercode, we developed a scalable design system that highlights our capacity for innovation and our technological strength in computer vision.We appreciate Hypercode’s consistently customer-focused approach: they translate our strategic requirements into excellent frontend solutions that always put users at the centre.
Anke Wübbelmann, Executive Director Digital & Communications
Basler AG