Zum Inhalt springen
Alle Projekte

Dieses Projekt unterliegt einer Vertraulichkeitsvereinbarung. Einige Details und Abbildungen wurden angepasst. Hier beschreibe ich meine Überlegungen und mein Vorgehen.

Leonteq AG · 2023

Leonteq HUB

Ich habe die Informationsarchitektur und die Benutzeroberflächen für den zentralen Zugang zu Leonteqs internen Anwendungen gestaltet: vom App-Katalog bis zu den Schnellzugriffen im Dashboard.

Leonteq HUB — Projektansicht

Meine Rolle

Lead Product Designer

Team

4 Designer, 12 Entwickler

Zeitraum

10 Monate

Plattform

Webanwendung

ToolsFigmaVue.jsStorybookJira

Wofür ich verantwortlich war

  • Ich verantwortete die Informationsarchitektur: das Modell für App-Profile, die Kategorien und die Navigation.
  • Ich gestaltete Dashboard, Katalog, App-Profile und Ansprechpartnerverzeichnis mit über 200 Ansichten und Zuständen.
  • Gemeinsam mit den Entwicklern erarbeitete ich ein einheitliches Konzept für eingebettete Funktionen. Mit den Produktteams stimmte ich ab, wie ihre Anwendungen in HUB dargestellt und zugänglich gemacht werden.

Welche Herausforderung ich lösen wollte

Wer eine bestimmte Anwendung suchte, musste oft eine veraltete Confluence-Seite durchsuchen oder Kollegen nach einem Link fragen. Für jede Anwendung gab es eine eigene Dokumentation, einen anderen Weg zum Zugang und ein zuständiges Team. Neue Mitarbeitende mussten sich darin erst zurechtfinden, bevor sie loslegen konnten.

Ich wollte einen zentralen Einstieg schaffen, der diese Fragen beantwortet: Was leistet die Anwendung, wer ist dafür zuständig und wie erhalte ich Zugang? Dazu habe ich mit den Produktteams die nötigen Informationen strukturiert und darauf aufbauend die Benutzeroberflächen gestaltet.

◢Kernidee

“Jede Anwendung sollte leicht zu finden sein. Wer sie nutzen möchte, muss wissen, wofür sie gedacht ist, wer dafür zuständig ist und wie man Zugang erhält.”

Mein Gestaltungsziel

◢ Vorgehen

  1. 01

    Die bestehenden Anwendungen verstehen

    Ich arbeitete mit neuen Mitarbeitenden, erfahrenen Nutzern und Entwicklungsleitern zusammen, um die Anwendungen, Zuständigkeiten und wiederkehrenden Aufgaben kennenzulernen.

  2. 02

    Eine gemeinsame Struktur schaffen

    Ich legte fest, welche Informationen ein App-Profil enthält und wie die Anwendungen kategorisiert werden. Dokumentation, Zugang und Schnellzugriffe sollten leicht zu finden sein.

  3. 03

    Die Benutzeroberflächen gestalten

    Auf dieser Grundlage gestaltete ich Dashboard, Katalog, App-Profile und Ansprechpartnerverzeichnis. Dabei berücksichtigte ich die unterschiedlichen Nutzerrollen und die jeweiligen Zustände der Oberfläche.

  4. 04

    Mit Nutzerfeedback verbessern

    In drei Runden mit neuen Mitarbeitenden, erfahrenen Nutzern und Führungskräften passte ich die Entwürfe an ihre unterschiedlichen Bedürfnisse an.

  5. 05

    Schrittweise veröffentlichen

    Wir veröffentlichten zunächst den App-Launcher und die Profile. Danach folgten eingebettete Funktionen, Personalisierung und Schnellzugriffe.

Warum ich mit dem App-Profil begann

Ich machte das App-Profil zur Grundlage von HUB. Bevor ich das Dashboard gestaltete, definierte ich die Informationen, die jede Anwendung bereitstellen musste: Zweck, Zuständigkeit, Ansprechpartner, Dokumentation und Zugang.

Dieses Modell verwendete ich im Katalog und in den einzelnen Profilen. Mitarbeitende hatten damit einen verlässlichen Ort zum Nachschlagen, und die Produktteams wussten, welche Informationen sie aktuell halten mussten. Dashboard und Schnellzugriffe machten diese Struktur anschliessend im Alltag nutzbar.

App-Katalog und Dashboard von Leonteq HUB
Das HUB-Dashboard: personalisierter App-Katalog, Schnellzugriffe und aktueller Anwendungsstatus auf einen Blick

Wie ich Funktionen direkt in HUB einband

Häufige Aufgaben sollten sich direkt in HUB erledigen lassen. Wer für jeden kleinen Schritt eine andere Anwendung öffnen muss, verliert Zeit und den Zusammenhang.

Gemeinsam mit den Entwicklern erarbeitete ich ein Konzept, um ausgewählte Funktionen direkt in HUB einzubetten. Ich verantwortete das Interaktionsmodell und die einheitliche Bedienung. Die jeweiligen Anwendungsteams kümmerten sich um die technischen Vorgaben für die Anbindung und die Authentifizierung. Mit Moneypenny sorgten wir dafür, dass auch die eingebetteten Funktionen wie ein Teil von HUB aussahen und sich entsprechend bedienen liessen.

Vollständige Anwendungslandschaft im App-Katalog

Der vollständige App-Katalog, durchsuchbar nach Kategorie, Team oder Nutzungshäufigkeit

App-Profil mit Zuständigkeiten, Kontakten und Schnellzugriffen

App-Profil: Zuständigkeiten, Ansprechpartner, Schnellstart und Zugang zu eingebetteten Funktionen

Was sich verändert hat

Die folgenden Ergebnisse wurden für das gemeinsame Projekt berichtet.

87%
weniger Zeit, um eine interne Anwendung zu finden und zu öffnen
3
Tage Einarbeitung statt 3 Wochen. Neue Mitarbeitende arbeiten bereits in der ersten Woche produktiv.
1200+
täglich aktive Nutzer an allen Leonteq-Standorten weltweit
4.7/5
durchschnittliche Zufriedenheit in der Mitarbeiterbefragung nach dem Start

Was ich aus diesem Projekt mitnehme

Eine übersichtliche Profilseite allein reicht nicht. Sie bleibt nur dann nützlich, wenn das zuständige Team die Struktur mitträgt und seine Informationen aktuell hält.

Deshalb war die Abstimmung mit den Teams genauso wichtig wie die Gestaltung der Oberfläche. Das nehme ich für weitere Plattformprojekte mit: Wenn ich festlege, wie Menschen Informationen finden, muss ich auch klären, wer diese Informationen pflegt.