Ein Mann liefert Pakete, ein anderer nimmt sie an.

IT-Beschaffung:
Geht das auch ohne Kopfschmerzen?

Man mag es kaum glauben: Wenn man als Unternehmen die IT-Ausstattung für die eigenen Mitarbeitenden nicht immer gleich kaufen will, wird es sehr schnell sehr anstrengend …

Das Unternehmen

topi, ein FinTech-Startup

Das Ziel

Einfaches Leasing für Hardware ermöglichen

Die Herausforderung

Hoher Zeitdruck, keine etablierten Standards

Methoden & Inhalte

Konzept, Produkt-Design, Nutzertests, Design-System, Finaler Prototyp

Der Hintergrund

Was macht topi?
Der Bereich der Beschaffung im B2B-Bereich ist leider allzu oft noch immer eine verstaubte und unbequeme Angelegenheit. topi ist ein FinTech-Startup, das sich zum Ziel gesetzt hat, hier Abhilfe zu schaffen.
Wie möchte topi dies erreichen?
Kurz gesagt: Indem es eine Plattform bereitstellt, von der alle profitieren: Unternehmen, die IT-Geräte und andere Hardware anschaffen möchten, aber auch Händler, die einen einfacheren Zugang zu potenziellen Kunden erhalten.
So weit, so gut – wären da nicht einige Stolpersteine auf dem Weg …

Die Herausforderungen

Die unbarmherzig tickende Uhr
Als IT-Startup ist es wichtig, schnell mit der ersten Version der eigenen digitalen Version an den Markt zu gehen: Erstens, um möglichst schnell schwarze Zahlen schreiben zu können, und zweitens, um schnell Erfahrungen mit dem veröffentlichten Produkt in Optimierungen für zukünftige Versionen einfließen zu lassen.
Konkretisierung des Abstrakten
Als topi auf uns zukam, gab es bereits viele Ideen, was eine neue web-basierte Plattform für die einfache Beschaffung von Hardware zu bieten haben könnte – was dabei aber die essenziellsten Bestandteile waren und wie ein konkretes Design aussehen musste, um den gesamten Prozess möglichst einfach und verständlich zu gestalten, das war noch nicht klar.

Die Ziele

Das übergeordnete Ziel
topi möchte es Unternehmen ermöglichen, IT-Equipment (und später auch z. B. Robotics-Hardware, Fitnessgeräte usw.) inklusive deren Versicherung in einem einfachen, transparenten Abo-Modell zu leasen.
Das Projekt-Ziel
Um dies zu erreichen, sollte als erster Aufschlag eine Alpha-Version dieser Plattform entstehen, mit allen essenziellen Funktionen. Zudem sollte ein Fahrplan für zukünftige Versionen entworfen werden.
Zwei Hände greifen in eine flache, geöffnete Pappschachtel.Menschen schauen auf ein Tablet, auf dem ein gezeichneter Wireframe zu sehen ist.Eine Frau geht mit Laptop im Arm über einen Büroflur.
Die einzelnen Schritte:
Schritt 1: Umfang abgesteckt
Was wollen Nutzer·innen?
Der Grundstein fürs Projekt waren Erkenntnisse aus der Befragung von den Menschen, die die Plattform letztendlich benutzen würden: Mitarbeitende und Vorgesetzte im Einkauf (oft auch Beschaffung oder Procurement genannt).
Was muss die erste Version können?
Die Erkenntnisse aus den Befragungen konnten wir nutzen, um aus den vielen Ideen von topi die Funktionen zu identifizieren, die aus Nutzersicht den größten Mehrwert haben würden. Weitere wünschenswerte, aber nicht dringende, Funktionen wurden in einer priorisierten Liste ausgelagert.
Schritt 2: Architektur geformt
Wohin geht die Reise?
Um den idealen Aufbau der Plattform zu ermitteln, erstellten wir zunächst eine “User Journey”, also eine Beschreibung des Wegs, den jemand auf der Plattform zurücklegt: vom Einloggen in die Plattform über die Auswahl der Produkte bis zum Abschluss des Bezahlprozesses.
Was gehört wohin?
Anhand dieses Wegs konnten wir nun die Struktur der Plattform konzipieren – und zwar so, dass jeder Schritt des Prozesses einfach, verständlich und transparent blieb.
Braucht das noch jemand?
Die hohe Kunst guten Designs ist das Weglassen und Verbergen: Oft sind Nutzeroberflächen mit zu vielen Optionen und Infos überfrachtet, die für Verwirrung und Orientierungslosigkeit sorgen. Wir achteten daher darauf, nur wirklich notwendige Elemente anzuzeigen.
Schritt 3: Design ausgearbeitet
Was macht gutes Design aus?
Ein gutes Produktdesign erfüllt drei Anforderungen:
Es wirkt wie ein organischer Bestandteil der Marke des Produktes.
Es macht das Produkt einfach zu bedienen.
Es fördert die emotionale Bindung zum Produkt.
Welche Designsprache passt zu topi?
Ausgehend von den Marken-Bestandteilen, die topi bereits entwickelt hatte, schufen wir eine Design-Sprache, die gleichzeitig ausdrucksstark und dezent war. Ein Design also, das Professionalität und Zuverlässigkeit ausstrahlte – elementare Qualitäten einer Bezahl-Lösung.
Schritt 4: Prototypen entwickelt
Im ständigen Austausch mit Nutzer·innen
In der nun folgenden Konzeptphase wurden erst statische Konzepte und später klickbare Prototypen entwickelt und mit Nutzer·innen getestet, um zu prüfen, welche Bestandteile der Plattform gut funktionierten und wo es noch Schwachstellen gab.
Die Achillesferse des Produkts
Viele Produkte haben eine bestimmte Stelle, von welcher der gesamte Ablauf eines Prozesses abhängt. Bei topi war dieses Element die Preis-Übersicht. Deshalb prüften und optimierten wir gemeinsam mit dem Produkt-Team von topi dieses Modul in mehreren Runden, bis alles stimmte:
Die Hierarchie der Bestandteile
Die Verständlichkeit der Texte
Die Einfachheit der Bedienelemente
Das Ergebnis: eine Übersicht, die gleichzeitig minimalistisch und informativ war.
Schritt 5: Design-System erstellt
Die Zukunft schon mitgedacht
Wir möchten andere befähigen, ihre App oder Software selbstständig weiterzuentwickeln, also auch ohne unsere Hilfe. Deshalb dokumentieren wir unser Design stets sorgfältig und stellen Werkzeuge bereit, die für zukünftige Versionen hilfreich sind.
Ein Baukasten und eine Liste
Für topi entwickelten wir ein schlankes Design-System, inklusive der wichtigsten Interface-Bausteine und -Komponenten. Auch mit dabei: eine Anleitung, wie man dieses Design-System einsetzt und wie man es erweitern kann.
Eine Liste mit den wichtigsten Features für die nächsten Ausbauschritte der Plattform vervollständigten den Zukunfts-Fahrplan.
Anschauungsbeispiel für die Leasing-Lösung "topi"
Dashboard mockup
„Der einfache Switch zwischen Kaufen und Mieten der Geräte macht es mir leicht, die Optionen zu vergleichen.“
- Adam (38 Jahre), Teilnehmer im Nutzertest
Anschauungsbeispiele für die Leasing-Lösung "topi"

Fazit

Aus unserer Sicht
In diesem Projekt spürten wir von Modulr eine besondere Verantwortung: Wenn ein Startup die erste Version seines Produktes auf den Markt bringt, entscheidet diese erste Version oft schon über Erfolg oder Misserfolg des ganzen Unternehmens. Deshalb musste es ein großer Wurf werden. Dank der tollen Zusammenarbeit mit topi ist uns das auch geglückt, finden wir.
Die Reaktion der Nutzer·innen
Nutzer·innen, die den finalen Prototypen testeten, freuten sich über die einfache Vergleichbarkeit zwischen Kauf und Leasing bei jedem einzelnen Produkt. Sie hoben auch die klare Struktur und Übersichtlichkeit des Designs hervor – und den schlanken und transparenten Bezahlprozess.
Die Bewertung von Topi
“Wir hatten viele Ideen und wenig Zeit. Modulr hat dann mit konsequentem Fokus auf die wichtigsten Aspekte einen Prototypen entwickelt, der unsere Herausforderungen elegant löste, mit einer klaren Designsprache und einer intuitiv bedienbaren Oberfläche.”
Charlotte Pallua, Mitgründerin und Geschäftsführerin von topi GmbH
Charlotte Pallua
Mitgründerin und Geschäftsführerin der topi GmbH

Und jetzt freuen wir uns auf ein persönliches Gespräch.

Thomas Latus und Celine Sadra von Modulr.Design
Thomas Latus
Gründer und
Geschäftsführer
Celine Sadra
UX-Managerin
Oder direkt persönlich sprechen:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.