Das Universitäts-Kinderspital beider Basel (UKBB) ist ein eigenständiges, universitäres Kompetenzzentrum für Kinder- und Jugendmedizin sowie für Lehre und Forschung.
Um die kleinen Patientinnen und Patienten vor einem Besuch oder Aufenthalt über alle Aspekte des Spitals zu informieren, wurde eine regionale Webagentur zur Ablösung der bisherigen (auf Adobe Flash basierten) Kinder-Website gesucht.
Gemeinsam mit arteria wurden die Anforderungen für diesen Relaunch erarbeitet:
Zur Initialisierung des Projekts wurde vorgängig ein Strategie-Workshop mit der Kommunikationsabteilung des UKBB durchgeführt. Dabei fand eine Annäherung an die Zielgruppe statt, Ideen und Ansätze, Inspiration, Inhalte und Funktionen der Kinder-Webseite wurden diskutiert. Der Grundstil für das Web-Layout und die Charaktere wurden anhand von Beispielen und Inputs erarbeitet.
Im Anschluss an den strategischen Workshop wurden ca. 10 Kinder mit Bezug zum UKBB zum Kinderworkshop eingeladen. In Gruppen wurden die Fragen zum Stil, den Inhalten und der Funktionsweise der neuen Website diskutiert.
Dank der motivierten Mitarbeit der Kinder konnten die Rahmenbedingungen für die Kinder-Website rasch definiert werden:
Dem Wunsch der Kinder folgend wurde das gesamte UKBB im Comic-Stil illustriert. Um möglichst realistische digitale Welten zu erschaffen, wurden vorab Fotos und Mockups der Zimmer und Bereiche erstellt:
Anschliessende Umsetzung:
Um die Berufsbilder, mit denen die Kinder im Spital in Berührung kommen, authentisch zu gestalten, wurden Mitarbeiter bei der Arbeit begleitet.
Daraus entstanden ist ein Set von Illustrationen das Ärzte, Chirurgen, Pfleger, Therapeuten und sogar Mitarbeiter der Reception und der Hausdienste umfasst.
Nachdem die Idee einer «Stop-and-Go» Website am Kinderworkshop grosse Zustimmung finden konnte, wurde eine solche Funktion im Rahmen der Webentwicklung umgesetzt: Der Besucher scrolled durch die Website, wobei an definierten Punkten ein Bereich des UKBB «gepinned» wird.
Der Effekt: Ab diesem Punkt bewirkt das Weiterscrollen keine weitere vertikale Bewegung der Webseite mehr. Stattdessen können mittels Hoch- bzw. Runterscrollen Elemente der Website ein- oder ausgeblendet werden: Personen erscheinen oder verschwinden und werden anklick- und erlebbar. Nachdem ein Spitalbereich komplett erkundet wurde, scrolled die Website wieder «normal» weiter bis zur nächsten Ebene die dann wiederum «eingefroren» wird. So erkundet der Besucher die Bereiche des UKBB: Eingang, Empfang, Zimmer, Untersuchung und Operationssaal.
Diese Funktionalität wurde komplett mit HTML5 und CSS3 umgesetzt. In Kombination mit dem Web-Framework Bootstrap entsteht so eine durchlässige Kinder-Website im Responsive Design, die auch auf einem iPad oder iPhone vollständig genutzt werden kann.