Ich bin Jack Green, UX Designer bei DoiT, und möchte hier über ein paar Design-Entscheidungen und -Änderungen bei der Überarbeitung eines unserer bestehenden Features sprechen: den Ramp Plans.
Ramp Plans visualisiert, wie weit ein Kunde sein Spend-Commitment bei AWS oder Google Cloud bereits eingelöst hat. So lassen sich Ausgaben nachverfolgen und nötige Anpassungen frühzeitig erkennen.
Um das Potenzial des Features voll auszuschöpfen, hat sich das Produktteam für ein paar gezielte Verbesserungen entschieden. Ich habe ein Design-Audit des bestehenden Features durchgeführt und dabei sowohl Usability- als auch visuelle Schwachstellen aufgespürt.
Screenshot aus Figjam während der Recherchephase
Mit der Notizfunktion in Figjam (siehe oben) habe ich Bereiche markiert, die wir besprechen mussten, und die wichtigsten Ansatzpunkte für Verbesserungen herausgearbeitet. Auf dieser Basis bin ich dann ins Gespräch mit dem Product Manager und dem Lead Developer gegangen und habe deren Einschätzungen und das Feedback aus dem Kundenkontakt einfließen lassen.
In dieser Session haben wir die Schwerpunkte festgelegt, auf die wir uns konzentrieren wollten:
- Sichtbarkeit der wichtigsten Informationen verbessern
- Backend modernisieren, damit die Daten verlässlicher werden
Aus User Research und von Kolleginnen und Kollegen mit direktem Kundenkontakt wissen wir, welche Informationen für die Nutzer am wichtigsten sind. Genau diese Inhalte wollten wir klar und auf einen Blick erfassbar präsentieren.
Das Backend zu modernisieren ist zwar keine UX-Aufgabe, wirkt sich aber stark auf die User Experience des Ramp-Plan-Features aus. Verlässlichere Daten schaffen Vertrauen und machen den Mehrwert des Features sofort sichtbar.
Der erste Bereich, den ich herausgreifen möchte, ist die Liste auf der Ramp-Plans-Seite. Bisher war sie als Tabelle aufgebaut.
So sah die Übersichtsseite der Ramp Plans vor den Design-Änderungen aus
Eine Tabelle passt aus mehreren Gründen nicht in diesen Kontext:
- Die Seite enthält in der Regel nur 1 bis 2 Ramp Plans – die Liste wächst nicht
- Es gibt keine inhaltliche Hierarchie, wodurch sich Details schwer erkennen lassen
- Einige zentrale Informationen fehlen in der Tabelle
- Man muss erst in den Ramp Plan hineinklicken, um zu verstehen, was tatsächlich passiert
Deshalb habe ich das Tabellenlayout durch Cards ersetzt:
So sahen die Ramp Plans nach den Design-Änderungen aus
Das Card-Layout bringt folgende Vorteile:
- Die wichtigsten Informationen sind besser lesbar
- Nutzer müssen für die zentralen Infos nicht mehr in den Ramp Plan hineinklicken
- Eine visuell ansprechendere und ausgewogenere Hierarchie
Diese klarere Art, wichtige Informationen darzustellen, haben wir auch in die Detailansicht der Ramp Plans übernommen.
Am oberen Seitenrand haben wir Cards mit den wichtigsten Details ergänzt, um relevante Informationen zu kategorisieren, zu strukturieren und sichtbar zu machen – Informationen, die vorher entweder gefehlt haben oder nur mit Mühe aus den Daten herauszulesen waren.
Die aktualisierte Detailansicht der Ramp Plans
Neu hinzugekommen ist ein Dialog mit der Aufschlüsselung der Gesamtausgaben. Damit können Nutzer ihre Ausgaben kompakt im Detail nachvollziehen, ohne den Workflow zu unterbrechen und in andere Bereiche der DoiT Console wechseln zu müssen. Angeregt wurde dieses Feature von einem Account Manager, der täglich mit Kunden arbeitet. Sein Argument: Genau diese Tiefe an Details und Einblicken sei für die Kunden besonders wertvoll.
Der Dialog mit der Aufschlüsselung der Gesamtausgaben
Wie immer beobachten wir auch nach dem Release aktiv Nutzerverhalten und Muster, um mögliche Probleme oder weitere Verbesserungspotenziale frühzeitig zu erkennen.