← すべての記事

プロダクトを出荷するデザインチームの作り方:ZipRecruiterでの12年間が教えてくれたこと

ZipRecruiterでプロダクトデザインのリーダーシップを12年間務める中で、あらゆるチーム構造を目にしてきました。中央集権型のデザイン部門、エンジニアリングチームに組み込まれたスクワッド、マトリクス組織、そしてその間のあらゆる形態です。安定して出荷し続けたチームには、3つの構造的パターンがありました。延々と磨き続けるだけだったチームには、別の3つのパターンがありました。1

TL;DR

高パフォーマンスのデザインチームには3つの構造的パターンが共通しています。エンジニアリングスクワッドに組み込まれたデザイナー、エンジニア5〜8人に対しデザイナー1人という比率、そしてディスカバリーがデリバリーに先行するデュアルトラックプロセスです。ZipRecruiterがスタートアップから上場企業へと成長する過程でデザインをリードしてきた経験から、チームの成功を予測する採用パターンは、単一の専門領域の深さよりも幅広さ(コードが書けるデザイナー、プロトタイプを作れるリサーチャー)を重視するものだと学びました。個人の才能よりも、構造的な選択のほうが重要です。


組み込みモデル:うまくいったもの

なぜデザイン部門は失敗するのか

中央集権型のデザイン部門は、ハンドオフの問題を生み出します。デザイナーが仕様書を作成し、エンジニアがそれを解釈します。その解釈のギャップが、機能がリリースされるまでどちらも気づかないエラーを生み出します。2

ZipRecruiterの初期に、中央集権型モデルを経験しました。デザインチームは磨き上げたモックアップを作成し、エンジニアリングに渡し、数週間後に実装が意図から乖離していることに気づきました。この乖離は能力不足ではありませんでした。エンジニアはモックアップが対処していなかった曖昧な点に遭遇した際、合理的な判断を下していたのです。問題はモックアップという形式そのものでした。ビジュアルの決定は伝わっても、インタラクションロジック、エッジケース、レスポンシブな振る舞いは伝わっていなかったのです。

中央集権型モデルは、優先順位のボトルネックも生み出します。すべてのプロダクトチームが共有デザインプールの時間を奪い合うとき、最もインパクトのあるプロジェクトではなく、最も声の大きいステークホルダーが勝ちます。

組み込み型デザインへの移行

ZipRecruiterでの組み込み型デザインへの移行は、3段階のパターンで進みました。このパターンは、移行に成功したすべての企業で繰り返されているのを見てきました。

  1. 1つのスクワッドでパイロット実施。 求職者チームにデザイナーを1人組み込み、1四半期実施しました。デザイナーはスタンドアップに参加し、スプリントプランニングに加わり、実装中にエンジニアとペアワークを行いました。
  2. 違いを測定。 パイロットスクワッドは、同四半期の中央集権型チームと比較して、デザインが関与する機能を40%多く出荷し、リリース後のデザイン修正も少なくなりました。
  3. 段階的に拡大。 四半期ごとにデザイナーを1人ずつ組み込んでいきました。移行には4四半期を要し、一度の組織再編の発表で済む話ではありませんでした。3

デザイナーの主な責任は「デザイン成果物」から「プロダクトの成果」にシフトしました。デザイナーはアウトプット(納品されたモックアップ数)を測定することをやめ、インパクト(動かした指標)を測定するようになりました。

チャプターモデル

デザイナーをプロダクトスクワッドに分散させると、メンターシップのギャップが生まれます。デザイナー同士の日常的な交流が失われるのです。このギャップを「デザインチャプター」で解決しました。週次のスクワッド横断ミーティングで、デザイナーが作業を共有し、互いの意思決定を批評し、クラフトの水準を維持しました。チャプターは、優先順位のボトルネックを作ることなく、クラフトのメンターシップを提供しました。4


適切な比率

デザイナーとエンジニアの比率

ZipRecruiterの成長期にうまく機能した比率は、およそ1:6(エンジニア6人に対しデザイナー1人)でした。

比率 プロフィール トレードオフ
1:3 デザイン主導(Airbnb、Apple) 高いクラフト品質、高い人件費
1:5-6 バランス型(私たちのスイートスポット) 強いクラフト品質と出荷速度の両立
1:8 エンジニアリング主導(中央値) 出荷は速いが、デザイン負債が蓄積
1:12+ リソース不足 デザイナーがチケット処理係になる

1:8を下回ると、デザイナーが受動的になるのを目にしました。プロダクトの方向性を主体的に形作るのではなく、エンジニアリングからのリクエストに対応するだけになります。1:4を上回ると、担当範囲の重複が明確でないため、デザイナーが作業を重複して行うようになりました。5

リサーチャーとデザイナーの比率

デザイナー3〜5人に対しリサーチャー1人です。この比率を下回ると、リサーチがボトルネックとなり、チームは仮定に基づくデザインに陥ります。理想的な比率を2年間下回った状態で運営しました。結果として、デザインの意思決定はユーザーのエビデンスではなく、社内の意見に最適化されてしまいました。6


幅広さを重視した採用

T字型デザイナー

専門特化型の人材(モックアップだけを作るビジュアルデザイナー、レポートだけを書くリサーチャー)を採用すると、デザインチーム内にハンドオフチェーンが生まれます。12年間にわたりスペシャリストとゼネラリストの両方を採用してきた結果、T字型デザイナー——1つの分野に深い専門性を持ちつつ、隣接分野で実務能力があるデザイナー——が、組み込み型チームでより大きなインパクトを生み出すことがわかりました。7

面接で最もシグナルの強い3つの質問: - 「最初のデザイン方針がうまくいかなかったプロジェクトについて教えてください。何が変わりましたか?」——適応力を見ます。 - 「当初のビジョンを妥協して出荷したものを見せてください。妥協の理由は何でしたか?」——協調性を見ます。 - 「最終的なデザインを改善した技術的制約について教えてください。」——エンジニアリングへの共感力を見ます。

これらの質問は、ポートフォリオレビューよりも組み込み型チームでの成功を正確に予測します。2番目の質問(妥協)に答えられない候補者は、デザインの意思決定がエンジニアリングの制約を考慮しなければならない環境で苦労します。

ポートフォリオの罠

磨き上げられたポートフォリオは、職務パフォーマンスとの相関が弱いです。プロセスのドキュメンテーション——意思決定がなぜ変わったかを説明する能力——は、強い相関があります。ポートフォリオレビューで最終成果物を評価するのをやめ、最も試行錯誤が多かったイテレーションを見せてもらうようにしました。優れたデザイナーは、方向転換の明確な理由とともに、行き止まりだった案を見せてくれます。8


苦い経験から学んだカルチャーパターン

合意よりも批評

合意を求めるデザインチームは、平凡な成果を生み出します。ZipRecruiterの初期、デザインレビューは「みんなこれでいいと思う」という場に堕していました。成果は無難なものでした。無難な成果は指標を動かしません。

レビューを構造化された批評に再構築しました。1人が作業を発表し、レビュアーが具体的な意思決定に異議を唱え、発表者がどの異議を取り入れるか決定します。重要な原則(私のフィードバックフレームワークから)は、批評はデザイナーではなく作品に向けるということです。「三次テキストのコントラスト比がAAAを満たしていません」はアクショナブルです。「色が好きじゃない」はアクショナブルではありません。9

出荷のケイデンス

週次で出荷するデザインチームは、四半期ごとに出荷するチームよりも高い士気を維持します。頻繁な出荷は、より速いフィードバックループを提供し、個々のリリースのリスクを低減し、過度な磨き込みにつながる「大発表」の不安を防ぎます。

繰り返し見てきたパターンがあります。毎週小さな変更を出荷したデザイナーは、6週間かけて包括的なリデザインに取り組んだデザイナーよりも速くイテレーションしました。週次で出荷する人たちは複利的な改善を蓄積しました(エンジニアリングインフラで見られる複利パターンと同じです)。四半期で出荷する人たちは複利的な不安を蓄積しました。


16のプロダクト研究から見えた横断的パターン

私のデザインスタディコレクションでは、16製品のデザインアプローチを分析しました。最も強いデザインチームを持つプロダクトに共通する4つのパターンが浮かび上がりました。

  1. 制約駆動型デザイン。 Linear、Notion、Arc Browserはいずれも意図的な制約の中でデザインしています(Linear:キーボードファースト、Notion:ブロックベース、Arc:縦型タブ)。制約は「まあまあの」汎用品ではなく、独自性のあるプロダクトを生み出しました。
  2. タイポグラフィが階層を担う。 色ではなくタイポグラフィ(フォントサイズ、ウェイト、スペーシング)で階層を表現したプロダクトは、よりクリーンでアクセシブルなインターフェースを実現していました。私自身のサイトも同じ原則に従っています。セマンティックカラーの代わりに4段階の透明度を使用しています。
  3. システムフォントはカスタムフォントを上回る。 Linearはシステムフォントを使用しています。私のサイトもシステムフォントを使用しています。パフォーマンスの優位性(フォント読み込みのレイテンシーゼロ)は、ページロードごとに複利で効いてきます。
  4. 1つのモードを徹底的に。 Linearはダークモードファーストです。私のサイトはダークモードオンリーです。1つのモードに絞ってデザインすることで、2つのモード間で妥協するよりも一貫性のあるシステムが生まれます。10

重要なポイント

デザインリーダーへ: - 中央集権型部門を維持するのではなく、デザイナーをエンジニアリングスクワッドに組み込みましょう。まず1つのスクワッドで1四半期パイロットを実施し、その違いを測定してから拡大してください - コンシューマープロダクトではデザイナーとエンジニアの比率1:5-6を目標にしましょう。1:8を下回ると、デザイナーは受動的なチケット処理係になります

採用担当者へ: - ポートフォリオの見栄えよりもプロセスの柔軟性を示すT字型デザイナーを採用しましょう。最終成果物だけでなく、失敗したデザイン方針の経緯を候補者に説明してもらいましょう - デザイン面接にエンジニアを含めましょう。チームフィットの最も強いシグナルは、クロスファンクショナルなコラボレーション演習から得られます


参考文献


  1. 著者の経験。ZipRecruiterでのプロダクトデザインリーダーシップ12年間。組み込み型デザインへの移行、成長に伴うスケーリング、スクワッド横断デザインチャプター構造をリード。 

  2. Buxton, Bill, Sketching User Experiences, Morgan Kaufmann, 2007. デザイナーとデベロッパー間のハンドオフの失敗に関する分析。 

  3. 著者の組み込み型デザインパイロット。四半期ごとに1スクワッドを組み込み、パイロット期間中のデザイン関与機能の出荷数は中央集権型ベースラインと比較して40%増加。 

  4. Kniberg, Henrik & Ivarsson, Anders, “Scaling Agile @ Spotify,” Spotify Labs Whitepaper, 2012. スクワッド横断クラフトメンターシップのためのチャプターモデル。 

  5. 著者のチーム構造に関する観察。スタートアップから上場企業までのZipRecruiterの成長フェーズ全体で観察された比率の影響。 

  6. Nielsen, Jakob, “How Many Test Users in a Usability Study?” Nielsen Norman Group, 2012. リサーチ人員配置に関する推奨。 

  7. Brown, Tim, “Design Thinking,” Harvard Business Review, June 2008. T字型スキルプロフィール。 

  8. Greever, Tom, Articulating Design Decisions, O’Reilly, 2015. 採用シグナルとしてのプロセスドキュメンテーション。 

  9. 著者のデザインレビュー改革。合意追求型レビューから、作品に対するフィードバックを中心とした構造化された批評へ再構築。 

  10. 著者のデザインスタディ。16製品のデザイン分析と横断的パターンの特定。design-studies-collectionを参照。