HEERO Motors: Electric Vehicle Website Redesign | Framer

👉 Check out the live website here 👈

HEERO Motors, a German electric mobility manufacturer specializing in minibuses and commercial EV solutions, approached me to rebuild their entire digital presence. Their existing platform didn’t reflect the scale of the company, lacked structure, and made content management extremely difficult. The goal was to create a modern, scalable website that communicated HEERO’s ecosystem clearly while improving user navigation, SEO, and lead conversion.

In addition to the website, I also developed a custom AI chatbot widget integrated with an n8n backend to automate assistance, answer questions, and handle lead capture.

This case study outlines the strategy, UX decisions, challenges, and technical systems behind the final platform.

When the project began, HEERO Motors did not have Figma designs, wireframes, finalized copy, or a clear website structure. Instead, I received a raw site outline and a large Miro board containing hundreds of disorganized images—mostly in German—without hierarchy or explanations. Many key pages had no content at all.

At the same time, the client needed:

A flexible system where their team could create pages independently

A unified brand experience across dozens of potential pages

A UX flow that supports very different audiences: businesses, municipalities, fleet operators, and private buyers

A technical foundation strong enough to scale as the company grows

The challenge was not only building a website but also designing the ecosystem, information architecture, and content strategy from the ground up.

With the initial chaos of assets and requirements, the first step was to build a clean, scalable structure that could grow with HEERO’s future offerings.

I created a modern architecture centered on four pillars—Products, Solutions, Services, and Explore—each backed by custom CMS collections. This transformed the website from static pages into a flexible, modular system that HEERO can expand without additional development costs.

This approach also allowed me to unify the UX and structure across dozens of future pages while ensuring that every piece of content aligns with HEERO’s brand and business goals.

The new HEERO Motors website was designed to clearly communicate who the company serves, what problems it solves, and how its ecosystem works.

The homepage became a strategic entry point:

Clear messaging about HEERO’s mission

Direct pathways to solutions, products, and services

Visual explanations of value propositions

User journeys tailored to multiple customer segments

From here, users could navigate the website through goals, industries, locations, fleet sizes, or roles—an approach that reflects how real customers think, not how companies typically present information.

This use-case-driven navigation became a core part of the UX transformation.

A major part of the project was building a unified system behind the key offerings of HEERO Motors. Instead of designing pages individually, I designed content and layout systems.

Each product type can have multiple variants (new vehicle, conversion, retrofit, eDrive-only). I built a dynamic product page system where selecting a variant updates the gallery, hero image, technical data, and even the content blocks. This eliminates duplication and ensures consistency.

Solutions were redesigned as long-form, problem-driven pages that speak directly to user needs. Each solution page includes:

A clear problem framing

A detailed explanation of HEERO’s approach

Matching products and services

SEO-rich content sections

Conversion-oriented CTAs

By grouping solutions according to goals, industries, fleet size, customer roles, and usage locations, I made the platform much easier for visitors to understand.

All services and partner-related content are powered by a flexible CMS structure with conditional sections that show or hide based on purpose. HEERO can now add new services, partner networks, documents, or processes without technical help.

To enhance user engagement and automate support, I designed and implemented a custom GPT-powered chatbot widget for the website.

The widget includes:

A floating UI, always accessible

Branded styling matching HEERO’s identity

A dedicated backend built in n8n

Message routing to the correct AI agent

Lead capturing and automated follow-up workflows

The chatbot helps users navigate the site, understand products, explore solutions, and contact HEERO—reducing load on the customer support team and increasing conversion opportunities.

Throughout the project, I often received incomplete or non-final content. In several cases, pages had to be built in a way that looked complete even without real copy. To handle this, I created placeholder-ready structures and reusable content patterns so the website could look finished while still allowing HEERO to update pages internally later.

The scope also evolved significantly during development. What started as a small project eventually expanded into a large-scale ecosystem with multiple sub-systems, dozens of dynamic pages, and new features like the chatbot. Adapting to this expansion required strategic planning and continuous alignment with the client to keep the project realistic and deliverable.

The entire website was fully designed and developed for:

Desktop

Tablet

Large and small mobile screens

Low-weight animations, modular components, and optimized media were used to ensure that the website’s performance stays fast despite its complexity.

The final HEERO Motors website is modern, scalable, and capable of growing with the company for years. HEERO now has:

A structured digital ecosystem

A flexible CMS-powered content system

A professional UI across all major sections

Clear user journeys for businesses, municipalities, fleet operators, and private buyers

A custom AI chatbot that improves both support and conversion

A platform ready for upcoming product launches and expansions

This project was not just a redesign—it was a complete rebuild of the company’s digital identity and infrastructure.

The new platform gives HEERO Motors a strong digital foundation that supports:

Easier content management

Better SEO and clearer messaging

Higher-quality user flows

Automated assistance through AI

Faster onboarding of new products and services

A consistent brand experience across all touchpoints

HEERO now has a website that reflects their ambition and mission: driving the future of sustainable electric mobility.