Case study Wireframe-Erstellung Endress+Hauser

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

description

Diese Case Study stelle ein Projekt vor in Zusammenhang mit dem Relaunch des Industrieunternehmens Endress+Hauser aus der Schweiz. In einem systematischen User Sentered Design Prozess wurde mit statischen Wireframes gearbeitet, um den Seitenaufbau frühzeitig zu struktirieren. Diese Wireframes bildeten eine Grundlage für alle weiteren Projektschritte.

Transcript of Case study Wireframe-Erstellung Endress+Hauser

Page 1: Case study Wireframe-Erstellung Endress+Hauser

Case Study

Wireframe-Erstellung für Endress+Hauser

© eResult GmbH – Results for Your E-Business(www.eresult.de)

Page 2: Case study Wireframe-Erstellung Endress+Hauser

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

Page 3: Case study Wireframe-Erstellung Endress+Hauser

Seite

Nächstes Kapitel

Methodik

3 Case-Study Wireframe-Erstellung

Page 4: Case study Wireframe-Erstellung Endress+Hauser

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)

Page 5: Case study Wireframe-Erstellung Endress+Hauser

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.

Page 6: Case study Wireframe-Erstellung Endress+Hauser

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.

Page 7: Case study Wireframe-Erstellung Endress+Hauser

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

Page 8: Case study Wireframe-Erstellung Endress+Hauser

Seite

Nächstes Kapitel

Ergebnisse

Was hat Endress+Hauser von der Vorgehensweise?

8 Case-Study Wireframe-Erstellung

Page 9: Case study Wireframe-Erstellung Endress+Hauser

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

Page 10: Case study Wireframe-Erstellung Endress+Hauser

Seite

Nächstes Kapitel

Referenzen

10 Case-Study Wireframe-Erstellung

Page 11: Case study Wireframe-Erstellung Endress+Hauser

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

Page 12: Case study Wireframe-Erstellung Endress+Hauser

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

Page 13: Case study Wireframe-Erstellung Endress+Hauser

Seite

Nächstes Kapitel

Kontakt

Ansprechpartner eResult

13 Case-Study Wireframe-Erstellung

Page 14: Case study Wireframe-Erstellung Endress+Hauser

Seite

Thorsten Wilhelm

Geschäftsführender Gesellschafter

& Gründer

+49 551 5177-426

[email protected]

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

[email protected]