Digital Product Design

UX/UI Design

担当範囲

UXデザイン(ワークショップ設計&実施・定性&定量リサーチ設計/実施/教育)・UIデザイン・一部プロジェクトマネジメント

背景

私の所属企業の全社員4,500名(当時)が利用する社内イントラネットのリニューアルを実施しました。当該担当部署から自身の所属するグループに連絡が来た際はプロジェクトそのものの抽象度も高く具体性に欠けていたため、まずはどこに向かうのか?という目線を揃えるためにワークショップの実施を提案。所要時間3時間で、複数部署から集められたプロジェクトメンバーの相互理解と現状のプロジェクトの課題を浮き彫りにすること、そしてネクストアクションの決定までをおこないました。

ワークショップの様子。双方向の場にするために冒頭は円になってのアイスブレイクから始まり、複数ホワイトボードやプロジェクターを使い身体性を伴った場作りを意識している

本ワークショップで浮き彫りになった点として大きかったのが「各担当者やりたいことや思いは溢れているが、それを実現する専門的なスキルに乏しい」というケーパビリティ一の課題でした。メンバーの半数以上がそもそもWeb領域の施策を担当するのが初めであったり、当該部署に異動したばかりの状態だったため、私自身がUIデザインという役割を超えてプロジェクト自体の進行を後押しする必要性を強く感じ、評価指標の検討や上長承認用の資料作成、また定例ミーティング実施の提案からミーティングファリシテーション、次回ミーティングまでに各担当者がおこなうべきアクションの決定などにまで踏み込んでいきました。当初はファシリテーター的存在としてプロジェクトに寄与しようとしていた私ですが、本当に必要なのはプロジェクトそのものを推進するリーダー的存在であると少なからずこのタイミングで考えを改めさせられました。

プロジェクトに本格的に入り込んでいく際にまず提案したのが、リリースフェーズを分けアジャイル的にリニューアルを進めることです。一般に公開されているサイトなどと比較すれば利用ユーザーは社員のみになるため人数としては多くありませんが、使用頻度高く日常的に触れられるサイトのため、リニューアルによりインパクトは小さくないと考えました。同時に、本プロジェクトの成功を推し量る指標が存在しなかったため、まずは不十分である現行サイトの使用状況を定量/定性的に把握し、リニューアルの前後比較が可能になる状況を作ることから始めました。具体的には、現行サイトへの計測タグの埋め込みと、メンバー自身による定性インタビューの実施です。

ポイント

特に定性インタビューはその効果を大いに発揮したアクションでした。それまで少なからずサプライヤーロジックで会話していたプロジェクトメンバーが、定性インタビューで話されたことという共通言語ができたため、このインタビューをきっかけに視点をユーザー側に向けることができました。デザイン思考的プロセスはユーザーへの「共感」から始まります。その意味で、インタビュー実施は大いにその効果を発揮してくれました。

ほぼ全員がインタビュー初体験だったためサンプル質問などを記載した資料を配布。いきなり多くをインプットするのではなく「意見ではなく実際の行動を聞く」ことを強調している。とは言え最重要視したのはメンバー自身が生の声を聞くことである

インタビューによってユーザー視点がプロジェクトにインストールされていきつつも、その後のUIデザインフェーズではこれまで以上に丁寧に合意形成を図ることを意識しました。
目に見える制作物というのは強い吸引力を持つものであると私は考えています。それまでユーザー視点で語られていた内容が、見た目の好き/嫌いの会話に一変することも珍しくはありません。そのため表層のデザインに取り組むことを急がず、その上段の設計から公開し、共に作っていくことを意識しました。

プロセス

まずは、すでに存在している本プロジェクトの「社員の居場所を作る=わかりやすく情報が見つけられる」というテーマの咀嚼を対話ベースで改めておこないました。それによりイントラの3つの役割を定義することができ、各担当者の領域が本リニューアルにおいてどの役割を担っているのか?を可視化することができました。またこの会話の中で、テーマの「わかりやすく情報が見つけられる」という部分にもう一歩踏み込み、わかりやすく情報が見つけられるとは「今の会社の動きがわかる」ことであるということに行き着きました。

簡易的な図式化。ここで用いた3色の色分けをこの後の工程でも利用している

この3つの役割に基づき、現行サイトがどのような骨格になっているかを色分けすることで把握しました。これによって見えてきたことは、3つの役割それぞれに分類される情報が入り乱れグルーピングに乏しく複雑なレイアウトになっていること、そして3つの役割に分類されないその他の情報が多いことでした。その二点を解消したレイアウトを提案しつつ、骨格の合意形成を進めていきました。

現状のサイト(左)と、修正案(中、右)を情報のカテゴリごとに色分けしたもの。現状のサイトは色が細かく分割され散らばっていることと、グレーで示す「その他」の情報が多くの領域を占めていることがわかる

ここまで来ればその後の表層デザインは議論に多くの時間を使うことはありませんでした。カラーパターンは最低限出しつつも、日常的に触れるサイトであるため世の中のSNSなどに見られるコンプレクション・リダクションの考えに基づき、あくまでコンテンツを際立たせるシンプルな表層に決定しました。

情報設計は崩さず色使いだけバリエーションを出すことで、普段使いするサイトとして良い意味で「パッと見の印象」も考慮することを狙った

まとめ

ここまでスムーズかのように見える本プロジェクトですが、実は骨格の合意形成は一度やり直しています。色分けの粒度が粗すぎたため、色分けした骨格が実際にどのような表層になるかのイメージをしてもらうことができず、色分けの粒度を見直して再実施となりました。
紆余曲折ありながらも最終的にはメンバー全員が納得のできるアウトプットとして完成することができたと自負しています。
引き続き同行をウォッチしていきつつ、挙がった課題は後半フェーズで吸収することでより精度の高いリニューアルとしていきたいと考えています。