Merikh Baft — tracking every fabric roll from warehouse to customer
A spacer-fabric mill where every roll carries a QR label and each hand-off, from dye house to driver to customer, is checked.
Company
Independent
Role
Product designer
Type
Product · Systems
Industry
Textiles · B2B manufacturing
Team
One Figma file: brand, website, back office and a five-role task app
Tools
Figma
The problem
A roll of fabric passes through the warehouse, the dye house, a driver and a customer, and at each hand-off it can be miscounted or lost.
The role
Product designer across brand discovery, identity, a responsive website, a desktop back office and a role-based mobile app.
The result
128 designed screens and a 334-component library; the file does not record whether the product launched.
Figure 01
Figure 01The task app on a phone: labelling new rolls in the warehouse, the driver’s load check, and the website’s home page.
01Context
A mill that knits fabric that breathes
Merikh Baft knits spacer fabric: a three-layer textile, two outer faces joined by a layer of pile, that lets air through and holds its shape. It goes into shoes, office chairs, car seats, mattresses and medical products, and it is sold by the metre to manufacturers and bazaar wholesalers.
The whole project sits in one Figma file of 17 pages: a brand workshop, personas and a tone of voice; a logo and business cards; a Persian right-to-left website at three widths with its sign-in flow; a desktop back office; and a mobile task app for the people who move the fabric. That comes to 128 designed screens.
Figure 02The home page on desktop: breathability first, with figures for customers, shipments and warehouses below.
02Problem
A roll changes hands four times
Between the loom and the customer a roll is weighed and stored, moved into the dye house, loaded onto a truck and delivered. Each move is a hand-off between people who never see the whole order, and each one is a chance for a roll to be miscounted, swapped or left behind.
The question for the app was simple to state: how does each person confirm that the rolls in front of them are the ones on the list, without learning a system built for someone else’s job?
One roll, five hand-offs
01
Weigh and labelThe warehouse enters model, weight and length and prints one label per roll
02
Into the dye houseThe dye house scans the rolls into its raw-fabric store
03Approach
One task pattern for five roles
The app has five roles: manager, warehouse, dye house, driver and customer. Each sees only its own tasks, in the same two views: a list of tasks, and a sheet for one task that breaks it into steps. Every step is marked done or not done, and every sheet ends with the same two buttons: report a problem, and send an SMS.
A task can be fed two ways, by typing its data or by scanning a QR code. The information architecture drawn beside the screens shows both paths, and the label pipeline behind them: enter the model, weight and length, produce a label and its QR code, print it.
Warehouse: enter the data, print a label per roll, attach it.
Dye house: scan the rolls in, print the packing list, hand over to the driver.
Driver: match the load to the packing list, then confirm delivery.
01Requests split into pending, in progress and done
02Each request names the job and the time it was raised
03Two ways in: enter the data by hand, or generate a QR code
Figure 04The warehouse’s task list: every request can be typed in or turned into a QR label.
04Solution
Settings that belong to one job
Each role’s settings are its own. The warehouse sets storehouse locations and units of measure — square metres, running metres or kilograms, a manual or automatic scale, decimal places and allowed ranges. The dye house sets machines, colour preferences and batch size, and keeps a process guide. The driver sets route optimisation and alerts. The customer sets a delivery address, a preferred payment method and currency.
Notifications follow the same split: low stock of a material, a defective roll flagged by quality control, new rolls, a dye request assigned, a route changed, a delivery signed for by the customer.
Everyone uses the same app, but a driver never sees a dye-house setting.
Warehouse
05Back office
The same chain, seen from the office
The back office is for desktop and tablet: requests, stock, warehouses, customers and access levels. A request shows the customer’s credit rating in stars and their outstanding balance above the order, then a nine-step timeline from placing the order through the pro-forma invoice, the deposit, loading, shipping and delivery to settlement, then the order lines with fabric code, quantity, unit, payment method, stock status and delivery date.
The warehouse page counts what the app produces: total stock, outgoing volume, the next shipping date and the number of rolls waiting in the quality-control queue. A customer page adds the in-house representative, a membership fee tiered by purchase volume, and a note on how a deposit affects a customer’s ranking.
Figure 06A request in the back office: credit rating and balance, the order, a nine-step timeline and the order lines.
The warehouse page counts rolls waiting for quality control.
06Website
Advice before a basket
The website was drawn at 1,440, 1,028 and 360 pixels across eleven pages: two versions of the home page, a fabric page, the fabric list, industries and an industry page, a blog and a post, about, contact and FAQ. The home page opens on breathability, then fabric properties, industries, why Merikh Baft, and a guided consultation form: which industry, which weave, how many metres.
A fabric page leads with a spec table — composition, width, thickness, weight, certification, factories — and the industries it suits, before the price per metre. The home page also promises order tracking through a customer dashboard.
The consultation form: industry, weave and order size.
07Personas
Four buyers, one sheet each
The brand came first. A workshop kit — personality adjectives, an is and is-not list, an empathy map, a persona template and questions such as “How would you describe our current tone in the textile trade?” — led to four buyer personas.
Each sheet has a portrait with an age and a few ratings — how much the buyer knows about textiles, whether they are intuitive, logical or customary, how sensitive they are to quality, and how strongly they seek exclusivity — and six boxes: a catchphrase, a short biography, goals, decision barriers and pain points, payment habits and expectations. The text is in everyday spoken Persian, and the portraits are AI-generated.
Figure 09Haj Mostafa, 60, a bazaar trader who knows fabrics by their code. He wants to be the only seller of a code in the bazaar, always pays on time and prefers to buy on cheque terms. Catchphrase: “Is our order ready? When will it ship?”
Figure 10Mr Ehsan, 49, makes office furniture and organic products. An idealist, precise and orderly, he pays his cheques on the due date. Catchphrase: “Send the same invoice as last time. Will it get here by month end? I’ll pay half by cheque.”
Figure 11Mr Sohrab, 28, runs a shoe and bag factory. He chases discounts, ambiguity bothers him, and he keeps asking questions until he is sure of the result. Catchphrase: “Its quality is like the foreign brand’s and its price is lower — give a bigger discount.”
Figure 12Ms Mortazavi, 40, works in the medical industry. She knows textiles well, must see samples up close and test them, and wants the fabric maker to tell her what suits medical use. Catchphrase: “I know what I want for my medical products!”
08Identity
Thirteen sliders and a monogram
The tone of voice is set on thirteen sliders, from simple to complex and basic to high-end. Six Persian typefaces were shortlisted and Yekan Bakh was chosen. The logo sets a knit-grid monogram in a circle beside the name in Latin and Persian script.
The logo in Latin and Persian script.
09Key decisions
Five decisions behind the chain
The file makes these choices visible in its screens and its architecture diagram.
01
Give every role the same two views
Warehouse staff, dye-house operators and drivers use the app for one job each. A task list and a step sheet with done or not done is the only thing any of them has to learn.
Trade-off
Nobody in the app sees the whole order; the manager has to open the back office for that.
02
Let a task be typed or scanned
Labels are printed from typed data at the start of the chain, and scanned everywhere after. The architecture diagram draws both inputs, so a task can still be completed when a label cannot be scanned.
Trade-off
A typed entry skips the check that a scan gives.
03
Check the load twice
The driver matches the load against the packing list at the dye house, and the customer matches it again on arrival. An SMS is sent at both hand-offs, so each side has a record.
Trade-off
10My role
Sina’s part
Sina designed the work in this file, from the brand workshop to the task app.
Owned
↳The brand workshop, four personas and the tone of voice
↳The logo and business cards
↳The website at three widths and the sign-in flow
↳The back office for requests, stock, warehouses and customers
↳The five-role task app and its architecture diagram
↳The design system: 21 component sets and 334 components
Co-owned
—
Collaborated
↳Merikh Baft’s team, who took part in the brand workshop
Screens in the file that were pasted from other projects are not part of this study and are not shown.
11Critique
Active states that point to the wrong place
The same small error recurs on all three surfaces. The website header marks Contact as the current page on the home page, the fabric page and the fabric list. The back office’s warehouse page highlights Requests in the sidebar, and two of the three sidebar versions list customers twice, under two names with two icons. In the app, the settings screens show the task icon on the notifications tab.
The desktop request page draws its nine-step order timeline as nine circles without labels, so the most important sequence in the office has to be read from memory. And the back office’s mobile column holds four empty frames.
Within each table every row repeats the same placeholder values — one fabric code, one length, one price — so no table was tried with real data.
The website promises a customer dashboard for tracking orders, and no such dashboard was designed.
Navigation state is content: when it is wrong, users stop trusting where they are.
Figure 14Three sidebars from one back office: the first two list customers twice, and the middle one, on the warehouse page, highlights Requests.
12System
A 0.0.1 system in navy and blue
The design system is labelled version 0.0.1. It has 21 component sets and 334 components across colour, type, form fields, buttons, breadcrumbs, checkboxes and radios, toggles, modals, toasts, profile, header and footer, and the side menu. Colour is 22 styles in a blue ramp and a grey ramp, with the brand’s navy at the dark end of the blue; type is 11 styles, all Yekan Bakh, from a 24-pixel heading down to a 12-pixel body.
Like most first versions it stores everything as styles. There is a single variable, so the system cannot yet switch theme or density.
Figure 15The colour board, version 0.0.1: the main blue and the grey ramp.
13Outcomes
A full design record
The file does not record whether the website or the app launched, so there are no usage numbers to report. What it holds is a complete design for a mill’s brand, sales and operations.
designed screens
128
32 in the app, 24 in the back office, 46 on the website and 26 for sign-in
Delivered output
roles in the task app
5
Manager, warehouse, dye house, driver and customer
Delivered output
design-system components
334
21 component sets, all set in Yekan Bakh
Delivered output
What was delivered
↳A brand workshop, four personas and a tone of voice
↳A logo and business cards
↳A Persian website at three widths, with sign-in
↳A back office for requests, stock, warehouses and customers
↳A mobile task app for five roles, with QR labels
↳A design system, version 0.0.1
14What I learned
What I’d change
01
Check the active state on every screen
The same slip appears on the website, the back office and the app. A pass that asks one question per screen — where does this say I am? — would have caught all three.
02
Fill tables with real data
Every row in a table repeats one fabric code and one price. Real fabric codes, long customer names and mixed units would have shown where the tables break.
03
Label the sequence that matters most
The order timeline is the office’s view of the whole chain, and on desktop it has no labels. The most important sequence in a product should be the easiest one to read.
Packing listThe manager releases the packing list from the finished-goods store to the driver
04
Load checkThe driver matches the load against the packing list
05
Delivery checkThe customer matches it again on arrival and an SMS confirms receipt
Customer: confirm receipt, then confirm the load matches the list.
Figure 03One roll’s journey as four task sheets, each ending with report a problem and an SMS.
Dye house
Driver
Customer
Figure 05Settings by role: warehouse, dye house, driver and customer each see only their own.
A customer page: representative, next delivery, balance and five tabs of history.
Figure 07Stock and customers.
A fabric page: spec table and industries before the price.
Figure 08The website asks what a buyer needs before it sells.
Tone of voice: eight of the thirteen sliders.
Figure 13The identity: the knit-grid logo, and the first of two tone-of-voice sheets.
Two extra steps at every delivery, and a mismatch has only one way out: report a problem.
04
Advise before selling
The personas buy by industry and by habit, and one of them must test samples first. The home page leads with a consultation form, and a fabric page shows specs and industries before its price.
Trade-off
A repeat buyer who knows the fabric code takes a longer path to the basket.
05
Put credit and cheques in the product
B2B textile buyers in Iran often pay by cheque. The back office shows each customer’s credit rating and balance on every request, and the app’s payment rule sends orders under 30 million toman online and larger ones by cheque.
Trade-off
A rating needs a stated rule, and the file does not say how the stars are earned.
