01背景
メリフ・バフト (Merikh Baft) はスペーサーファブリックを編んでいる。2枚の表地をパイル層でつないだ3層構造の生地で、空気を通し、形を保つ。靴、オフィスチェア、車のシート、マットレス、医療製品に使われ、メーカーやバザールの卸売業者にメートル単位で販売される。
プロジェクト全体は、17ページのFigmaファイル1つに収まっている。ブランドワークショップ、ペルソナ、トーン・オブ・ボイス。ロゴと名刺。右から左に読むペルシア語のウェブサイトを3つの幅で描き、サインインフローも添えた。デスクトップのバックオフィス。そして生地を運ぶ人たちのためのモバイルタスクアプリ。デザインした画面は合わせて128になる。
02課題
編み機から顧客に届くまでに、ロールは計量されて保管され、染色工場に移され、トラックに積まれて配達される。どの移動も、注文の全体を見ることのない人どうしの受け渡しだ。そのたびに、ロールが数え間違えられたり、取り違えられたり、置き忘れられたりするおそれがある。
アプリへの問いは、言葉にすれば簡単だ。他人の仕事のために作られたシステムを覚えることなく、目の前のロールがリストにあるものだと、それぞれがどう確かめるのか。
03アプローチ
アプリには管理者、倉庫、染色工場、ドライバー、顧客の5つの役割がある。それぞれが自分のタスクだけを、同じ2つのビューで見る。タスクの一覧と、1つのタスクをステップに分けたシートだ。各ステップは完了か未完了かで示され、どのシートも同じ2つのボタンで終わる。問題を報告するボタンと、SMSを送るボタンだ。
タスクの入力方法は2つある。データを手で入力するか、QRコードを読み取るかだ。画面の横に描かれた情報設計図は、この2つの経路と、その裏にあるラベル作成の流れを示している。型番、重量、長さを入力し、ラベルとQRコードを作り、印刷する。
倉庫：データを入力し、ロールごとにラベルを印刷して貼る。
染色工場：ロールを読み取って受け入れ、パッキングリストを印刷し、ドライバーに引き渡す。
ドライバー：積み荷をパッキングリストと照合し、配達を確認する。
04ソリューション
設定は役割ごとに分かれている。倉庫は保管場所と計量単位を設定する。平方メートル、ランニングメートル、キログラムの選択、手動か自動のはかり、小数点以下の桁数、許容範囲などだ。染色工場は機械、色の好み、バッチサイズを設定し、工程ガイドを持つ。ドライバーはルート最適化とアラートを設定する。顧客は配達先住所、希望の支払い方法、通貨を設定する。
通知も同じように分かれている。資材の在庫不足、品質検査で見つかった不良ロール、新しいロール、割り当てられた染色依頼、変更されたルート、顧客が受領サインをした配達。
全員が同じアプリを使うが、ドライバーが染色工場の設定を目にすることはない。
倉庫
05バックオフィス
バックオフィスはデスクトップとタブレット向けで、依頼、在庫、倉庫、顧客、アクセス権限を扱う。依頼の画面では、注文の上に顧客の信用評価が星で表示され、未払い残高も並ぶ。その下に、発注からプロフォーマ請求書、手付金、積み込み、発送、配達を経て精算に至る9段階のタイムラインが続く。最後に、生地コード、数量、単位、支払い方法、在庫状況、配達日を含む注文明細が並ぶ。
倉庫のページは、アプリが生み出すものを数える。総在庫、出庫量、次回発送日、品質検査の待ち列にあるロールの数だ。顧客のページには、社内担当者、購入量に応じて段階的に決まる会費、手付金が顧客のランクにどう影響するかの説明が加わる。
倉庫のページは、品質検査待ちのロールを数える。
06ウェブサイト
ウェブサイトは1,440、1,028、360ピクセルの3つの幅で、11ページを描いた。トップページの2つのバージョン、生地のページ、生地の一覧、業種一覧と業種のページ、ブログと記事、会社概要、お問い合わせ、FAQだ。トップページは通気性から始まり、生地の特性、業種、メリフ・バフトを選ぶ理由、そしてガイド付きの相談フォームへと続く。どの業種か、どの織り方か、何メートル必要か。
生地のページは、1メートルあたりの価格より先に、組成、幅、厚さ、重量、認証、工場をまとめた仕様表と、適した業種を示す。トップページでは、顧客ダッシュボードで注文を追跡できることもうたっている。
相談フォーム：業種、織り方、注文量。
生地のページ：価格より先に仕様表と業種。
07ペルソナ
最初に取り組んだのはブランドだ。性格を表す形容詞、「である／でない」リスト、共感マップ、ペルソナのテンプレート、「繊維業界での私たちの今のトーンをどう表現しますか？」といった問いを含むワークショップキットから、4人の買い手ペルソナが生まれた。
各シートには肖像と年齢のほか、いくつかの評価がある。繊維の知識、直感的・論理的・慣習的のどれか、品質への敏感さ、独占への志向だ。さらに6つの枠があり、口ぐせ、略歴、目標、判断の障壁と悩み、支払いの習慣、期待が書かれている。文章は日常の話し言葉のペルシア語で、肖像はAIで生成したものだ。
08アイデンティティ
トーン・オブ・ボイスは、シンプルから複雑、ベーシックからハイエンドまで、13のスライダーで定めている。ペルシア語の書体を6つ候補に挙げ、Yekan Bakhを選んだ。ロゴは円の中に編み目のグリッドのモノグラムを置き、その横にラテン文字とペルシア文字で社名を並べている。
ラテン文字とペルシア文字のロゴ。
09主要な意思決定
これらの選択は、ファイルの画面と設計図にはっきり表れている。
倉庫スタッフ、染色工場のオペレーター、ドライバーは、それぞれひとつの仕事のためにアプリを使う。タスクの一覧と、完了か未完了かを示すステップのシート。誰もが覚えるべきはそれだけだ。
ラベルは流れの最初に入力したデータから印刷され、以降はすべての段階で読み取られる。設計図には両方の入力が描かれているので、ラベルが読み取れない場合でもタスクを完了できる。
ドライバーが染色工場で積み荷をパッキングリストと照合し、顧客が到着時にもう一度照合する。どちらの受け渡しでもSMSが送られるので、双方に記録が残る。
ペルソナたちは業種や習慣で買い、そのうち1人はまずサンプルを試験しなければならない。トップページは相談フォームを前面に出し、生地のページは価格より先に仕様と業種を示す。
10私の役割
Sinaは、ブランドワークショップからタスクアプリまで、このファイルにある仕事をデザインした。
ファイル内にある、ほかのプロジェクトから貼り付けられた画面は、このケーススタディの対象外で、掲載していない。
11批評
同じ小さなミスが、3つの面すべてに繰り返し現れる。ウェブサイトのヘッダーは、トップページ、生地のページ、生地の一覧のどれでも「お問い合わせ」を現在のページとして示している。バックオフィスの倉庫ページはサイドバーで「依頼」をハイライトし、3種類のサイドバーのうち2つは、顧客を2つの名前と2つのアイコンで二重に並べている。アプリでは、設定画面の通知タブにタスクのアイコンが表示されている。
デスクトップの依頼ページは、9段階の注文タイムラインをラベルのない9つの円で描いている。そのため、オフィスでいちばん重要な流れを記憶に頼って読むことになる。さらに、バックオフィスのモバイル列には空のフレームが4つある。
ナビゲーションの状態もコンテンツだ。それが間違っていると、ユーザーは自分の居場所を信じなくなる。
12システム
デザインシステムにはバージョン0.0.1と記されている。21のコンポーネントセットと334のコンポーネントがあり、カラー、タイポグラフィ、フォームフィールド、ボタン、パンくずリスト、チェックボックスとラジオボタン、トグル、モーダル、トースト、プロフィール、ヘッダーとフッター、サイドメニューを含む。カラーは青の階調とグレーの階調の22スタイルで、ブランドの紺は青の最も暗い端にある。タイポグラフィは11スタイルで、すべてYekan Bakh。24ピクセルの見出しから12ピクセルの本文までをそろえている。
多くの初期版と同じく、すべてをスタイルとして保存している。変数は1つしかないため、このシステムではまだテーマや密度を切り替えられない。
13成果
ウェブサイトやアプリがリリースされたかどうかはファイルに記録がないため、報告できる利用データはない。ファイルに残っているのは、工場のブランド、営業、業務を網羅したデザインだ。
14学んだこと
同じミスがウェブサイト、バックオフィス、アプリに現れている。「この画面は、自分がどこにいると示しているか」を1画面ずつ問う確認をしていれば、3つとも見つけられたはずだ。
どの表の行も、1つの生地コードと1つの価格を繰り返している。実際の生地コード、長い顧客名、混在する単位を入れていれば、表が崩れる箇所が見えたはずだ。
注文タイムラインは、オフィスから流れ全体を見渡すためのビューなのに、デスクトップ版にはラベルがない。製品でいちばん重要な流れこそ、いちばん読みやすくあるべきだ。
顧客：受け取りを確認し、積み荷がリストと一致することを確認する。
染色工場
ドライバー
顧客
顧客のページ：担当者、次回配達、残高、5つの履歴タブ。
トーン・オブ・ボイス：13のスライダーのうち8つ。
イランのB2B繊維の買い手は、小切手で支払うことが多い。バックオフィスはどの依頼にも顧客の信用評価と残高を表示する。アプリの支払いルールでは、3,000万トマン未満の注文はオンライン決済、それ以上の注文は小切手払いになる。