Das Dokument beschreibt einen User-Centered-Design-Prozess zur Neugestaltung der Website von Endress+Hauser, wobei Wireframes in verschiedenen Entwicklungsphasen erstellt wurden, um Benutzerfeedback zu integrieren und Managemententscheidungen zu unterstützen. Die Methodik beinhaltete grobe und detaillierte Wireframes, die in Fokusgruppen diskutiert wurden, was zu einem finalen Design führte. Der Projektleiter hebt die Vorteile der frühen Einbeziehung aller Stakeholder hervor, um Anpassungen in späteren Phasen zu minimieren.

1. Case Study
Wireframe-Erstellung
für Endress+Hauser
© eResult GmbH – Results for Your E-Business
(www.eresult.de)

2. Seite
Überblick dieses Projektes
● Konzeption der neuen Website eingebettet in einen User-Centered-Design
Prozess im Hinblick auf den internationalen Relaunch.
● Erarbeitung zentraler Seitentypen als Grundlage für eine nutzergerechte
Websitegestaltung
Kernfragen (Auszug):
● Abstimmung der zentralen Seiten mit der Geschäftsführung
● Welche Inhalte sind dem Nutzer wichtig?
● Sind diese als Nutzersicht gut und erwartungskonform angeordnet?
● Welche Ergänzungen oder Verbesserungsvorschläge gibt es?
Überblick
2 Case-Study Wireframe-Erstellung

3. Seite
Nächstes Kapitel
Methodik
3 Case-Study Wireframe-Erstellung

4. Seite
Projektüberblick
Methodik
4 Case-Study Wireframe-Erstellung
Festlegung der neu zu konzipierenden Seiten
1. Konzeptionsphase
(einfache Wireframes)
Feedback und Feindefinition Inhalte
2. Konzeptionsphase
(ausgestaltete Wireframes)

5. Seite
1. Konzeptionsphase – Die grobe Aufteilung der Seite
Methodik
5 Case-Study Wireframe-Erstellung5
● Die Gestaltung des Headers
war schon zu Beginn recht
klar.
● Beim Content sollte ein
großes Visual eingesetzt
werden.
● Für die weiteren Inhalte
wurden verschiedene
Spaltenkonzepte
ausprobiert.

6. Seite
2. Konzeptionsphase – Die genauere Ausgestaltung
Methodik
6 Case-Study Wireframe-Erstellung6
● Weitere Informationen kamen
hinzu, jedes Element wurde
einzeln betrachtet und verfeinert.
● Überschriften, Button, und Links
sowie Multimedia-Elemente
werden unterschieden.
● Der Aufbau konnte in
Fokusgruppen diskutiert und
angepasst werden.

7. Seite
Was geschah danach?
Methodik
7 Case-Study Wireframe-Erstellung7
Erarbeiten der Inhalte (Texte) bei E+H
(einpflegen in CMS)
Bereitstellen der Wireframes an den Dienstleister,
der mit der technischen Umsetzung betraut war
Ergänzung des finalen neuen Designs

8. Seite
Nächstes Kapitel
Ergebnisse
Was hat Endress+Hauser von der Vorgehensweise?
8 Case-Study Wireframe-Erstellung

9. Seite
Vorteile durch die Erstellung Wireframes in der frühen Phase
 Frühe Einbeziehung des Managements zur Freigabe der grundsätzlichen
Stoßrichtung
 Schlanke Erstellung der Varianten zum Durchspielen mehrerer
Szenarien/Konzepte – bevor es an die Duplizierung geht (Content zu
zahlreichen Seiten muss neu aufbereitet werden)
 Einbeziehung der Nutzer in einer sehr frühen Phase zum Abgleich der
Erwartungen und Ansprüche an die neue Website
 Weniger Anpassungen in den weiteren Entwicklungsphasen – Stück für
Stück entwickelte sich die Seite bis zum finalen Design
Ergebnisse
9 Case-Study Wireframe-Erstellung

10. Seite
Nächstes Kapitel
Referenzen
10 Case-Study Wireframe-Erstellung

11. Seite
Das sagt der Projektleiter auf Kundenseite
„Der internationale Relaunch war ein großes Stück Arbeit für uns!
Gerade am Anfang hat es uns sehr geholfen, durch einfache Wireframes
wichtige Entscheidungen zu treffen – auch im höheren Management!
eResult hat uns in dem gesamten Prozess begleitet, so dass wir
gemeinsam neue Stufen der Verfeinerung vorgenommen haben –
Mitarbeiter von uns gemeinsam mit den Konzeptions-Experten. Unsere
Kunden haben wir punktuell mit ins Boot geholt und Entwürfe in
Fokusgruppen diskutiert.
Mit dem finalen Ergebnis sind wir sehr zufrieden und wissen nun, dass
diese systematische Vorgehensweise richtig war!“
Eugen Chiorean, Endress+Hauser
Referenzen
11 Case-Study Wireframe-Erstellung

12. Seite
Unsere Referenzen für Onsite-Befragungen (Auszug)
Handel
● Koch, Neff & Volkmar GmbH
(Buchkatalog.de)
Pharma und Gesundheit
● Otto Bock HealthCare GmbH
Referenzen
12
Industrie
● EurotaxSchwacke GmbH
● Knauf Gips KG
Wissenschaft
● Technische Informationsbibliothek (TIB)
Case-Study Wireframe-Erstellung

13. Seite
Nächstes Kapitel
Kontakt
Ansprechpartner eResult
13 Case-Study Wireframe-Erstellung

14. Seite
Thorsten Wilhelm
Geschäftsführender Gesellschafter
& Gründer
 +49 551 5177-426
 thorsten.wilhelm@eresult.de
Ihre Ansprechpartner für diese Studie
Kontaktdaten
14 Case-Study Wireframe-Erstellung
Standort Hamburg
Elbchaussee 13
22765 Hamburg
 +49 40 36166-7981
Büro Göttingen
Planckstraße 23
37073 Göttingen
 +49 551 49569-331
 +49 551 49569-330
Standort Frankfurt
Uhlandstraße 58
60314 Frankfurt / Main
 +49 69 1339-4274
Website: www.eresult.de Themenblog: www.usabilityblog.de
Standort Köln
Hohenstaufenring 29-37
50674 Köln
 +49 221 4675-8951
Anja Weitemeyer
Managing Partner &
Senior UX-Consultant
 +49 40 36166-7982
 anja.weitemeyer@eresult.de