Merikh Baft — jede Stoffrolle vom Lager bis zum Kunden verfolgt

01Kontext

Eine Wirkerei für Stoffe, die atmen

Merikh Baft stellt Abstandsgewirke her: ein dreilagiges Textil aus zwei Außenflächen, die durch eine Polschicht verbunden sind. Es lässt Luft durch und behält seine Form. Es steckt in Schuhen, Bürostühlen, Autositzen, Matratzen und Medizinprodukten und wird meterweise an Hersteller und Basar-Großhändler verkauft.

Das ganze Projekt liegt in einer Figma-Datei mit 17 Seiten: ein Marken-Workshop, Personas und eine Tonalität; ein Logo und Visitenkarten; eine persische Website mit Leserichtung von rechts nach links in drei Breiten, samt Anmeldeflow; ein Desktop-Backoffice; und eine mobile Aufgaben-App für die Menschen, die den Stoff bewegen. Zusammen sind das 128 gestaltete Screens.

Website von Merikh Baft am Desktop – eine Hand hält ein Stück Abstandsgewirke neben der Überschrift, darunter eine Kennzahlenleiste — Abbildung 02Die Startseite am Desktop: zuerst die Atmungsaktivität, darunter Kennzahlen zu Kunden, Lieferungen und Lagern.

02Problem

Eine Rolle wechselt viermal die Hände

Zwischen Maschine und Kunde wird eine Rolle gewogen und eingelagert, in die Färberei gebracht, auf einen Lkw geladen und ausgeliefert. Jeder Schritt ist eine Übergabe zwischen Menschen, die nie den ganzen Auftrag sehen. Und jeder ist eine Gelegenheit, eine Rolle falsch zu zählen, zu vertauschen oder zurückzulassen.

Die Frage an die App war schnell gestellt: Wie bestätigt jede Person, dass die Rollen vor ihr die auf der Liste sind – ohne ein System zu lernen, das für die Arbeit eines anderen gebaut wurde?

Eine Rolle, fünf Übergaben

01
Wiegen und etikettierenDas Lager gibt Modell, Gewicht und Länge ein und druckt ein Etikett pro Rolle
02
Ab in die FärbereiDie Färberei scannt die Rollen in ihr Rohwarenlager ein

03Vorgehen

Ein Aufgabenmuster für fünf Rollen

Die App kennt fünf Rollen: Leitung, Lager, Färberei, Fahrer und Kunde. Jede sieht nur ihre eigenen Aufgaben, immer in denselben zwei Ansichten: einer Aufgabenliste und einem Blatt für eine einzelne Aufgabe, das sie in Schritte zerlegt. Jeder Schritt ist als erledigt oder nicht erledigt markiert, und jedes Blatt endet mit denselben zwei Buttons: Problem melden und SMS senden.

Eine Aufgabe lässt sich auf zwei Wegen füllen: durch Eintippen der Daten oder durch Scannen eines QR-Codes. Die Informationsarchitektur neben den Screens zeigt beide Wege und die Etiketten-Pipeline dahinter: Modell, Gewicht und Länge eingeben, ein Etikett mit QR-Code erzeugen, drucken.

Aufgaben-App von Merikh Baft auf dem Smartphone – das Blatt zum Etikettieren neuer Ware: Daten eingeben, pro Rolle ein Etikett drucken, Etiketten anbringen

Aufgaben-App von Merikh Baft – das Blatt der Färberei: QR-Codes scannen, Packliste drucken, Ladung an den Fahrer übergeben, der Fahrer bestätigt

Aufgaben-App von Merikh Baft – die Anfrageliste des Lagers mit den Tabs Offen, In Bearbeitung und Erledigt sowie Buttons zum Erfassen von Daten oder Erzeugen eines QR-Codes — Abbildung 04Die Aufgabenliste des Lagers: Jede Anfrage lässt sich eintippen oder in ein QR-Etikett verwandeln.

04Lösung

Einstellungen für genau eine Tätigkeit

Jede Rolle hat ihre eigenen Einstellungen. Das Lager legt Lagerorte und Maßeinheiten fest – Quadratmeter, laufende Meter oder Kilogramm, manuelle oder automatische Waage, Nachkommastellen und zulässige Bereiche. Die Färberei stellt Maschinen, Farbvorgaben und Chargengröße ein und führt einen Prozessleitfaden. Der Fahrer stellt Routenoptimierung und Benachrichtigungen ein. Der Kunde hinterlegt Lieferadresse, bevorzugte Zahlungsart und Währung.

Die Benachrichtigungen folgen derselben Aufteilung: niedriger Bestand eines Materials, eine von der Qualitätskontrolle beanstandete Rolle, neue Rollen, ein zugewiesener Färbeauftrag, eine geänderte Route, eine vom Kunden quittierte Lieferung.

Alle nutzen dieselbe App, doch ein Fahrer sieht nie eine Einstellung der Färberei.

Aufgaben-App von Merikh Baft – Lagereinstellungen: Lagerorte, Maßeinheiten, Fehlerbehebung und ein direkter Draht zu einem technischen Berater

Aufgaben-App von Merikh Baft – Einstellungen der Färberei: Maschineneinstellungen, Farbvorgaben, Chargengröße, ein Prozessleitfaden und Fehlerbehebung

05Backoffice

Dieselbe Kette, vom Büro aus gesehen

Das Backoffice ist für Desktop und Tablet gedacht: Anfragen, Bestand, Lager, Kunden und Zugriffsrechte. Eine Anfrage zeigt über der Bestellung die Bonität des Kunden in Sternen und seinen offenen Saldo. Darunter folgt eine Timeline in neun Schritten, von der Bestellung über Proformarechnung, Anzahlung, Verladung, Versand und Lieferung bis zur Abrechnung. Danach kommen die Bestellpositionen mit Stoffcode, Menge, Einheit, Zahlungsart, Lagerstatus und Liefertermin.

Die Lagerseite zählt, was die App erzeugt: Gesamtbestand, ausgehende Menge, den nächsten Versandtermin und die Zahl der Rollen in der Warteschlange der Qualitätskontrolle. Eine Kundenseite ergänzt den internen Ansprechpartner, einen nach Einkaufsvolumen gestaffelten Mitgliedsbeitrag und einen Hinweis, wie sich eine Anzahlung auf das Ranking eines Kunden auswirkt.

Backoffice von Merikh Baft – eine Anfrage: Bonität und Saldo des Kunden, die Bestellzahlen, eine Bestell-Timeline in neun Schritten und die Bestellpositionen — Abbildung 06Eine Anfrage im Backoffice: Bonität und Saldo, die Bestellung, eine Timeline in neun Schritten und die Bestellpositionen.

Backoffice von Merikh Baft – die Lagerseite: Gesamtbestand, ausgehende Menge, nächster Versandtermin und die Zahl der Rollen, die auf die Qualitätskontrolle warten

Backoffice von Merikh Baft – ein Kunde: der interne Ansprechpartner, die nächste Lieferung, der Finanzstatus und Tabs für Lieferungen, Zahlungen, Kontakte, Anfragen und Rechnungen

06Website

Beratung vor dem Warenkorb

Die Website wurde in 1.440, 1.028 und 360 Pixel Breite über elf Seiten gestaltet: zwei Versionen der Startseite, eine Stoffseite, die Stoffliste, Branchen und eine Branchenseite, ein Blog und ein Beitrag, Über uns, Kontakt und FAQ. Die Startseite beginnt mit der Atmungsaktivität. Dann folgen Stoffeigenschaften, Branchen, Gründe für Merikh Baft und ein geführtes Beratungsformular: welche Branche, welche Bindungsart, wie viele Meter.

Eine Stoffseite zeigt zuerst eine Spezifikationstabelle – Zusammensetzung, Breite, Dicke, Gewicht, Zertifizierung, Werke – und die passenden Branchen, erst danach den Preis pro Meter. Die Startseite verspricht außerdem eine Auftragsverfolgung über ein Kunden-Dashboard.

Website von Merikh Baft – das Beratungsformular: Branche, Bindungsart und Bestellmenge wählen, dann um Beratung bitten

Website von Merikh Baft – eine Stoffseite: Foto und Farben, passende Branchen, eine Spezifikationstabelle und ein Preis pro Meter

07Personas

Vier Käufer, je ein Blatt

Die Marke kam zuerst. Ein Workshop-Kit – Persönlichkeitsadjektive, eine Liste „ist / ist nicht“, eine Empathiekarte, eine Persona-Vorlage und Fragen wie „Wie würden Sie unseren heutigen Ton im Textilhandel beschreiben?“ – führte zu vier Käufer-Personas.

Jedes Blatt zeigt ein Porträt mit Alter und einigen Einstufungen – wie viel der Käufer über Textilien weiß, ob er intuitiv, logisch oder konventionell vorgeht, wie empfindlich er bei Qualität ist und wie stark er Exklusivität sucht – sowie sechs Felder: Leitspruch, Kurzbiografie, Ziele, Entscheidungshürden und Schmerzpunkte, Zahlungsgewohnheiten und Erwartungen. Der Text ist im alltäglichen, gesprochenen Persisch gehalten, die Porträts sind KI-generiert.

Persona-Blatt von Merikh Baft für Haj Mostafa, einen 60-jährigen Basarhändler: ein KI-generiertes Porträt eines älteren Mannes mit einem gemusterten Stoff in der Hand an einem Marktstand, sein Alter und seine Einstufungen und sechs Textfelder auf Persisch — Abbildung 09Haj Mostafa, 60, ein Basarhändler, der Stoffe an ihrem Code erkennt. Er will der einzige Verkäufer eines Codes im Basar sein, zahlt immer pünktlich und kauft am liebsten per Scheck mit Zahlungsziel. Leitspruch: „Ist unsere Bestellung fertig? Wann wird sie versandt?“

Persona-Blatt von Merikh Baft für Herrn Ehsan, einen 49-jährigen Büromöbelhersteller: ein KI-generiertes Porträt eines Mannes im blauen Sakko, der einen Stoff prüft, sein Alter und seine Einstufungen und sechs Textfelder auf Persisch — Abbildung 10Herr Ehsan, 49, stellt Büromöbel und Bioprodukte her. Er ist Idealist, genau und ordentlich und zahlt seine Schecks am Fälligkeitstag. Leitspruch: „Schicken Sie dieselbe Rechnung wie letztes Mal. Kommt es bis Monatsende an? Die Hälfte zahle ich per Scheck.“

Persona-Blatt von Merikh Baft für Herrn Sohrab, einen 28-jährigen Schuhhersteller: ein KI-generiertes Porträt eines jungen Mannes mit Bart in einem Schuhgeschäft, sein Alter und seine Einstufungen und sechs Textfelder auf Persisch — Abbildung 11Herr Sohrab, 28, führt eine Schuh- und Taschenfabrik. Er jagt Rabatten nach, Unklarheit stört ihn, und er fragt so lange nach, bis er sich des Ergebnisses sicher ist. Leitspruch: „Die Qualität ist wie bei der ausländischen Marke, der Preis ist niedriger – gebt mehr Rabatt.“

Persona-Blatt von Merikh Baft für Frau Mortazavi, eine 40-jährige Einkäuferin in der Medizinbranche: ein KI-generiertes Porträt einer Frau zwischen Stoffballen, ihr Alter, ihre Einstufungen und sechs Textfelder auf Persisch — Abbildung 12Frau Mortazavi, 40, arbeitet in der Medizinbranche. Sie kennt sich mit Textilien gut aus, muss Muster aus der Nähe ansehen und testen und möchte, dass der Stoffhersteller ihr sagt, was sich für den medizinischen Einsatz eignet. Leitspruch: „Ich weiß, was ich für meine Medizinprodukte will!“

08Identität

Dreizehn Regler und ein Monogramm

Die Tonalität ist auf dreizehn Reglern festgelegt, von einfach bis komplex und von schlicht bis hochwertig. Sechs persische Schriften kamen in die engere Wahl, gewählt wurde Yekan Bakh. Das Logo stellt ein Monogramm aus einem Maschenraster im Kreis neben den Namen in lateinischer und persischer Schrift.

Tonalität von Merikh Baft – acht Schieberegler zwischen Paaren wie einfach und komplex, modern und klassisch, schlicht und hochwertig

09Entscheidungen

Fünf Entscheidungen hinter der Kette

Die Datei macht diese Entscheidungen in ihren Screens und im Architekturdiagramm sichtbar.

01
Jeder Rolle dieselben zwei Ansichten geben
Lagerpersonal, Färbereimitarbeiter und Fahrer nutzen die App jeweils für eine einzige Aufgabe. Eine Aufgabenliste und ein Schrittblatt mit erledigt oder nicht erledigt: Mehr muss keiner von ihnen lernen.
Abwägung
In der App sieht niemand den ganzen Auftrag. Dafür muss die Leitung das Backoffice öffnen.
02
Aufgaben eintippen oder scannen lassen
Etiketten werden am Anfang der Kette aus eingetippten Daten gedruckt und danach überall gescannt. Das Architekturdiagramm zeigt beide Eingaben. So lässt sich eine Aufgabe auch dann abschließen, wenn ein Etikett nicht scannbar ist.
Abwägung
Eine getippte Eingabe überspringt die Prüfung, die ein Scan liefert.
03
Die Ladung zweimal prüfen
Der Fahrer gleicht die Ladung in der Färberei mit der Packliste ab, der Kunde bei Ankunft noch einmal. Bei beiden Übergaben geht eine SMS raus, damit jede Seite einen Nachweis hat.

10Meine Rolle

Sinas Anteil

Sina hat die Arbeit in dieser Datei gestaltet, vom Marken-Workshop bis zur Aufgaben-App.

Verantwortet

Der Marken-Workshop, vier Personas und die Tonalität
Das Logo und die Visitenkarten
Die Website in drei Breiten und der Anmeldeflow
Das Backoffice für Anfragen, Bestand, Lager und Kunden
Die Aufgaben-App für fünf Rollen und ihr Architekturdiagramm
Das Designsystem: 21 Komponentensets und 334 Komponenten

Mitverantwortet

Mitgearbeitet

Das Team von Merikh Baft, das am Marken-Workshop teilnahm

Screens in der Datei, die aus anderen Projekten eingefügt wurden, gehören nicht zu dieser Fallstudie und werden nicht gezeigt.

11Kritik

Aktive Zustände, die an die falsche Stelle zeigen

Derselbe kleine Fehler taucht auf allen drei Oberflächen auf. Der Website-Header markiert Kontakt als aktuelle Seite – auf der Startseite, der Stoffseite und der Stoffliste. Die Lagerseite des Backoffice hebt in der Seitenleiste Anfragen hervor, und zwei der drei Seitenleisten-Versionen führen Kunden doppelt, unter zwei Namen mit zwei Icons. In der App zeigen die Einstellungsscreens das Aufgaben-Icon auf dem Tab für Benachrichtigungen.

Die Desktop-Anfrageseite zeichnet ihre Bestell-Timeline als neun Kreise ohne Beschriftung. Die wichtigste Abfolge im Büro muss man also aus dem Gedächtnis lesen. Und die mobile Spalte des Backoffice enthält vier leere Frames.

In jeder Tabelle wiederholt jede Zeile dieselben Platzhalterwerte – ein Stoffcode, eine Länge, ein Preis. Keine Tabelle wurde also mit echten Daten getestet.
Die Website verspricht ein Kunden-Dashboard zur Auftragsverfolgung, doch ein solches Dashboard wurde nie gestaltet.

Der Navigationszustand ist Inhalt: Stimmt er nicht, verlieren Nutzer das Vertrauen darin, wo sie sind.

Backoffice von Merikh Baft – drei Versionen der Seitenleiste nebeneinander, mit unterschiedlichen Einträgen und jeweils einem anderen hervorgehobenen Eintrag — Abbildung 14Drei Seitenleisten aus einem Backoffice: Die ersten beiden führen Kunden doppelt, und die mittlere, auf der Lagerseite, hebt Anfragen hervor.

12System

Ein System in Version 0.0.1, in Marineblau und Blau

Das Designsystem trägt die Versionsnummer 0.0.1. Es umfasst 21 Komponentensets und 334 Komponenten: Farbe, Typografie, Formularfelder, Buttons, Breadcrumbs, Checkboxen und Radiobuttons, Schalter, Modals, Toasts, Profil, Header und Footer sowie das Seitenmenü. Die Farbe besteht aus 22 Styles in einer Blau- und einer Grauskala, mit dem Marineblau der Marke am dunklen Ende des Blaus. Die Typografie besteht aus 11 Styles, alle in Yekan Bakh, von einer 24-Pixel-Überschrift bis zu 12 Pixel Fließtext.

Wie die meisten ersten Versionen speichert es alles als Styles. Es gibt nur eine einzige Variable, deshalb kann das System noch nicht zwischen Themes oder Dichten wechseln.

Designsystem von Merikh Baft, Version 0.0.1 – die blaue Hauptskala und die Grauskala — Abbildung 15Die Farbtafel, Version 0.0.1: das Hauptblau und die Grauskala.

13Ergebnisse

Eine vollständige Designdokumentation

Ob Website oder App veröffentlicht wurden, geht aus der Datei nicht hervor. Nutzungszahlen gibt es daher keine. Die Datei enthält ein vollständiges Design für Marke, Vertrieb und Betrieb eines Textilwerks.

gestaltete Screens: 128; 32 in der App, 24 im Backoffice, 46 auf der Website und 26 für die Anmeldung; Gelieferter Output
Rollen in der Aufgaben-App: 5; Leitung, Lager, Färberei, Fahrer und Kunde; Gelieferter Output
Komponenten im Designsystem: 334; 21 Komponentensets, alle in Yekan Bakh gesetzt; Gelieferter Output

Was geliefert wurde

Ein Marken-Workshop, vier Personas und eine Tonalität
Ein Logo und Visitenkarten
Eine persische Website in drei Breiten, mit Anmeldung
Ein Backoffice für Anfragen, Bestand, Lager und Kunden
Eine mobile Aufgaben-App für fünf Rollen, mit QR-Etiketten
Ein Designsystem, Version 0.0.1

14Gelernt

Was ich ändern würde

01
Den aktiven Zustand auf jedem Screen prüfen
Derselbe Ausrutscher steckt in der Website, im Backoffice und in der App. Ein Durchgang mit einer Frage pro Screen – wo bin ich laut dieser Anzeige? – hätte alle drei gefunden.
02
Tabellen mit echten Daten füllen
Jede Tabellenzeile wiederholt einen Stoffcode und einen Preis. Echte Stoffcodes, lange Kundennamen und gemischte Einheiten hätten gezeigt, wo die Tabellen brechen.
03
Die wichtigste Abfolge beschriften
Die Bestell-Timeline ist die Sicht des Büros auf die ganze Kette, und am Desktop hat sie keine Beschriftungen. Die wichtigste Abfolge eines Produkts sollte die am leichtesten lesbare sein.

Sprache