mediendesign beim Nürnberg Digital Festival

23.09.2020

Wir sind technischer Partner, Goldsponsor und Veranstalter.

(Barriere)freiheit für alle!

18.08.2020

Barrierefreiheit ist wichtig für jeden, darum klären wir auf, was es damit so auf sich hat.

Das Multitalent Web-App

27.07.2020

Was sind Web-Apps und wie setzen wir sie um?

Anzeige geht raus...

14.05.2020

Das Wundertool Google-Ads und ganz kurz, wie es funktioniert

Tips für Teammeetings während Corona

08.04.2020

Wie gestalten wir unsere Teammeetings, damit auch in der Corona-Krise alle auf dem neuesten Stand bleiben und unsere Teams reibungslos miteinander...

Siemens Stiftung

Konzeption/Design Medienportal

Unsere Aufgabe

Die Benutzerführung und das Erscheinungsbild des Medienportales der Siemensstiftung (https://medienportal.siemens-stiftung.org)sollten redesignt werden. 

Der Kunde wünschte sich einen Neuentwurf der Navigationsstruktur zu einfacheren Erreichbarkeit der Inhalte, sowie eine UX-Konzeption von Suchfunktion, Filtern und Ergebnisanzeige.

Die Entwicklung des Gestaltungsrasters für das Medienportal sollte auf Basis des Ci der Siemens-Stiftung erfolgen. HTML/CSS-Templates zur Einbindung und Weiterentwicklung des Angebotes waren ebenfalls Bestand des Projekts.

In einem Usability-Test sollten die neue Navigationsstruktur und das Konzept überprüft werden.

Unsere Lösung

Das bestehende Portal wurde hinsichtlich des Angebotes und der Struktur analysiert, die Erkenntnisse hieraus bildeten die Basis für den Neuentwurf. 

Ziel war es den Zugang zu den zahlreichen Lehrmaterialien möglichst schwellenfrei und transparent zu gestalten. Um dies zu gewährleisten, wurden einige Features der Vorversion entfernt. 

Eine spannende Herausforderung war die Gestaltung des Suchprozesses und die Darstellung von angebotenen Medienpaketen und selbst definierbaren Merklisten. 

Das Grobkonzept wurde anhand von Wireframe-Prototyps einem Usability-Test unterzogen. Die Erkenntnisse daraus flossen direkt in die Umsetzung eines statischen HTML/CSS Prototyp ein, der iterativ optimiert und erweitert wurde.

Dieser bereits in der Zieltechnik erstellte statische Prototyp wurde einem weiteren Usability-Test unterzogen. Dieser bestätigte den grundsätzlichen Aufbau als gut bedienbar und transparent, einige Details wurden aufgrund der Beobachtungen optimiert.

Technische Basis ist ein sehr schlankes, nicht auf Bootstrap basierendes Rastersystem mit acht Farbthemen, die mit LESS generiert werden.

Es wurde ein Set von responsive optimierten Templates für verschiedenen Seiten und Inhaltstypen zur Umsetzung im Content-Management-System Typo3 geliefert und die Umsetzung bis zum Relaunch begleitet.

  • Schwerpunkte bei der Umsetzung
  • Kreativphase mit Neukonzeption des Bedienkonzeptes.
  • Wireframes für Navigation und die verschiedenen Inhaltstypen
  • Screen-Design auf Basis des Siemens Stiftung-CI
  • Usability Tests zur Überprüfung der Entwürfe
  • Icon-Design und Erstellung eines speziellen Icon Fonts
  • HTML-Gerüst für Navigation und Frame für den Content
  • Spaltenraster als schlankes CSS-Framework 
  • CSS Formatierung inklusive LESS-generierter Farbthemen
Wolfgang Keller, Senior Artdirector

Projektabschluss
Juli 2017

Technologie
HTML5 / CSS3, JavaScript, Adobe Photoshop, Adobe Illustrator, Prototyping, Screen-Design

Branche
Dienstleistung

Projektleiter
Wolfgang Keller

Leistung

UX Design

Es ist schön, wenn Probanden im Usetest ungeduldig Fragen, wann sie das Angebot nutzen können
Wolfgang Keller

Teilen

Projekte

Kunden

Logo der Euroassekuranz Versicherungsmakler AG
Logo der Nutricia GmbH
Logo der Albatros Versicherungsdienste GmbH
Logo der adorsys GmbH & Co. KG
Logo von StayFriends
Logo der GES
Logo der Continental AG
Logo der Akademie Faber Castell
Logo von mundipharma
Logo der Senacor Technologies AG
Logo von easyCredit
Logo der Elektrobit Automotive GmbH
Logo der BASF SE
Logo der Wüstenrot Bausparkasse
Logo der Delvag
Logo der KIB Projekt GmbH
Logo der Volksbank Raiffeisenbank
Logo von paydirekt
Logo von der Deutschen Gesellschaft für Projektmanagement
Logo des Nürnberg Digital Festivals

Branchenübersicht

Baugewerbe
Bildung
Dienstleistung
Elektroindustrie
Events

Geld- und Kreditwesen
Gesundheitswesen
Informationstechnologie
Kommunikationstechnologie
Nahrungsmittel

Pharmaindustrie
Textilien
Unternehmensberatung
Versicherungswirtschaft
Werbung und Messen