Diese Präsentation entstand im Rahmen des 12. TANNER-Hochschulwettbewerbs, der 2018 mit dem Industriepartner Häfele GmbH & Co KG durchgeführt wurde. Marco Kühle und Patrick Swierdowski von der FH Südwestfalen haben folgende Aufgabe bearbeitet: „Konzipieren Sie ein Informationsprodukt für ein flexibel einsetzbares LED-Beleuchtungssystem in Form eines Videos, einer Online-Anleitung, einer Präsentation oder eine App.“ Mehr Informationen zum TANNER-Hochschulwettbewerb: www.tanner.de/archiv-hochschulwettbewerb

1. © 2014TANNER AG © 2017 vertraulich | Folie 3
Team Kühle von der Fachhochschule Südwestfalen
Marco Kühle
Patrick Swierdowski
12. TANNER-Hochschulwettbewerb
für Technische Dokumentation

3. Die TANNER AG ist Dienstleister für Technikkommunikation:
- Interesse an den angewandten Methoden zur Durchführung
des Projekts
- Interesse an Innovationen in der Dokumentationsbranche
Häfele entwickelt und produziert Beschlagtechnik und
elektronische Schließsysteme :
- Interesse einer innovativen Lösung eines Firmeninternen
Problems : Fehlbestellungen und Reklamationen
Team Kühle/Swierdowski:
- Anforderungen von Tanner und Häfele unter der
Berücksichtigung individueller Interessen erfüllen
- FH-SWF Soest mit einer innovativen Lösung repräsentieren

4. „Konzentrieren Sie sich darauf, die Einflussparameter vorzustellen, die bei der
Planung zu beachten sind und wie sich diese Parameter gegenseitig
beeinflussen.
Zeigen Sie in einem zweiten Schritt dieZeigen Sie in einem zweiten Schritt die
Parameter für das LED-Band 2043 auf und unterstützen Sie bei der konkreten
Auswahl der benötigten Komponenten. „
„Produzieren Sie das Informationsprodukt nicht nur für
das Smartphone sondern, soweit dies möglich ist, auch auf dem
Smartphone.“
Zielgruppe: Schreiner & Möbeldesigner

5. Unsere Ziele für HÄFELE
Aufgabe Indiz Lösung
Den Kunden über das
Produkt informieren und
ihn dafür Begeistern
„Schreiner [...], die Mit
LED-Bändern noch nie
gearbeitet haben.
Video mit Teasing-
Funktion:
60-Sekunden Video einer
Installation
Dem Kunden eine
fehlerlose Bestellung
ermöglichen
„[...] falsche Bestellungen
oder Reklamationen
vermeiden.“
Innovatives HTML-
Bestelltool
Dem Kunden eine
makellose Installation
ermöglichen
„[...] Reklamationen
vermeiden.“
Installationsanleitung
+ (Innovatives HTML-
Bestelltool )

6. Lösung: Kombination von 3 Lösungen
1. Beginnend bei der Erzeugung von Begeisterung des Produkts, durch Einfachheit
der Installation.
2. Fortgesetzt bei der Bestellung, die nicht komplizierter, als das Video sein darf.2. Fortgesetzt bei der Bestellung, die nicht komplizierter, als das Video sein darf.
3. Endend bei einer ebenso einfachen Installation.
Alle 3 Medien dürfen den Kunden nicht überfordern, unter einer gleichzeitigen
Vermittlung von hoher Qualität und Zeitersparnis bei der Installation des LED-
Bandes.
Entscheidend sind hierfür der zu rezipierende Inhalt und die Funktions-Logik der
gewählten Medien.

7. Wie kann unsere Lösung eingebettet
werden:
► Einbettung aller unserer
Medien in diesen Kasten
► Seite kann ihr Design behalten

8. Lösung: Video
☑ Optimiert für alle Endgeräte
☑ Einbettung auf Häfele.de und dem Häfele YouTube-Kanal möglich
☑ Auf Endgeräten speicherbar (sofern auf Häfele.de zur Verfügung gestellt)
Was es leistet:
• Die Installation des LED-Bandes in einfachster Weise, schnell darstellen.
• Mobile Kurzanleitung auf Abruf für die Hosentasche.
Effekt: Teasing
► Den Kunden durch die Einfachheit der Installation für das Produkt begeistern
und somit Zweifel und Hemmnisse aus dem Weg räumen

9. Lösung: HTML-Bestelltool
☑ Optimiert für alle Endgeräte mit Webbrowsern
☑ Einbettung auf Häfele.de möglich
☑ Volle anpassung an die HÄFELE Corporate Identity (besonders: Nutzung von .css)
☑ Lösung des Kundenproblems durch Nutzung von HTML-Funktionen
☑ Onlineshop Anbindung
☑ KEINE PROBLEME BEI BESTELLUNGEN MEHR
☑ Günstige Realisierung: Einbettung in die Website oder als eigenes Tool☑ Günstige Realisierung: Einbettung in die Website oder als eigenes Tool
Was es leistet:
• Unterstützung des Kunden bei der LED-Band bestellung:
-Auswahl des richtigen Netzteils durch Eingabe der Parameter in 50mm Schritten
-Einhaltung von Einzelband- und Gesamtbandlängen
-Auswahl des „Pflicht“-Zubehörs
-Individualisierung des LED-Band Anwendungszwecks per extra Zubehör

10. Lösung: HTML-Bestelltool
Aufgabe HTML-Lösung
Eingabe der Parameter in 50mm Schritten Slider mit Stepvalue 50
(entsprechend 50mm)
Einhaltung von Einzelband- und
Gesamtbandlängen
Maximale Sliderlänge von 5000 mm
(entsprechend der max. Einzelbandlänge)
Auswahl des richtigen Netzteils Abfrage von Sliderwerten, entsprechendeAuswahl des richtigen Netzteils Abfrage von Sliderwerten, entsprechende
Netzteilzuweisung im Ausgabefenster
(mittels IF-AND-Bedingungen)
Auswahl des „Pflicht“-Zubehörs Blockierter Bestellbutton bei
unvollständiger Auswahl incl. Hinweis auf
auszufüllende Kategorien
Individualisierung des LED-Band
Anwendungszwecks per extra Zubehör
Zubehörauswahl per Auswahlfeld mit
definierten Optionen (Select-Option)

11. Lösung: Installationsanleitung
☑ Optimiert für alle Endgeräte mit .pdf Readern
☑ Einbettung auf Häfele.de möglich
☑ Volle anpassung an die HÄFELE Corporate Identity
☑ Speicherbar und jederzeit mobil abrufbar
Was sie leistet:
• Unterstützung des Kunden bei der LED-Band Installation:
- Bestellungsüberprüfung
- Fachgerechte Montage
- Ausräumung letzter Zweifel ggü. der Montage (daher jederzeit auf Häfele.de
einsehbar)

12. Lösungen: Ausblick für die Zukunft
Lösung Aktualisierung Anwendung auf andere
Produkte
Video Vorgefertigte Elemente können
jederzeit in AfterEffects
ausgetauscht und aktualisiert
Vorgefertigte Elemente
können jederzeit in
AfterEffects ersetztausgetauscht und aktualisiert
werden
AfterEffects ersetzt
werden.
HTML-Bestelltool Wartung und aktualisierung
durch bereits beauftragtes IT-
Personal
Änderung von Parametern
und Select-Optionen
Installationsanleitung Wartung und aktualisierung
jederzeit im InDesign-Projekt
möglich
InDesign-Projekt
Individualisierung möglich

13. Das Problem mit dem Smartphone
Weebly, Jimdo Creator, Apper, openasapp, CREATE YOUR OWN APP,
Micrsoft Word für Android, PDF Creator
Keine dieser Apps entsprach vollständig unseren und
somit auch den Firmen-Anforderungen:
Einhaltung der Häfele-Corporate Identity ist nur durch die Nutzung von
CascadingStyleSheets (.css) möglich – keine Handyapp unterstützt
diese.
JavaScript ist ebenfalls nicht Nutzbar – ebenfalls unterstützt dies keine
Handyapp

14. Das Problem mit dem Smartphone
Die App Branche ist noch nicht soweit, professionelle bzw. fürDie App Branche ist noch nicht soweit, professionelle bzw. für
Firmen benötigte Desktop Anwendungen in den mobilen Sektor
zu verlagern.
Wir müssen uns somit an bereits etablierten Methoden
bedienen.

15. Das Problem mit dem Smartphone
Adobe Dreamweaver für die Programmierung der Webseite
- Nutzung von Bootstrap 4.0 zur Auflösungs-dynamischen Darstellung- Nutzung von Bootstrap 4.0 zur Auflösungs-dynamischen Darstellung
unseres HTML-Tools (.css & .js)
- Simple-Slider-Fluid by ninjacode.github.com
Adobe AfterEffects & Sony Alpha 6000 zur Erstellung des Videos
Adobe InDesign für Erstellung der Installationsanleitung

16. Unser Vorgehen
1.
• Brainstorming: Welche Anforderungen müssen wir erfüllen?
• Brainstorming: Welche Medien wären sinnvoll?• Brainstorming: Welche Medien wären sinnvoll?
• Brainstorming: Wie lässt sich das Ergebnis realisieren (effektiv + günstig)
• Recherche: Welche Werkzeuge und Apps gibt es dafür?
2.
• Hands-On Erfahrungen: Aufbau und Nutzung?
• Eigenrecherche zum LED-Band Loox 2043 auf häfele.de

17. Unser Vorgehen
• Erste Skizzen für Webseite und Installationsanleitung erstellt• Erste Skizzen für Webseite und Installationsanleitung erstellt
• Drehbuch für Video erstellt
• Skizzen für Fotos der Installationsanleitung erstellt
• Durchführung
∞
Stetige Re-evaluation von bereits geleistetem und der Stakeholder
Erwartungen, sowie Korrespondenz mit unseren Stakeholdern.

18. Weitere Probleme
- Keine HTML, CSS oder JavaScript Kenntnisse vor dem Projekt
- Begrenzte Zeit + Prüfungszeitraum an der FH-SWF- Begrenzte Zeit + Prüfungszeitraum an der FH-SWF
- Typische Adobe Probleme bei Amateuren
- Verwerfen von guten Ideen aufgrund von besseren Ideen führt zu Zeitverlust
- Apps leisten nicht das, was Sie versprechen (OPENASAPP)

19. Unsere Lösungen:

20. Wie das HTML-Bestelltool aussehen
sollte:

21. „Wir geben Impulse“