Battenberg
Case Study

Battenberg

„“

Battenberg Robotic ist Erfinder und Pionier der Messrobotic und international anerkannt als Anbieter für hochpräzise Qualitätsbewertungen in der Automobil-, Medizin- und Luftfahrtindustrie. Dabei werden kognitive Systeme für effiziente Entwicklungen und flexible Fertigungen entwickelt, um die Produktqualität nach menschlichen Erwartungen produzieren zu können.

Direkt springen zu:

Informations-Architektur
Farbpalette
Schriften
Bildwelt
Design
Animation

Projektziel

Entwicklung einer neuen, modernen Website zur Darstellung der Produkt– und Servicepalette von Battenberg Robotic.

Erfolgskriterien

  • Einzigartiges und modernes Design, welches die klare Darstellung der Produkte und Lösungen unterstreicht. 
  • Hohe Benutzerfreundlichkeit und intuitive Navigation.
  • Positives Feedback des Fachpublikums zur Darstellung der Vorzüge der Produkt- und Servicepalette von Battenberg Robotic. 
  • Verbesserung der Online-Präsenz und Erhöhung der Besucherzahlen.

Durchgeführte Arbeiten

Konzeption (UX - User Experience)

  1. Erstellung von Personas und User Journeys, um die Zielgruppe und deren Bedürfnisse zu verstehen.
  2. Entwurf eines wireframe-basierten Layouts, das eine intuitive Navigation und Benutzerführung ermöglicht.
  3. Planung interaktiver Elemente, die die Benutzerbindung erhöhen.
  4. Gewährleistung der Zugänglichkeit und Benutzerfreundlichkeit für eine breite Nutzerbasis.

Design (UI - User Interface)

  1. Entwicklung eines einzigartigen visuellen Konzepts, das die Markenidentität von Battenberg Robotics verstärkt und die Produkte bestmöglich präsentiert.
  2. Gute Abstimmung der Farben und visuellen Elemente, um das professionelle Auftreten des Unternehmens zu unterstreichen.
  3. Verwendung von dynamischen Effekten, um die Website visuell von anderen Webseiten abzuheben. 
  4. Gestaltung eines kohärenten und ansprechenden Farbschemas und Typografie, die die Lesbarkeit und Ästhetik fördern.

Entwicklung auf Webflow

  1. Umsetzung des Designs in Webflow, unter Berücksichtigung der besten Praktiken für responsives und cross-browser-kompatibles Design.
  2. Integration von CMS-Funktionen, um die Verwaltung von Inhalten wie Anwendungsfälle, Branchen und Referenzen zu vereinfachen.
  3. Implementierung von SEO-optimierten Strukturen, um eine höhere Sichtbarkeit in Suchmaschinen zu gewährleisten.
  4. Sicherstellung, dass die Website schnell lädt und eine hohe Performance aufweist.

Projektzeitplan

  1. Konzeption und User Research (4 Wochen)
  2. Designentwicklung (3 Wochen)
  3. Entwicklung und Testing auf Webflow (6 Wochen)
  4. Launch und Feedback-Evaluation (3 Wochen)
Tablet Portrait Screenshot
Tablet Portrait Screenshot

Informations-Architektur

Die Architektur der Website ist das Herzstück. Wir haben uns mit Battenberg zusammen gesetzt und gemeinsam eine Struktur geschaffen, die sowohl den Ansprüchen an SEO als auch an die intuitive Benutzerführung gerecht wird.
Battenberg
Eine Unterseite in grober Wireframe-Darstellung
Battenberg
Finales Design der gleichen Unterseite
Battenberg
Konzeption in Form einer Wireframe-Sitemap. Hier werden Inhalte nur grob angerissen, aber es wird klar, an welcher Stelle welche Inhalte verortet werden.

Farbpalette

Die Palette der Battenberg-Farben zieht sich konsequent durch alle Elemente und Unterseiten.
Battenberg

Schriften

Die Schriftwahl orientiert sich am Corporate Design von Battenberg.
Battenberg
Battenberg

Bildwelt

Eingesetzt werden authentische und kreative Bildwelten, die den Innovationsgeist von Battenberg verkörpern. Der Fokus liegt auf dynamischen, visuell ansprechenden Elementen, um die Einzigartigkeit der Marke hervorzuheben.

Design

Ein Beispiel aus der finalen Gestaltung auf mobilen Geräten und auf Desktop.
Mobile View
Desktop-Darstellung
Mobile View
Mobile-Darstellung

Animation

Es war uns wichtig, dass sich die Battenberg-Website lebending anfühlt.