Sharework | Website Redesign

Die Firma Sharework GmbH in Hamburg bietet seit Jahren hochspezialierte und marktführende Chartanalyse- und Börsen-Software an.
Alle Produkte und erweiterte Dienstleitungen wie z.B. die Lokalisierung von Software, Datenbanken, Finanzliteratur, etc werden konsequent über die Website vermarktet.

 Auswahlkriterien, Clusterbildung und Konsistenz
 Feste Navigation und fixes Layout
 Prototypen und Prozessoptimierung
 Endspurt und Manöverkritik

....................................
Projekt
0491 Sharework Website Redesign
....................................
Auftraggeber
Sharework GmbH
Dirk Nölting
....................................
Corporate Design
Usability
Web Design
kilde communications
Joerg Kilian
Jan Schliemann
....................................
Programmierung
Sharework
Frank-David Georges
...................................
Projektstart
6. Dezember 2000
....................................
Onlinestart
22. Dezember 2000

Ein Redesign wie aus dem Schulbuch

Mit einem extrem kleinen Zeitfenster, bat uns die Firma Sharework, die Website noch für das Endjahresgeschäft zu redesignen. Wichtig hierbei war es eine displaystarke Shop-Optik zu entwickeln, die neue Identität glaubwürdig zu transportieren, die Seiten schnell ladend und pflegeleicht zu halten und gleichzeitig den Bestellungsprozess zu optimieren.

Wir schlugen ein schulbuchmäßiges Redesign vor: Flache Seiten ohne Frames, Strukturierung der Rubriken mittels Farbkodierung und eine einfache, konsistente Navigation. Für das "Look and Feel" bedienten wir uns einer betriebsystemnahen Optik. Der Content wurde – abhängig von der Navigationstiefe – in schnell erfassbare Kategorien gegliedert.

Nach ersten Designstudien wurde in mehreren sehr zeitnah gestaffelten Abstimmungsrunden ein statischer Prototyp entwickelt, der beispielhafte Inhalte der Site widerspiegelte. Die Umsetzung des gesamten existierenden Content wurde durch Mitarbeiter der Firma Sharework geleistet, die dafür die HTML-Templates des Design-Prototyps verwendeten.

...........................................
Extrem kleines Zeitfenster für Konzept, Design und Umsetzung
...........................................
Neustrukturierung und Redesign der Website
...........................................
Optimierung für 800 x 600 Pixel und Browser Generation 4+
...........................................
Standardisierung der Seitenelemente mit Templates und CSS
...........................................
Implementierung des neuen Erscheinungsbilds
...........................................
Neugestaltung und Vereinfachung des Bestellungsprozesses
...........................................
Lieferung eines Design-Prototyp mit statischen HTML-Templates
...........................................

....................................
Web Design










....................................
Ein Snapshot der Website von Sharework am
15. November 2000
(ohne Bestellfunktionen)

Auswahlkriterien, Clusterbildung und Konsistenz

Gemeinsam mit dem Kunden bestimmten wir in einem kurzen Briefing die Rahmenbedingungen für das Redesign der Website. Um den kreativen Prozess zu beschleunigen, schauten wir auf besonders gelungene Sites namhafter Anbieter und stellten dann unsere Auswahlkriterien für Layout- und Navigationsansätze zusammen.

Das Basislayout der Site ergab sich dann fast wie von selbst. Eine harte Strecke ist immer wieder die Neustrukturierung der Inhalte. Wir benutzen als Methoden auf der einen Seite die Sicht des Kunden, sowie die bisher nicht realisierte Clusterbildung in Kategorien. Durch Konsistenz und Normierung von Elementen und Strukturen schaffen wir eine transparente, leicht navigierbare Site.

Ein Dispositionslayout als visuelle Hilfe für die Neuordnung des Content

....................................
Web Design

Feste Navigation und fixes Layout

Frames schlossen wir wegen der schlechten Performance mit Statistik und Suchmaschinen aus. Wir wählten ein ähnliches Grundlayout wie bei der existerenden Site, welches über alle Seiten beibehalten wird: oben Logo, Slogan und Sponsorenwerbung, links die globale Navigation mit farbkodierten Kategorien, rechts in der Mitte der Contentbereich und ganz unten der Fuß mit der Absenderadresse.

Wichtig: jetzt erscheinen alle Produkte displaystark und mit Teasertexten versehen auf der Startseite. Das Layout ergibt sich aus Standardmaßen und wird auf einer Breite von 760 Pixeln fixiert. Der Text ist mit Stylesheets ausgezeichnet, alle Textlinks sind unterstrichen. Auf Links als Grafik wird weitestgehend verzichtet.

Der erste navigierbare Prototyp zeigt bereits die wesentlichen Merkmale der späteren Website.

....................................
Web Design

Prototypen und Prozessoptimierung

Nach der Abstimmung des Basislayouts, wurden in rascher Folge ein halbes Dutzend typische Layoutvarianten der Site entwickelt und verabschiedet. Diese bildeten zusammen den Design-Prototyp dessen Templates später von Sharework für die Anpassung der existierenden Inhalte genutzt wurden.

Um die Bestellseiten für einen glatten Prozess zu optimieren, ließen wir Online-, Fax- und Telefonbestellung anfangs über dieselbe Seite laufen und verzweigten erst danach. Da die Site vorerst ohne Datenbank operiert, hat dies Vorteile für die Pflege der Bestellseiten. Die Minimalisierung der grafischen Elemente und Tabellenstrukturen ermöglicht das deutlich schnellere Laden der Seiten.

Zwei Varianten für die Verbindung von Zeichen und Slogan, sowie Farbkodierungen der Kategorien

....................................
Web Design












....................................
Die aktuelle Website
ist bedingt "under construction".

Endspurt und Manöverkritik

Zum Schluß setzten wir in den Kopf in die Nähe des Slogans eine kleine Weihnachtsdeko um die saisonale Aktualität zu unterstreichen und etwas zu "menscheln". Sharework adaptierte dann die zentralen Seiten der Site innerhalb eines Wochenendes und schaltete das Angebot noch rechtzeitig vor Weihnachten "scharf".

Im Nachherein sehen wir auf vielen Seiten noch Optimierungsbedarf. Obwohl wir bei der Entwicklung des Design-Prototypen möglichst viele unterschiedliche Layoutvarianten berücksichtigten, ist der Interpretationsspielraum für den Redakteur zu groß, um für jeden Fall das richtige Layout und die richtigen Auszeichnungen zu benutzen.
Hier kann nur Coaching "on the job" oder aber ein Design Manual weiterhelfen.

Eine saisonale Dekoration

Der interaktive Prototyp auf dessen Basis die Site weiterentwickelt wurde.