Webapplikation 2022/2023
Boost versteht sich als Web-to-Print-Shop und Plattform zur Erstellung von Marketingmaterial. Ich arbeitete an dem Projekt im Rahmen meiner Anstellung bei der Mosaiq Kommunikationsagentur, die Boost entwickelt und betreibt. Ziel war ein Redesign der Software-Oberfläche, welche demnächst in das Produkt integriert wird. Meine Aufgabe war die Gestaltung und Entwicklung eines Design-Systems, welches alle bestehenden Anforderungen an das Interface abdeckt und die Entwicklung von neuen Funktionen beschleunigen soll.
Ausgangsalge
Die Oberfläche von Boost wurde vor einigen Jahren gestaltet, als das Produkt neue entwickelt wurde. Das Interface basiert nicht auf einem Design-System. Die Entwicklung von neuen Feautures war mit einem grossen Design-Aufwand verbunden oder sie fügten sich nicht natlos in die Oberfläche ein. Weil in naher Zukunft neue Entwicklungen geplant sind, wurde der Bedarf nach einem flexiblen Design-System grösser.
Konzeption
Grundsätzlich war meine Aufgabe ein Redesign mit unverändertem Funktionsumfang. Die Gelegenheit wurde auch genutzt, um bekannte Schwachstellen des Produkts zu beheben und Prozesse zu optimieren. Dazu nutzten wir gesammelte Kundenfeedbacks und holten Inputs von einem Interessenten, der das Produkt in seiner Firma nutzen möchte. Da ich für einigen Jahren auch Support für die User von Boost geleistet hatte, waren mir die Kritik, Wünsche und Bedürfnisse vertraut. Ich beurteilte die bestehenden Workflows kritisch und schlug an einigen Stellen Optimierungen und Vereinfachungen vor.
Design und Entwicklung
Ich trug die wichtigsten Design-Elemente zusammen, die für das Interface benötigt wurden, und entwarf eine neue Gestaltung. Deren Charakter ist funktional, klar und zeitgemäss. Nach diveresen Feedback- und Optimierungs-Runden startete ich mit der Umsetzung des Design-Systems in Code. Ich nutzte dafür Webflow, um den Code visuell erstellen zu können. Wichtig dabei war, dass die HTML- und CSS-Struktur logisch und nachvollziehbar ist und die erstellten Elemte möglichst flexibel anwendbar sind. Abstände, Textgrössen, Farben und Formen folgen einem strengen System. Dadruch erreichte ich eine gewisse Konsistenz. Den erstellten Code übergab ich dem externen Entwickler-Team, welches die Implementierung in das Produkt vornehmen wird.
Fazit
In diesem Projekt konnte ich mich vertieft mit dem Aufbau und der praktischen Anwendung eines Design-Systems auseinandersetzen. Das Projekt war durch seine Komplexität eine spannende Herausforderung. Der Austausch mit der externen Entwicklerfirma und meine Verantwortung für die Frontend-Entwicklung brachten mir wertvolle Erfahrungen in der Umsetzung von Design in Code und spannende Einblicke in die Prozesse der Softwareentwicklung.
Leistungen
UI-Design
Frontend-Entwicklung
Back-End-Entwicklung
apload GmbH
Produkt-Manager
Reto Spiegel
