デリバリーヒーロー（Talabat）デザインシステムの採用

2022年5月、UXPinはデリバリーヒーローMENA（Talabat）のDesignOps DirectorであるAmber Jabeen氏を招き、「エンタープライズデザインシステム – 構築と拡張の方法」と題したウェビナーを開催しました。本記事では、彼女の講演の後半にあたる、デリバリーヒーローのデザインシステム採用戦略に焦点を当てた内容をご紹介します。ちなみに、概要については当社のブログに掲載されています。

「デザインシステムの成功は、その採用にかかっており、ユーザーに使ってもらうまでは、成功とは言えないのです。」 – アンバー・ジャビーン氏

UXPin Mergeで、より優れたデザインシステムの採用、一貫性、結束を実現しませんか？デザイン システムのコンポーネント ライブラリを UXPin のデザイン エディタに同期させ、組織全体で信頼できる唯一の情報源（Singe soruce of truth）を作成しましょう。今すぐアクセスをリクエストし、Mergeの技術をぜひご体験ください。

デリバリーヒーローの3つの導入戦略

アンバーと彼女のチームは、様々な取り組みを試した結果、デリバリーヒーローのために以下の3つの要素からなるデザインシステム採用戦略を開発しました。

• ゲーム化
• ソーシャル化
• 称賛

「一貫した楽しい 」ビジョン

アンバーのチームは、デザインシステムを他の製品と同じように扱うことが、採用率を高めるのに必要だと考えました。そこでまず、戦略の指針となる「ノーススター」を定めました。

ステークホルダーやチームメンバーからの意見を参考に、チームは「すべてのプラットフォームで、一貫した楽しいユーザー体験を提供しよう」と考えました。

デザインシステムチームは、ビジョンのモットーや理念を強調するのに、一貫した楽しさを全面に出しました。

一貫した（モットー）：

「いつも…例外なく。考えるまでもない。」 デザインの一貫性により、ユーザーはUIやその機能を覚える必要がなく、より直感的なユーザーエクスペリエンスが得られるという考え方です。

楽しさ：

• talabatの配慮：製品体験では、デザインシステムのユーザーと製品のエンドユーザーの両方のユーザーを大切にすることを示すことが必要
• あなたのために：個別化された体験
• 速い：配送業者として、お届けは速やかに行いたい
• シンプル：直感的なユーザーインターフェース
• 楽しい：楽しいユーザー体験

明確なビジョンを持って、デリバリーヒーローのデザインシステムチームは、3つの要素からなる採用戦略を立てました。

第一の要素：ゲーム化

第一の要素は、ゲーム化です。チームは、新システムの導入に気付いていました。それはつまり、多くのメンバーが既存のテンプレートを捨て、ゼロから作り直さなければならなかったのです。そこでデリバリーヒーローは、ゲーム化戦略によって、デザインシステムへの切り替えを楽しく、競争的なものにしました。

採用段階

デザインシステム（DS）チームは、システムのビジョンに沿ってゲーム化された採用段階をデザインしました。その目的は、チームメンバーに小さなことから使い始めてもらってその規模を拡大してもらうことでした。DSチームは、ビデオゲームのような感じで、ある「レベル」をクリアすると、次のステージに進むようにユーザーを促したのです。

• ブロンズ：基礎（デザイントークン）
• シルバー：一貫性と纏まり（コンポーネント）
• ゴールド：楽しい体験（音声と音、マイクロインタラクション、ハプティクス、トランジション）
• プラチナ：もっと上を行く体験（モーション、ダークテーマ、ボイスUI）

デザインチームは、デザインシステムの階層と関連するUIパターンをポスターにしてワークスペースに貼り、「ゲーム」と「レベル」を連想させるようにしました。

デザインシステムのダッシュボード

チームメンバーにとって、進歩のために何をしなければならないかを知るための進捗状況の可視化は重要でした。そこでDSチームは、Discovery Squadのダッシュボードを作成し、ユーザーの採用状況や次の階層への進捗を可視化しました。

第二の要素：ソーシャル化

デザインシステムの戦略の2つ目の要素は、「コミュニティ主導でデザインシステムをソーシャル化し、人々の投資と関心を維持する 」ことでした。

デリバリーヒーローのソーシャル化施策には、「楽しさ」と「包容力」という一貫したテーマがあることにお気づきでしょう。そしてそれはデザインシステムのビジョンに沿っていますよね。

デザインシステムの名付け大会

ンバーのチームは、「デリバリーヒーロー」のデザインシステムの命名に参加するよう、みんなに呼びかけました。社内にメールを送り、名前を募集したのです。

その結果、2つの選択肢に絞られ、「マシュマロデザインシステム 」が選ばれました。デリバリーヒーローの社員は、自分たちが名付けのプロセスに参加したことで、マシュマロに愛着を感じているようです。

チームメンバーがすぐに投資し、参加してくれたことから、この戦略はデザインシステムチームにとって成功でした。

マシュマロのアバター、ハッシュタグ、絵文字

マシュマロのアイデンティティを確立し、認知度を高めるために、DSチームはアバター、ハッシュタグ、絵文字を作成し、社内のやりとりで使用しています。

デザインシステム展示イベントの開催

チームは、ユーザーと交流するイベントを開催し、以下の質問を投げかけるなどして、生の声やディスカッションを促しました：

• 私たち（デザインシステム・チーム）についてどう思いますか？
• デザインシステムでの仕事はどうですか？

ユーザーから新しいインサイトやアイデアを集め、デザインシステムを改善することが目的でしたが、みんな自分の意見を聞いてもらえたと感じ、自分がデザインシステムに貢献しているとわかったら、そのデザインシステムに愛着が湧いて支持者となり、ゆくゆくは更なる採用につながるのです。

また、チームメンバーにマシュマロがふるまわれるなど、明るく楽しいイベントも開催されました。

フィードバックのアンケート

DS チームは、デザインシステムのさまざまな部分についてさらに関与し、フィードバックを集めるのにアンケートを使いました。

デザインシステム組合

マシュマロデザインシステム組合には、互いに学び合い、マシュマロコミュニティを成長させるという目的の下、デリバリーヒーローの各ブランドのチームメンバーが参加し、課題の議論や、アイデアの共有がなされました。

メールマガジン

マシュマロのメールマガジンは、デザインシステムチームのユーザーとの最新情報の共有、ステークホルダーへの情報の提供や会話の一部になるサポートになりました。

第三の要素：称賛

アンバーは講演の中で、プロセスの称賛が採用戦略の最も重要な要素であると述べています。マシュマロチームでは、100%の採用に向けて前進している象徴として、どんな小さな成功も認めて称えます。

「小さな勝利を称えて、それが本当に大きな勝利につながったのです」– アンバー・ジャビーン氏

アンバーが言うように、チームは「それがとても上手」でした。例えば、マシュマロのデザイン言語の70％を完成させるなど、重要なマイルストーンに到達すると、彼らは祝杯をあげました。社内のさまざまなチャネルで、色々な功績を称えました。写真やビデオを使って、組織全体でその瞬間を共有したのです。

アンバーはプレゼンテーションの中でこう述べています：

• 毎月のニュースレター、All Hands、Slackチャンネルなどで、各隊の採用層を祝いました。
• 採用された階層を称えることで、チームはより大きな目標に向かって前進し続けることができ、貢献を促すことができました。
• 次のステップは、デザインシステムへの貢献に対する報奨を始めることです。例えば、それを組織の業績評価の一部にすることで、採用や貢献が促進されるでしょう。

「デザインシステムを構築することはできても、健全な有機的貢献がなければ、それを拡張することはできません。それにはシステムに貢献する人々に報酬を与えるのがいい方法です。」– アンバー・ジャビーン氏

成果の表示

マシュマロチームは成長を測定し、グラフを使ってチームメンバーやステークホルダーに結果を提示しました。以下はDSチームの主な成果です：

• マシュマロによって、前月比で約20％のデザイン負債が削減されました。DSチームは、最初の実験からこの影響を測定することができました。デリバリーヒーローのデザインシステムに対する賛同を得る方法については、こちら（No link)をご覧ください。
• 製品のコンポーネントライブラリの80%をデザインすることで、DSチームは創造性と新しいコンポーネントのための余地を残し、マシュマロのコンポーネントライブラリは、新機能のフロントエンドの労力を約40%削減しました。
• コンポーネントの採用＝一貫性があり纏まりのあるエクスペリエンス：デベロッパーは、ライブラリにないコンポーネントに気づいたとき、マシュマロチームに連絡を取り、アドバイスを求め、それがデザインシステムの拡張に関する会話を促します。

マシュマロの成功戦略

• デザインシステムの構築と運営には、同士が必要であり、部門横断的なパートナーシップの構築が必要：デザインシステム専門のチームがあっても、ステークホルダー、リーダー、チームメンバーの協力と支持があってこそ、成功につながるのです。
• コミュニティ主導での持続可能な採用戦略：デザインシステムを拡張したい場合は、その成長と成功のために全員を結集させる戦略をデザインすることで、組織全体を取り込む方法を見つけましょう。いつでも対応可能で、チームメンバーとつながり、デザインシステムのユーザーに 5 つ星のサービスを提供しましょう。
• 小さな成功を認めて讃える：「第三の要素」で説明したように、小さな成功を祝うことは、大きな勝利と幅広い導入につながります。人は認められることを好むので、進歩を祝い、奨励しましょう。
• 成功の数値化と360度にわたるコミュニケーション：成功は、価値提案と達成しようとしたことに基づいています。デザインシステムの目標達成に向けた進捗状況を示すのにメトリクスを使いましょう。ステークホルダー、パートナー、スポンサー、チームメンバーなど、この進捗状況を、組織の全員にまんべんなく伝えましょう。
• 洗い出しと繰り返し！： アンバーは、うまくいくものを見つけ、組織全体に採用を拡大するのにその戦略を繰り返していくことが重要だと言います。

デリバリーヒーローがマシュマロデザインシステムを構築するまでの完全なストーリーは、アンバー・ジャビーン氏の講演「エンタープライズデザインシステム – 構築と拡張の方法」で見ることができます。

UXPin Mergeによるデザインシステムの拡張

デリバリーヒーローの話から分かるように、デザインシステムを拡張し、組織全体に普及させるのは大変なことです。

DSチームは、デザイナーにはUIキットを、エンジニアにはコンポーネントライブラリを使うように促さなければなりません。どんなに優れたデザインシステムであっても、デザイナーとエンジニアでは話す言語が違うのです。

UXPin Mergeがあれば、デザイナーとエンジニアはまったく同じコンポーネントライブラリを使用することができます。Mergeは、レポジトリからUXPinのエディタにコンポーネントを同期し、エンジニアが最終製品に使用するのと同じインタラクティブなコードコンポーネントを、デザインチームがプロトタイプの作成に使用できるようにします。

デザインシステムチームは、各コンポーネントのプロップ、又は、Storybookの統合とではArgsをインタラクションすることも含めてプログラミングできるので、デザイナーは製品作りに専念するだけです。簡単なワークフローと少ない作業で、より楽しく、より広く普及させることができます。

Merge へのアクセス権をリクエストして、世界最先端のコードベースのデザインツールで、部門を超えた連携を強化しながらデザインシステムを拡張する方法をぜひご覧ください。