Zum Prototypen 🡣

Worum geht es?

Die Stadt Potsdam bietet ihren Bürger·innen eine Web-Anwendung an, mit der sie Termine für den Bürgerservice buchen und anschließend verwalten können. Buchbare Termine umfassen z. B. die Beantragung von Personalausweisen, das Ausstellen von Meldebescheinigungen oder das An- und Abmelden von Wohnungen.

Ein solches systemrelevantes Angebot sollte seine Nutzer·innen nicht überfordern und sie möglichst effizient zu ihrem Ziel führen. Im Kurs System:Relevanz habe ich daher die Probleme des derzeitigen Systems analysiert, Handlungsfelder identifiziert und mithilfe eines Designsystems ein Redesign-Konzept erarbeitet.

Ziel war es einen Service zu entwerfen, der visuell und funktionell in das 21. Jahrhundert passt und die Bedürfnisse der Bürger·innen in den Mittelpunkt stellt.

Das Potsdamer Rathaus

Status Quo

Screenshots der Web-Anwendung zur Terminverwaltung

Um mir einen Überblick zu verschaffen, habe ich zunächst die derzeitige Terminverwaltung analysiert. Dabei ist eine umfangreiche UX-Evaluation entstanden, die die vorhandenen Probleme aufzeigt, erläutert und nach hoher, mittlerer und niedriger Priorität einstuft.

UX-Evaluation als Vollbild in neuem Tab öffnen 🡥

Die größten Probleme

Schlechtes visuelles Design

Die derzeitige Lösung besticht mit einem klassischen visuellen Design der frühen 2000er Jahre und muss unbedingt angepasst werden.

Schlechte Informationsstruktur

Nutzer·innen werden durch teilweise überflüssige Hinweise und Zusatzinformationen, die zudem oft an den falschen Stellen eingesetzt werden, abgelenkt.

Schlechte Effizienz

Nutzer·innen müssen sich im Verlauf der Buchung eine Zeit, einen Ort, eine Aufrufnummer, eine Terminnummer und eine PIN merken. Ist kein Termin verfügbar, sollen Betroffene es »am nächsten Tag um 8 Uhr noch einmal versuchen« – denn vielleicht ist ja dann ein Termin verfügbar.

Die schlechte Effizienz wird vor allem im User Flow deutlich, denn die Nutzer·innen müssen bereits um die Web-Anwendung zu starten sehr viele Schritte durchlaufen. Um nachvollziehen zu können, wie viele einzelne Schritte es insgesamt braucht um einen Termin zu vereinbaren bzw. zu ändern, habe ich einen User Flow Chart für diese beiden Prozesse angelegt.

Zum User Flow Chart in Figma 🡥

Handlungsfelder

Nachdem ich durch die UX-Evaluation die größten Probleme der Anwendung identifiziert hatte, definierte ich Handlungsfelder, auf die ich mich in meinem Redesign besonders fokussieren wollte. Hier die drei wichtigsten:

Terminvereinbarung und -verwaltung zusammenführen und optimieren

Ich wollte die Terminvereinbarung und -verwaltung zusammenführen und mithilfe eines Magic Links den Zugang zu wichtigen Funktionen, wie der Verschiebung oder Stornierung eines Termins, erleichtern.

Statusinformationen anzeigen

Dem/der Nutzer·in sollte der aktuelle Status der Terminvereinbarung jederzeit ersichtlich sein. Bereits eingegebene Daten sollten zusammengefasst eingesehen und bei Bedarf zu einem späteren Zeitpunkt bearbeitet werden können.

Terminbenachrichtigung einführen

In der Realität ist für die Mehrzahl der Nutzer·innen zum Zeitpunkt der Terminvereinbarung kein freier Termin beim Bürgerservice verfügbar. Darum war es mir wichtig für diesen Fall ein möglichst effizientes System zu entwerfen: die Terminbenachrichtigung.

Redesign

Für das Redesing habe ich mir zunächst einen groben Flow und passende Features skizziert. Das hat mir dabei geholfen, mein Ziel im späteren Verlauf des Projekts nicht aus den Augen zu verlieren.

Farblich habe ich mich nach den ersten Versuchen mit einem generischen Blauton die Corporate Identity der Stadt Potsdam aufgegriffen. Der im Redesign verwendete Blauton ist unter anderem auf der Website potsdam.de zu sehen:

Nach einigen Iterationen habe ich schließlich das visuelle Design finalisiert und begann damit, den überarbeiteten Service der Terminverwaltung von der Anliegenauswahl bis hin zur Terminbestätigung in einem Figma-Prototypen abzubilden.

Dafür habe ich mir zwei Charaktere ausgedacht, die den neuen Prozess der Terminvereinbarung beim Bürgerservice Potsdam demonstrativ durchlaufen…

Karl

Karl wohnt seit mehreren Jahren in Potsdam und ihm ist vor kurzem aufgefallen, das sein Personalausweis in ca. 4 Monaten abläuft. Da er sich lieber früh um die Verlängerung seines Ausweises kümmern will, entscheidet er sich dazu schon jetzt einen Termin beim Bürgerservice zu vereinbaren. Bei der Anliegenauswahl fällt ihm ein, dass er noch einen Reisepass für eine Reise, die er im nächsten Jahr machen will, braucht. Deshalb beantragt er neben seinem Ausweis auch gleich einen Reisepass, damit er nicht zwei Mal zum Bürgerservice gehen muss.

Lisa

Lisa ist erst vor kurzem nach Potsdam gezogen. Sie will deshalb ihre Potsdamer Wohnung beim Bürgerservice anmelden. Doch leider hat sie nicht so viel Glück wie Karl und muss zunächst auf einen freien Termin warten.

Prototyp

Zum Figma-Prototypen (Karl) 🡥

Zum Figma-Prototypen (Lisa) 🡥

Hinweis: Die Prototypen sind chronologisch angelegt. Karl möchte seinen Personalausweis verlängern und einen Reisepass beantragen. Um fortzufahren, musst du diese beiden Anliegen auswählen. Gleiches gilt für Lisa, die ihre Wohnung anmelden will. Beide lassen sich om Verlauf der Buchung per E-Mail benachrichtigen.

Highlights

Terminverwaltung über einen Magic Link

Die Terminbestätigung, die Bürger·innen nach Buchung ihres Termins erhalten, enthält einen Magic Link, über den der Termin im Nachhinein verwaltet werden kann. Durch dieses System entfällt die Notwendigkeit sich Terminnummern und Änderungs-PINs zu merken.

Terminbestätigung

Die Terminbestätigung können sich Nutzer·innen nach Buchung eines Termins per E-Mail, per SMS oder postalisch zustellen lassen. In der Terminbestätigung werden alle wichtigen Daten bezüglich des Termins zusammengefasst, sodass man alle wichtigen Informationen jederzeit dabei hat und diese auf einen Blick abrufen kann.

Flexibles Interface zur Dateneingabe

In den nächsten Jahren steht uns in Deutschland (hoffentlich) ein massiver technologischer Wandel in der Verwaltung bevor… Weg von Papierformularen und persönlichen Vorladungen, hin zu einer möglichst effizienten, digitalen Verwaltung. Diese Entwicklung hatte ich bei meinem Redesign natürlich immer im Hinterkopf. Durch das flexibel gestaltete Interface zur Dateneingabe können in Zukunft Anpassungen seitens des Bürgeramts gemacht werden, um Prozesse fortlaufend komplett zu digitalisieren. So könnte z. B. die Beantragung eines Personalausweises komplett über das neu gestaltete Interface erfolgen, indem man es einfach um weitere Sektionen bzw. Eingabefelder erweitert.

Designsystem

Im Rahmen der Projektarbeit ist auch ein Designsystem entstanden, dessen Komponenten im Prototyp verwendet wurden.

Es war eine ziemliche Herausforderung dabei als Einzelperson den Überblick zu behalten, aber letztendlich war die konsequente Arbeit mit Komponenten eine Arbeitserleichterung, gerade zum Ende des Designprozesses.

An manchen Stellen habe ich beim Designsystem Abstriche zugunsten der Effizienz gemacht. So sind zum Beispiel bei den Input-Feldern nur die Varianten ausgestaltet, die auch im Prototypen verwendet werden. Die fehlenden Varianten könnten natürlich bei Bedarf jederzeit ergänzt werden. Meiner Meinung nach ist diese Herangehensweise ein guter Kompromiss, um auch bei kleineren Projekten zeitlich effizient mit Designsystemen arbeiten zu können.

Zur Komponenten-Bibliothek in Figma 🡥

Ausblick und Fazit

Potenzial für Weiterentwicklung

Wie schon angesprochen bringt gerade der Digitalisierungsprozess in der Verwaltung viele Anreize mit sich, den im Redesign entstandenen Service zu erweitern. In der Zunkunft wäre es also denkbar aus der reinen Terminverwaltung eine echte Online-Verwaltung zu machen. Ein spannendes Thema, das durch so eine Transformation eröffnet wird, ist der besondere Anspruch an Zugänglichkeit: Wie kann ich einen digitalen Service anbieten, welcher analog lebenden, also z. B. älteren Menschen, das Leben nicht erschwert und ihnen die gleichen Möglichkeiten bietet, wie digital lebenden Menschen.

Fazit zu Projekt und Kurs

Da dies mein erstes Projekt war, welches ich komplett in Figma – und nicht in Sketch – umgesetzt habe, gab es oft Momente in denen ich Schwierigkeiten hatte, mit den Eigenheiten von Figma klarzukommen und bestimmte Probleme zu verstehen. Gerade die Erarbeitung eines kompletten Designsystems erschien zunächst wie eine Mammut-Aufgabe, die aber durch die gute Struktur und den guten Input im Kurs Schritt für Schritt gemeistert wurde. Ich werde definitiv weiter mit Figma arbeiten und auch die Vorteile von Designsystemen und komponentenbasierter Gestaltung im Allgemeinen in zukünftigen Projekten nutzen.