アドビサイトの製品ページ300以上を3ヶ月でリニューアルした舞台裏 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
使い慣れたツールに頼りがちなのは人が持つ傾向です。でも、よりよい方法が他にあるなら？
Adobe.comは大規模な改修を控えていました。300以上の企業の製品ページの、再設計、コンテンツの作り直し、デザインの更新、ページ構築、公開が必要でした。
そして、作業時間は当初予定されていた12ヶ月から3ヶ月へと大幅に短縮されました。
アドビのシニアクリエイティブディレクターであるジョッシュ・スーターは、ただオフィスにひとりで篭り、YouTubeビデオを見続けたい気持ちになりました。
プロジェクトを期限内に完了するには、すべての人手を動かしても、まだ追加が必要な状況でした。「我々はただちに集りました。UXデザイナー、コンテンツ制作者、開発者、製品マーケティング、Webストラテジスト、顧客サポート担当、そして営業と、プロジェクトに関わるすべての人たちです」と彼は言いました。
「1週間経たずに、我々は顧客調査の第1弾を開始し、外部エージェンシーからチームを招きいれ、ラフなプロトタイプの開発さえ着手しました。それは、急いで成果を出すための努力でしたが、完全に炎に飲み込まれた状態になりました」
それで終わりではありませんでした。「うわべだけのプロセス管理や一貫性の管理がすべて、われわれの首を絞めつつありました」
他にも大きな影響を持つ要因がありました。すべてのWebページは、デザインチーム（彼らもプロジェクトに参加していました）経由で、アドビのデザイン言語であるSpectrumを組み込まなければなりませんでした。「社内の様々な部門の状況が変化する中、Spectrumは、全社的なブランドの一貫性を保つための手段として必要だったのです」とジョッシュは語りました。
やや非常識なプロジェクトは、新しいアプローチを必要とした
ジョッシュは次のように表現しました。「3時間で木を切り倒す場面を想像してください。のこぎりを磨くのに2時間を費やして、それから切り倒す木が300本あったことに気がついた状況です」
つまり、チェーンソーを手にしなければ間に合わない状況もあるということです。
使い慣れたPhotoshopとIllustratorが最初は想定されていましたが、ジョッシュのチームは、この機会を使い、Adobe XDを試すことにしました。
以下に、その結果として学んだことを共有します。
1. 一貫性と正確さは強い味方
スタイルの一貫性の保持が可能だっただけでなく、規模の拡大が容易にできました。
Adobe XDのシンボルパネルは、Spectrumを統合するために不可欠でした。Creative Cloudライブラリ上にはSpectrumが構築され、そこからJavaScriptやCSSに紐付けられていました。そして、XDのシンボルパネルには、Creative Cloudライブラリから反映されたすべての文字スタイルや色が保持されていました。
つまり、ボタンやナビなどすべてのグローバルなスタイルは、繰り返し使われてもページやタイミングによって一貫性を失うことは無く、同時に簡単にアクセスできる状況にあり、しかも常に最新の状態に更新されていました。以前であれば、この状況の維持は容易ではありませんでした。
「過去に起きていたことは、数十のPhotoshopやIllustratorドキュメントとの格闘でした。それを、ひとつのドキュメントにまとめることができたのが本質的な違いです」とジョッシュは言いました。「複数のアートボードを管理する必要が無かったのはもちろん、変更が単純なコピー＆ペーストだけでできた事で、作業が格段に早くなりました。見通しがよくなって、協業もずっと楽なものになりました」。
2. プロトタイプはその費用よりずっと大きなコストを削減する
フラットなPDFファイルを単に見るだけでなく、実際に使って機能を試すことができれば、レビューは真に深いものとなります。必然的に、レビューの繰り返しに費やす時間は短縮されます。
ひとつ例を挙げましょう。チームはコンテンツを見せる新しい手段として、よくある横方向のカルーセルではなく、縦方向のカルーセルを考えました。新しいデザインは動きに依存し、画像を強調するものでした。そのため、コンセプトを伝えるのは容易ではありませんでした。
「我々はPDFの資料で新しい機能を説明しようと試みましたが、ただの徒労に終わりました。関係者たちは、どんなインタラクションが行われるか想像できなかったのです。しかし、ひとたびXDでプロトタイプを構築したら、状況はまったく違うものになりました」。
3. すぐWebに公開できると協業が容易になる
これはちょっと言いすぎに聞こえるかもしれません。でも真実です。なにしろ、リンクをクリックするだけでレビューができるのです。
Adobe XDはプロトタイプをWebに公開する機能を持っています。特に複数のチームが関わっている場合、Webはレビューを行うための、素早く容易にアクセスできる手段です。
「プロトタイプをWebに公開すれば、誰もがそれにコメントすることができました。今回更新されたすべてのページでこの機能は使われています。フィードバックの収集だけでなく、問題の追跡と解決の手順も、これによりまったく違う、効率的なものになりました」。
大きな賭けと大きな成功
時には、新しいアプローチを試してみることが、結果につながることもあります。
300ページ以上を3ヶ月でこなせたのはAdobe XDのおかげでした。ジョッシュのチームは、一貫性と品質管理の実現をこれまでにない速さで実現しました。関係者は、複数の場所や部門や外部の協力者にまたがりましたが、企業レベルでの運用が実現されました。
ジョッシュがCodify Design Studioのデザイナー兼開発者のクリス・コンバースと共に登場するウェビナー”Show them what you’re thinking – Mapping the user journey”が公開されています。ぜひチェックしてください。
この記事は300+ Web Pages in 3 Months（著者: Adobe Communications Team）の抄訳です