Produktdesign für eine Pflanzenpflege App

CRM-System, Website, Produktfotografie und punktuelle Mitarbeit an der mobilen App für blueplant, die Software für professionelle Pflanzenpflege-Dienstleister. Von 2022 bis 2026 habe ich das Produkt von der Entwicklung aus zunehmend über UX-Design mitgestaltet.
Produktdesign für eine Pflanzenpflege App

Website-Relaunch im bestehenden Design-System

Bei blueplant war ich ursprünglich als Entwicklerin tätig und habe unter anderem Code-Refactoring sowie Optimierungen an der UI am CRM-System übernommen. Im Zuge meines Rollenwechsels von der Entwicklung zum Design habe ich das Produkt zunehmend auch aus UX-Sicht betrachtet.

Das zentrale Problem der bisherigen blueplant-Webseite waren zu große Überschriften und zu viel Weißraum, wodurch der eigentliche Inhalt zu kurz kam. Ziel war außerdem, für alle unsere Webseiten ein einheitliches System zu nutzen, damit sich niemand, der an einer Website arbeitet, zusätzlich noch in ein komplett anderes System einarbeiten muss. Da die KMH-Webseite zu diesem Zeitpunkt bereits in einem funktionierenden eigenen Designstil lief, haben wir uns entschieden, blueplant in diesem Stil nachzubauen beziehungsweise umzubauen und dabei gleich auch die überdimensionierten Schriftgrößen zu beheben, damit das Angebot von blueplant auf den ersten Blick verständlicher wird.

Inhaltlich habe ich unter anderem Icons zur Beschreibung der Funktionen ausgewählt, Mockups für einzelne Funktionsbereiche erstellt sowie eigene Fotografien der blueplant-App ergänzt, dazu Kundentestimonials eingebunden. Die Website ist insgesamt in enger Abstimmung mit dem Marketing entstanden, unter anderem bei der Auswahl vertrauensbildender Elemente wie Kennzahlen und einem Video im Hero-Bereich.

Farbanpassung und CRM-Redesign im neuen Erscheinungsbild

Bereits im ersten Umbau hatten wir zunächst Orange als Akzentfarbe gewählt, mit der blueplant stärker auffallen sollte. Uns ist jedoch aufgefallen, dass Orange nicht so wirkte, wie wir uns das vorgestellt hatten, und sich auch im Marketing nicht gut nutzen ließ. In der nächsten iterativen Anpassung haben wir uns deshalb für Grün entschieden und mussten dafür einen Grünton finden, der zu unserem bestehenden Blau passte. Eine Anpassung der Primär- und Sekundärfarbe selbst stand dabei außer Frage, da wir bereits sehr viel Printmaterial mit den bestehenden Farben produziert hatten. Die Wahl des richtigen Grüntons war nicht ganz einfach, da sich Blau und Grün schnell gegenseitig stören können, weshalb die Überlegung eher in Richtung einer Blau-Grün-Mischung ging. Geholfen hat dabei vor allem, dass ich in Figma verschiedene UI-Entwürfe angelegt und darin den Grünton über einen Regler global verstellt habe, um zu sehen, ab welchem Ton er mit unserem bestehenden Corporate Design stimmig wirkte. Dabei habe ich mich auch noch einmal mit dem Aufbau der Webseite befasst und Möglichkeiten geprüft, einzelne Inhalte anders darzustellen. Die Einführung von Grün als Akzentfarbe stieß gleichzeitig das größere Redesign des CRM-Systems an. Um diese Farbfindung zu erleichtern, haben wir uns damals sogar in das Buch "Das ABC der Farbe: Theorie und Praxis für Grafiker und Fotografen" eingelesen.

Meine ursprüngliche Vorstellung für den Webseiten-Umbau war etwas organischer und luftiger, mit neuen, intensiveren und zugleich helleren und dadurch besser lesbaren Farbtönen sowohl bei Grün als auch bei Blau. Dieser Entwurf kam grundsätzlich positiv an, aufgrund der zur Verfügung stehenden Ressourcen haben wir uns letztlich aber bewusst gegen einen grundlegenden Form- und Design-Umbau und für eine einfache Farbanpassung entschieden.

Früherer, organischerer Entwurf der blueplant-Webseite mit neuen Blau- und Grüntönen
Die live blueplant-Webseite mit der finalen, angepassten Farbgebung

Links meine erste Idee für den Umbau, rechts die tatsächliche Umsetzung auf Basis der bisherigen Gestaltung der Webseite, nur mit angepasster Farbgebung.

Parallel dazu habe ich das CRM-System überarbeitet und dafür Prototypen sowie Mockups entwickelt, deren Umsetzung anschließend im Team erfolgte. Das war dabei weniger eine nutzerforschungsbasierte UX-Neugestaltung im engeren Sinne, da hierfür kein User Research stattgefunden hat, sondern beruhte in erster Linie auf etablierten Design-Prinzipien und einer heuristischen Bewertung der bestehenden Oberfläche. Im Ergebnis orientiert sich die Oberfläche deutlich stärker an der neuen Designsprache und wirkt dadurch fokussierter als die vorherige Version.

Aus dieser heuristischen Prüfung sind bereits erste Optimierungsvorschläge entstanden, die sich anschließend im Redesign umsetzen ließen, etwa für die Kundenübersicht: eine klarere Abgrenzung von Navigation und Inhalt durch Kontrast, ein aussagekräftigerer Status statt eines einfachen Häkchens sowie eine überarbeitete Paginierung. Bei dem gezeigten Vorschlag handelt es sich um ein von mir in Figma erstelltes High-Fidelity-Mockup.

Kundenübersicht im CRM vor dem Redesign, durchgehend hell gehalten
Figma-Mockup einer überarbeiteten Kundenübersicht mit dunkler Navigation und klarer Statuskennzeichnung

Die Kundenübersicht im Ist-Zustand und als Figma-Mockup mit klarerer Abgrenzung von Navigation und Inhalt sowie aussagekräftigerem Status.

Zu meinen Aufgaben gehörte unter anderem auch, dem Marketing Mockups bereitzustellen, zu bearbeiten und zuzuschneiden. Dafür habe ich mit den zur Verfügung stehenden Ressourcen eigene Mockups erstellt, um die Bewerbung des Produkts zu ermöglichen.

Marketing-Mockup einer Pflanzen-Detailseite, in der App die Pflegedokumentation, im CRM die zugehörige Produktdetailseite

UI-Design der Produktdetailseite

Nach der Webseite lag mein nächster Schwerpunkt auf dem CRM-System, konkret der Produktdetailseite. Diese war wenig übersichtlich, sodass Nutzer:innen nicht alle Informationen auf einen Blick erfassen konnten, dazu kamen teils große Weißabstände. Vor allem aber war nicht klar erkennbar, welche Informationen und Aktionen für Nutzer:innen überhaupt relevant sind, da wir zu diesem Zeitpunkt noch keine Metriken erhoben, um zu erkennen, wie oft welches Feld tatsächlich genutzt wird. Ich habe deshalb aus heuristischer beziehungsweise Expertensicht eingeschätzt, welche Informationen sofort sichtbar sein sollten und was vermutlich seltener gebraucht wird. Auf dieser Grundlage habe ich die Produktfotos weiter unten platziert, den Weißraum durch das Auslagern beziehungsweise Streichen einzelner Eingabefelder reduziert, farblich stärker mit Hierarchie gearbeitet und die Pflegehistorie in einen eigenen Tab ausgelagert, da Nutzer:innen sie der Hypothese nach nicht immer sofort benötigen.

Toolbars mit derart vielen Items gilt es in der Praxis eigentlich zu vermeiden. Da es im Team zu unterschiedlichen Hypothesen zur tatsächlichen Nutzung kam, entschieden wir uns aber für die vollständige Darstellung, bis eine Datengrundlage zur Nutzung geschaffen wurde, unter anderem über die inzwischen implementierten Metriken und Event-Tracking. Meine Empfehlung ist deshalb, nicht direkt in die UI-Umsetzung zu gehen, sondern vorher zu klären, wie eine Funktion tatsächlich genutzt wird, und das immer auch gegen Aufwand, Mehrwert und Risiko abzuwägen: Bei geringem Risiko und geringem Aufwand kann eine Änderung auch ohne vollständige Datenlage sinnvoll sein, bei hohem Aufwand ohne klaren Mehrwert oder hohem Risiko eher nicht.

Produktdetailseite vor dem Redesign, mit langer Scrollstrecke und vielen Informationen ohne klare Hierarchie
Produktdetailseite nach dem Redesign, mit Tabs für Produktdetails und Pflegehistorie

Die Produktdetailseite vor dem Redesign und danach, mit Tabs statt langer Scrollstrecke.

Redesign der Kommentarübersicht

Zur Kommentarübersicht gab es im Zuge der Farbanpassung die Anforderung, diese nutzerfreundlicher zu gestalten, insbesondere in der Seitenansicht auf der Produktdetailseite. Als UX-Designerin sehe ich es als meine Aufgabe, Empfehlungen zu geben, wenn mir dabei Probleme auffallen. Darum habe ich mir allgemein folgende Fragen zur Kommentarfunktion gestellt: Lässt sich das Problem nicht anders lösen? Warum ist die Toolbar überhaupt so lang geworden? Wo liegt das eigentliche Problem, und wie lässt sich die Seite insgesamt übersichtlicher und nutzerfreundlicher gestalten? Dabei ist mir aufgefallen, dass die lange Toolbar wahrscheinlich dadurch entstanden ist, dass es vor der Einführung des Tabsystems keine andere Möglichkeit gab, all diese Funktionen unterzubringen, weshalb ich dieses ursächliche Problem beim UI-Design direkt mit berücksichtigt habe.

Schließlich gab es in der Sidebar noch einen weiteren Bug, bei dem das Onboarding optisch hineinragt, wichtige Funktionen überdeckt und die Kommentarfunktion stört. Auch dieser musste behoben werden, allerdings in einem separaten Schritt.

Bisherige Kommentarübersicht im CRM, als ungefilterte Liste ohne Schnellfilter
Aktuelle, mobile Darstellung der Kommentar-Sidebar, in die das blueplant-Onboarding optisch hineinragt

Der Ist-Zustand: links die bisherige Kommentarübersicht als lange, ungefilterte Liste, rechts die aktuelle Kommentar-Sidebar auf der Produktdetailseite, in die das Onboarding optisch hineinragt.

Die folgende Optimierung ist auf Basis meines eigenen mentalen Modells von Kommentaren entwickelt worden: Wer Kommentare verfassen kann, erwartet meist, dass sich das ähnlich wie in vergleichbaren Produkten aus dem Arbeitskontext, etwa im Sinne von Projektmanagement-Tools, verhält, üblicherweise verbunden mit einem Benachrichtigungssystem.

Daraus entstanden zwei Ideen: zum einen, Kommentare und Aufgaben, die beide eher Verknüpfungen als eigenständige Bereiche darstellen, in das inzwischen vorhandene Tabsystem der Produktdetailseite auszulagern, ergänzt um eine kürzere Microcopy beim Button "QR-Code zuordnen". Zum anderen, zusätzlich ein Benachrichtigungssystem zu entwerfen, damit Nutzer:innen nicht mehr aktiv auf der Kommentarübersicht nachsehen müssen, sondern direkt informiert werden und schnell reagieren können, statt sich später durch eine lange Liste unbearbeiteter Kommentare zu arbeiten.

Für die Kommentare direkt auf der Produktdetailseite habe ich mich für ein typisches Layout entschieden, bei dem sich neue Kommentare oben verfassen lassen und darunter chronologisch nach "Neu" und "Älter" gruppiert angezeigt werden, damit sofort erkennbar ist, was bereits gelesen wurde und was nicht. Jeder Kommentar lässt sich zusätzlich manuell als gelesen oder ungelesen markieren, um ihn auch im Nachgang noch einmal abarbeiten zu können. Eigene Kommentare lassen sich bearbeiten oder endgültig löschen, auf Kommentare lässt sich reagieren, und wie bisher schon lassen sich Nutzer:innen erwähnen und Anhänge hinzufügen.

Überarbeitete Kommentardarstellung als eigener Tab auf der Produktdetailseite, mit Eingabefeld oben und Kommentaren gruppiert nach Neu und Älter

Zusätzlich zeige ich, wie die Darstellung über eine Sidebar aussehen könnte, als Alternative für den Fall, dass man die bisherige Struktur beibehalten und Kommentare weiterhin über einen Button in einer Sidebar aufrufbar machen möchte. Diese hätte den Vorteil, Kommentare weiterhin direkt mit den Produktinformationen daneben abgleichen zu können. Rückblickend würde ich die Kommentare in der Sidebar umgekehrt abbilden, als im Screenshot zu sehen. Ein neuer Kommentar würde dort unterhalb der bestehenden Kommentare verfasst, wodurch er direkt im Kontext der aktuellen Kommentare sichtbar wäre, ähnlich einem Chatverlauf. Bei der Tab-Darstellung ist es dagegen genau andersherum: Dort steht das Eingabefeld für neue Kommentare oberhalb der bestehenden Kommentare, weshalb ein neuer Kommentar auch direkt darunter abgebildet wird.

Grundsätzlich kann sich das mentale Modell, in welcher Reihenfolge man Kommentare verfasst und liest, von Mensch zu Mensch unterscheiden, weshalb manche Produkte auch Features anbieten, um diese Reihenfolge umzukehren. Auch zwischen Regionen oder Ländern können dabei ganz unterschiedliche mentale Modelle bestehen. Für blueplant sehe ich in der fehlenden Kenntnis über das jeweilige mentale Modell aktuell kein großes Risiko. Je nach Produkt und Zielgruppe kann das aber durchaus wichtig werden, letztlich kommt es darauf an, seine Nutzer:innen zu kennen, notfalls eben über entsprechende User Research.

Bleibt in der Sidebar Platz übrig, ließe sich dieser außerdem für kleine Hilfestellungen nutzen, im gezeigten Mockup etwa am Beispiel der Erwähnungsfunktion über @, um Nutzer:innen so auch unterbewusst mit dem Tool vertraut zu machen. Reicht der Platz nicht aus, würde stattdessen die Paginierung angezeigt.

Alternativer Entwurf, Kommentare weiterhin in einer Sidebar neben den Produktinformationen

Besonders gut gefällt mir an der neuen Darstellung, dass der Bereich zum Verfassen eines Kommentars deutlich erkennbar ist. Nutzer:innen sehen sofort, wo sie etwas hinzufügen können, die verwendeten Symbole sind vertraut, und der primäre Button zum Abschicken eines Kommentars ist jetzt auffällig und eindeutig, wodurch die Darstellung insgesamt nutzerfreundlicher wirkt.

Für die Kommentarübersicht selbst entschied ich mich für Schnellfilter, um vor allem relevante Kommentare schnell filtern zu können: nach ungelesen, abgeschlossen, mich betreffend, von mir erstellt oder in den letzten sieben Tagen neu hinzugekommen. Zusätzlich werden eigene Erwähnungen sowie neue, ungelesene Einträge sichtbarer hervorgehoben, allgemeine Erwähnungen dagegen dezenter in Grau. Auch Suche, Sortierung und die Tabelle selbst sind gegenüber der ersten Fassung deutlich übersichtlicher gestaltet.

Überarbeitete Kommentarübersicht mit Schnellfiltern, farblich hervorgehobenen Erwähnungen und übersichtlicherer Tabelle

Ergänzend habe ich auch den Leerzustand gestaltet, der einheitlich für alle leeren Tabellen in der Anwendung verwendet wird, hier für den Fall, dass keine Kommentare vorhanden sind.

Leerzustand der Kommentarübersicht, wenn keine Kommentare vorhanden sind

Die zweite Idee war das bereits erwähnte Benachrichtigungssystem, über das Nutzer:innen informiert werden, sobald ein neuer Kommentar hinzukommt, jemand auf einen ihrer Kommentare reagiert oder sie in einem Kommentar erwähnt wurden. Das ermöglicht nicht nur ein schnelleres Abarbeiten von Kommentaren, sondern auch einen zeitlichen Verlauf: Man sieht auf einen Blick, was zuletzt passiert ist, ohne sich durch die gesamte Anwendung klicken zu müssen. Das macht es meiner Ansicht nach einfacher, die Anwendung zu bedienen sowie Aufgaben und Geschehnisse abzuarbeiten und nachzuvollziehen, da sich Benachrichtigungen nach Zeitraum und Kategorie sortieren, alle neuen und ungelesenen durchklicken und bei Bedarf wieder als gelesen oder ungelesen markieren lassen. Das Reagieren auf Kommentare sollte dabei zusätzlich helfen, den Status eines Kommentars zu kommunizieren, etwa im Sinne von "gelesen", "gut gemacht" oder "erledigt".

Kompaktes Benachrichtigungs-Panel mit neuen Kommentaren, Reaktionen und Erwähnungen
Eigene Seite für Benachrichtigungen, unterteilt nach Kommentaren, Erwähnungen, Reaktionen, Aufgaben und Terminen

UI-Spezifikation zur Kennzeichnung von Premium-Inhalten

blueplant sollte im Laufe der Zeit um Premium-Funktionen erweitert werden, die nur im Rahmen eines Abonnements zugänglich sind. Damit Nutzer:innen aus der Raumbegrünung blueplant zunächst kostenfrei kennenlernen könnten, war es wichtig, in der Bedienung sofort zu erkennen, welche Funktionen zur Verfügung stehen und welche ein Premium-Abonnement voraussetzen. Dafür ist diese Spezifikation zur Kennzeichnung entstanden.

Die Umsetzung ging vergleichsweise schnell und war gestalterisch überschaubar, dafür zieht sie sich, einmal abgeschlossen, durch die gesamte Anwendung.

Ich habe mir dazu Komponenten erstellt, die das Premium-Feature in verschiedenen Kontexten kennzeichnen können, etwa bei wenig oder viel Platz, wenn eine Aktion dahintersteckt oder wenn einfach nur ein Inhalt gekennzeichnet werden soll. Pro-Features werden beispielsweise mit einem Pro-Label versehen, das je nach Kontext knapp als eigenes Badge mit Icon, als reines Icon oder als Text dargestellt werden kann; handelt es sich um eine interaktive Funktion mit Lock-Funktion, wird stattdessen der ganze Button entsprechend gekennzeichnet. Für zusammenhängende Premium-Features habe ich außerdem eine Paywall entworfen: Das Feature wird angeteasert sichtbar, aber deaktiviert dargestellt, und ein Klick darauf öffnet ein Modal, das die Vorteile von Premium, den Preis sowie den Call-to-Action zum Upgrade zeigt.

Im Screenshot ist zudem eine Token-Dokumentation der Kennzeichnung zu sehen. Auf eine solche verzichten wir aktuell allerdings, da unser Entwicklerteam über den Figma-Dev-Mode direkten Zugriff auf diese Informationen hat, wodurch sich auch künftig Aufwand sparen lässt.

UI-Spezifikation für die Kennzeichnung von Premium-Inhalten in blueplant, mit Badges, Paywall und Upgrade-Modal

Punktuelle Unterstützung der mobilen App

Für die mobile App von blueplant wurde ich nur gelegentlich beratend eingesetzt, unter anderem in Zusammenarbeit mit unserem Mobile-App-Entwickler, durch den ich auch einiges über die Möglichkeiten der App-Gestaltung mittels Flutter gelernt habe. Für ein Feature, die Aufgabenübersicht, wurde ich 2026 gezielt für ein UI-Design hinzugezogen, wo ich mich zum ersten Mal in Figma mit Material Design auseinandersetzen konnte. Die gezeigten High-Fidelity-Mockups habe ich dabei in Figma erstellt. Die Aufgabenübersicht sollte um neue Informationen zu einzelnen Aufgaben ergänzt werden, was bei der bisherigen Darstellung aufgrund der überladenen Informationen und fehlenden Hierarchie nur bedingt möglich gewesen wäre. Im Zuge dessen ist mir außerdem aufgefallen, dass auch die Darstellung der Kommentare auf der Aufgabenseite nicht selbsterklärend war. Deshalb habe ich nicht nur die Aufgabenübersicht, sondern auch die Kommentardarstellung auf der Aufgaben-Detailseite neu gestaltet.

Ansicht der blueplant-App vor der UI-Optimierung, überladen und ohne klare Hierarchie

Wie auch für jedes andere UI-Design habe ich dafür die Material-Design-Library aufgesetzt, mit unserem Design-System abgestimmt und darauf aufbauend eigene Komponenten ergänzt, damit sich damit auch für weitere App-Mockups weiterarbeiten lässt. Das Mockup selbst habe ich mit Auto Layout umgesetzt.

In Figma angelegte Komponenten für Aufgabenkarten, Filter-Chips und Kommentare

Meine Lösung war, den Button zum Hinzufügen neuer Aufgaben weniger prominent zu platzieren und stärker im Kontext zu verankern, nämlich neben der Überschrift "Aufgaben", statt wie zuvor als auffälligen, Inhalte verdeckenden Floating-Button unten rechts. Eine solche Änderung sollte man idealerweise über einen Usability-Test prüfen, um zu sehen, ob Nutzer:innen den Wechsel vom Floating- zum fixen Button auch verstehen. Der Vorteil wäre, dass der Button keine Inhalte mehr verdeckt und die kognitive Last durch verdeckte Informationen reduziert wird.

Weitere Anpassungen an der Aufgabenübersicht, unter anderem:

  • Status als farbiger, direkt filterbarer Badge statt reiner Kennzeichnung, um Aufgaben schneller nach Status zu filtern.
  • Sortierung als Icon, um Platz zu sparen.
  • Aufgaben in Abschnitte unterteilt, damit sich Aufgaben verschiedener Seiten klarer unterscheiden lassen.
  • Aktive Seite im unteren Navigationsmenü farblich hervorgehoben, damit schneller erkennbar ist, wo man sich befindet.
  • Schriftgrößen stärker nach Hierarchie gestaffelt, Abstände insgesamt verringert und an einzelnen Stellen gezielt vergrößert.
  • Farben aus dem bestehenden Design-System übernommen, um ein konsistentes Markenbild über alle Touchpoints hinweg sicherzustellen.
  • Verknüpfungen zu Terminen, Standorten und Produkten in Form von Icons in der Aufgabenübersicht dargestellt, um auf einen Blick zu erkennen, welche Verknüpfungen zu einer Aufgabe bestehen; beim Antippen der jeweiligen Aufgabe werden sie ausgeschrieben angezeigt.
  • Neues Tab-System, um das Scrollen zu reduzieren und Informationen auf einen Blick überschaubar zu machen, etwa um direkt zu sehen, ob zu einer Aufgabe bereits Kommentare hinterlegt wurden.
  • Kommentare im Chat-Layout, um an das mentale Modell aus klassischen Messenger-Anwendungen anzuknüpfen und die Darstellung dadurch selbsterklärend zu machen. Der Verlauf zeigt auf einen Blick, ob ein Kommentar von einem selbst oder von einer anderen Pflanzenpflegekraft stammt, dazu Name sowie Datum und Uhrzeit. Eigene Kommentare lassen sich bei entsprechender Berechtigung direkt löschen, neue Kommentare werden wie in anderen Anwendungen gewohnt über eine Eingabezeile am unteren Rand hinzugefügt.
Ansicht der blueplant-App nach der UI-Optimierung

Produktfotografie für CRM, App und Wasserstandsmesser sowie Print

Ergänzend zur Mitarbeiterfotografie habe ich auch Produktfotoshootings organisiert und durchgeführt. Ziel war, unsere Produkte auf der Webseite stärker und authentischer im Einsatz darzustellen, sodass man sich die Bedienung besser vorstellen kann, und zusätzlich Bildmaterial für Social Media zu schaffen.

Den Anfang machten Aufnahmen der App und des CRM-Systems.

Um zu zeigen, wie ich solche Fotos bearbeite, hier die unbearbeitete Rohaufnahme des Smartphone-Mockups im Vergleich zum finalen Bild: Das auf dem Rohbild sichtbare UI ist nicht das, was letztlich abgebildet wurde, sondern entsteht erst nachträglich. Je nach Kameraeinstellung und Lichtfrequenz des Displays entstehen beim Fotografieren eines Bildschirms außerdem solche Streifen, weshalb ich das eigentliche UI-Design darüber platzieren und die Aufnahme entsprechend retuschieren musste.

Unbearbeitete Rohaufnahme des Smartphone-Mockups, mit Lichtstreifen auf dem Display durch die Kameraeinstellungen
Die blueplant-App in der Hand, im Hintergrund eine echte grüne Pflanze

Links die unbearbeitete Rohaufnahme, noch ohne das eigentliche UI-Design und mit sichtbaren Lichtstreifen auf dem Display; rechts das finale Bild im praktischen Einsatz vor Ort.

Die blueplant-Webseite, fotografiert auf einem Laptop

Ein weiterer Teil der Fotografie umfasste unser Produkt, den Wasserstandsmesser. Dieser befand sich noch nicht in unserem blueplant-Branding und sollte das Erfassen des Pflanzenzustands über einen QR-Code erleichtern. Dafür waren ein Druckdesign sowie eine Produktfotografie nötig, Letztere habe ich übernommen.

Ich habe dafür ein Blatt Papier auf einem Tisch aufgestellt, den Wasserstandsmesser mit der roten Kappe darauf platziert und mit meiner Sony A7 III sowie einem 85-mm-Objektiv am Tisch vor dem Fenster fotografiert, sodass das Produkt durch die indirekte Fensterbeleuchtung ausgeleuchtet wurde. Besonders gut gefällt mir an diesem Foto, wie Licht und Schatten dabei fallen und wie sauber und weich der Übergang durch das Papier wirkt.

Der blueplant-Wasserstandsmesser als unbedrucktes Originalprodukt mit rotem Deckel, freigestellt vor weißem Papier

Auf Basis dieses Produktfotos sind anschließend verschiedene Entwürfe entstanden, wie sich der Wasserstandsmesser kennzeichnen lässt, unter anderem in unserer Primär- und Sekundärfarbe, in einheitlicher Farbgebung sowie in Kombination aus beiden, jeweils samt Messskala. Entschieden haben wir uns schließlich für die dunkle Variante, da das Dunkelblau näher an unserer Primärfarbe liegt und zusätzlich auch aus der Distanz besser lesbar ist.

Sechs Gestaltungsvarianten des Wasserstandsmessers in unterschiedlichen Farbtönen für den Druck

Anschließend habe ich in Photoshop den QR-Code ergänzt. Inzwischen wurde diese Idee weiterentwickelt: Pflanzenpflegerinnen und -pfleger können den Pflegestatus bereits per NFC erfassen und müssen den QR-Code dafür nicht mehr scannen.

Finale Produktionsversion des Wasserstandsmessers mit aufgebrachtem QR-Code
Die gedruckte, finale Version des Wasserstandsmessers, fotografiert in einer Pflanze

Um das neue Produkt zu bewerben, habe ich außerdem dabei unterstützt, eine Landingpage auf der Webseite zu erstellen, über die sich Wasserstandsmesser bestellen ließen, sowie einen Flyer zur Bewerbung gestaltet. Die Druck- beziehungsweise Bilddatei des Flyers selbst konnte ich nicht mehr auffinden, wohl aber diese Fotografien davon, auf denen sich das Deckblatt sowie die beiden Innenseiten erkennen lassen, darunter auch der QR-Code, der zur Landingpage führt.

Gedruckter Flyer des blueplant-Wasserstandsmessers in der Hand
Der Flyer wird gemeinsam im Team durchgesehen

Eine Foto-Kampagne für blueplant auf Social Media

Um blueplant auf Social Media stärker zu bewerben und Vertrauen bei unserer Zielgruppe aufzubauen, wollten wir das Team hinter blueplant vorstellen. Die Idee dazu kam aus dem Marketing-Team: Jedes Teammitglied hielt für ein Foto eine blaue Plastikpflanze in der Hand, die als wiederkehrendes Motiv mit blueplant assoziiert wird. Die Aktion kam gut an, auch weil jede:r eine eigene Idee einbrachte, wie er oder sie mit der Pflanze posieren wollte.

In einer zweiten Runde haben wir das Format erweitert und die Mitarbeitenden zusätzlich an ihrem tatsächlichen Arbeitsplatz mit der Pflanze im Bild fotografiert, um einen noch authentischeren Eindruck vom Arbeitsalltag zu vermitteln.

Meine Rolle dabei war, alle Teammitglieder von blueplant zu fotografieren, sowohl als Porträtaufnahme als auch im Arbeitskontext, dazu einige Gruppenfotos. Die Aufnahmen fanden vor einer weißen Wand statt und wurden von mir anschließend in Adobe Lightroom Classic mit selbst erstellten Presets bearbeitet, die farblich auf den blueplant-Kontext abgestimmt sind, sodass die Farbgebung über alle Aufnahmen hinweg wiedererkennbar bleibt.

Da es sich bei den entstandenen Fotos um Aufnahmen von Kolleg:innen handelt, zeige ich hier stattdessen Bilder von mir selbst, die eine Kollegin freundlicherweise im Rahmen der Kampagne mit meiner Kamera gemacht hat.

Einzelaufnahme eines Teammitglieds mit der blueplant-Plastikpflanze
Mitarbeiterin am Arbeitsplatz mit der blueplant-Plastikpflanze

Beispielaufnahmen aus der Kampagne: einzeln vor weißer Wand und im Arbeitskontext am eigenen Platz.

Wie es bei blueplant für mich weiterging

Die Arbeit an blueplant verlief über die Jahre eher sporadisch statt durchgängig, hat mir aber sehr viel Spaß gemacht, weil ich die Produktidee an sich sehr spannend fand. Besonders in Erinnerung geblieben ist mir ein Community-Event, bei dem ich direkt mit Kund:innen sprechen und ihre Perspektive hören konnte. Dieses Feedback gab mir noch einmal Bestätigung für unsere Arbeit: Es gibt bereits Raumbegrüner, die mit blueplant echte Erfolge erzielt haben, es weiterhin nutzen und uns erzählt haben, welchen Mehrwert es ihnen bietet. Genau dieses Potenzial gilt es weiter zu fördern.

Wenn dir diese Referenz gefallen hat und du jemanden mit genau diesen Fähigkeiten suchst, melde dich gerne bei mir, ob als Festanstellung oder im Rahmen einer freiberuflichen Zusammenarbeit.

Kontaktaufnahme ist jederzeit willkommen

Du kannst mir Feedback zu meiner Arbeit, einem Projekt oder dieser Website geben, dich mit mir fachlich austauschen oder dich zu einer Zusammenarbeit beraten lassen. Genauso gerne übernehme ich Auftragsarbeiten, vor allem im Bereich Webentwicklung und Webhosting unter Berücksichtigung von UX-Design.

© 2026 Design & Development by Jacqueline Isabelle Klein