ノンデザイナーがデザインシステムの利用とサポートをする方法
ステークホルダーや組織のサポートは、デザインシステム(DS)の継続的な投資と将来的な成功に不可欠です。DSチームは、従業員がデザインシステムを使用し、その投資が利益を生むことを証明しなければなりません。
2022年1月のウェビナー「デザインシステムの保護」で、カローラ・カッサーロ氏は、DSチームが直面する課題として、「私たちは皆、人々の生活を変える製品デザインに取り組んでいますが、その影響を伝えるための適切なフレームワークや語彙が不足している」と述べています。
多くのデザイナーは、デザインシステムの進化や拡張のためのリソースを説明するのに苦労していますが、DSの影響を追跡し、成功と改善点を特定することで、ステークホルダーの支援を得やすくなります。
デザインシステムは通常デザインチームによる取り組みですが、組織全体やフロントエンドの一貫性を確保するためにデベロッパーにも役立ちます。UXPin Mergeのようなツールを使えば、デザインと開発の両方でチームのインタラクティブなUIコンポーネントを簡単に使用できます。
Git、Storybook、または NPM コンポーネントを UXPin にインポートし、デベロッパーにサッと渡せるインタラクティブなプロトタイプを作成しませんか。無料相談およびトライアルはこちらから。
非デザイナーからのサポートが必要な理由
デザインシステム(DS)の維持と拡張には時間とリソースが必要であり、DSチームはその価値を証明してリソースを確保しなければなりません。
デザインシステムの価値を示すには、チームメンバーがそのシステムを採用することが重要です。そのため、DSチームは組織全体のチームと関わり、使用を促し、改善のためのフィードバックを集める必要があります。
人々がデザインシステムに貢献することで所有感が生まれ、より広く活用されるようになり、それがさらなるリソースとサポートを得るための根拠となります。
デザインシステムの採用を促す方法
多くの組織では、社内ワークショップやトレーニングセッションを通じて、デザインシステムの目的や使用方法、ベストプラクティスを紹介します。全部署から代表者を招き、デザインや開発以外のチームともフィードバックやアイデアを共有する機会を設け、貢献が所有感と採用につながることを意識しましょう。
フィードバックを得るためにワークショップだけでなく、Slack、Asana、Jiraなどのコミュニケーションチャンネルも活用しましょう。デザインシステムがチームに採用され始めたら、組織全体への影響を測定するタイミングです。
デザインシステムのサポートを得る: 注目すべき3分野
デザインシステムチームは、製品や組織への影響を判断するのに、以下の3分野に注目しないといけません:
- チーム:デザインシステムがどのようにワークフローを改善するのか
- 製品:デザインシステムが製品やビジネス価値にどのような影響を与えるのか
- エンドユーザー:デザインシステムはユーザビリティにどのような影響を与えるか。
では、その3分野を詳しく見てみましょう。
チーム
デザインシステムがチームに与える影響を評価するのに使える主な指標には以下の3が挙げられます:
- デザインシステムの採用
- リソースの節約
- 市場投入までの時間
デザインシステムの採用状況を評価するには、レポジトリ内の要素の使用率を確認する方法があります。UK Gov DesignがGOVDESIGN 2020で示したこの戦略では、データを定期的に集めて普及状況を追跡し、ワークショップの効果も測定できます。
導入前にタスクの時間やパフォーマンス指標をベースラインとして取得し、それを基にデザインシステムの影響を評価することが重要です。PayPalでは、画像ベースのツールとUXPin Mergeを比較した結果、市場投入までの時間が大幅に短縮されました。これにより、デザインシステムへの投資が少ないリソースで競争優位性を生むことをステークホルダーに示すことができます。
製品
次に、製品性能におけるデザインシステムの勝敗を見極めたいところです。ここでも、以下の重要な3指標に注目してみましょう:
- コンポーネントカバレッジ
- 安定性
- ブランド価値との整合性
DSチームは、どのコンポーネントが製品で使われているかをテストし、デザインシステムのカバレッジや製品間の関連性を評価できます。また、製品の安定性やブランド全体への影響を示すため、実装前後の製品欠陥数と重大度を測定し、エラー削減を実証できます。
ブランド親和性の測定は難しいですが、カローラは『Defending Your Design System』で、eBayがデザインシステム導入前後のページデザインを顧客に評価させ、デザインシステムページがより高いブランド親和性スコアを得たことを紹介しました。
エンドユーザー
あとは、これが一番重要なことですが、デザインシステムは顧客や UX(ユーザーエクスペリエンス)にどのような影響を与えているのでしょうか?デザインシステムに関連するエンドユーザー測定基準には、以下の3つが挙げられます:
- パフォーマンス
- ユーザビリティ
- 顧客満足度
読み込み時間は製品パフォーマンスの重要な指標で、デザインシステム(DS)の実装により最適化されたコンポーネントで読み込み時間が短縮されます。
DSチームは、タイムオンタスクやコンバージョン率などを使い、ユーザビリティやアクセシビリティへの影響をテストできます。IBMは、DS導入後にユーザーのタスク完了率が3倍に伸びたことを確認しています。
また、アンケートや製品レビュー、インタビューなどのフィードバックを基に、DS導入前後の傾向を追跡し、ユーザビリティの改善や顧客満足度の向上を測ることができます。
デザインシステムをステークホルダーに売り込む
ここでは、デザインシステムを普及させるためのステップを3つ見ていきましょう:
- デザインシステムの効果検証のためのデータ収集
- 勝因を特定および、説得力のあるストーリーの作成
- 企業が得られるものの予測
ステップ1 – データ収集
上記の「注目すべき3分野」で説明したようにデータを集めます。何から始めたらいいかわからない場合は、自身の製品や会社に関連する、うまくいったデザインシステムのリソースやユースケースを探してみましょう。
また、ガイダンスや方向性を示すために、以下のブログからリソースをチェックしてみてください:
- On Design Systems: An Interview with Dan Mall of Superfriendly(デザインシステムについて:Superfriendlyのダン・モール氏に聞く)
データの収集と分析には時間と手間がかかりますが、デザインシステムの成功のストーリーを構築するには欠かせない作業です。
ステップ2 – 勝機を見極め、説得力のあるストーリーを作る
無料ダウンロードの『Evangelizing a Design System』では、ステークホルダーや経営幹部にプレゼンするためのスライドテンプレートが40以上紹介されています。
そこには、自社のケースを強化して将来的な展望を示すべく、Dropbox、IBM、LinkedIn、Atlassian などでの成功事例から得た実際のデータが盛り込まれています。
プレゼンテーションでは、成功した点を強調し、客観的なテストをどのように使って最終結果に到達したかをストーリーテリングで説明しましょう。
ステップ3 – 企業が得られるものを予測する
投資を勝ち取るには、デザインシステムの拡張にリソースを割くことで、企業が何を得ることができるのか、つまり ROI(投資収益率)を示さないといけません。将来予測を、他の成功したデザインシステムのケーススタディと組み合わせて、投資対効果の可能性を示しましょう。
適切なデザインシステムツールへの投資
適切なツールに投資することで、先の「注目すべき3分野」で説明した多くのメトリクスを改善することができます。UXPin Merge は、デザイナーが完全に機能するコードコンポーネントを使ってプロトタイプを構築できるように、レポジトリにホストされているデザインシステムを UXPin のエディタに同期できる、コードベースのデザイン ツールです。
この「信頼できる唯一の情報源(Single source of truth)」は、PayPal の場合のように、非デザイナーであっても部門間の採用と連携が上がります。また、PayPal は、市場投入までの大幅な時間の短縮と、以前の画像ベースのデザインツールよりも Merge のプロトタイプと対話できるようになったステークホルダーからのより質の高いフィードバックが得られることに気づきました。
「信頼できる唯一の情報源(Single source of truth)」により、企業はデザインと開発の一貫性を高め、デザインのハンドオフがスムーズになります。デザイナーは生産可能なコンポーネントでプロトタイプを作成し、エンジニアはそのまま開発を開始できます。
さらに、DSチームがデザインシステムに変更を加えると、UXPinで自動的に更新され、チームメンバーに最新リリースが通知されます。
UXPin Mergeのコードベースデザインで、デザインシステムとワークフローを次のレベルに引き上げましょう。無料相談およびトライアルはこちらから。