舞台裏: 1,200 万ユーザーの Web サイトを再設計するために必要なこと

クレジット：

シェーン・スノーはニューヨーク市在住のテクノロジージャーナリストです。 Twitter で彼をフォローしてください@シェーンスノー。

男性向けライフスタイル出版物 Thrillist は、新しいサイトデザインを発表しました。 Thrillist のデザインチームは、ユーザー 1,200 万人の Web サイトを 1 年近くかけて調査し、その後新しい外観を発表しました。

大規模なサイトの場合、完全な再設計は一か八かのリスクが伴う可能性があります。今年初めの Digg 4 では、新しいユーザーエクスペリエンスを展開する際に何が問題になるかを示しました (ディグさんの場合、騒々しい騒ぎと渋滞）。ツイッター一方、今年は再設計を開始しましたいくつかの障害を発生させずにユーザーエクスペリエンスを向上させました。

Mashable は、大規模なアートプロジェクトの内部がどのようなものであるかについてのスクープとともに、Thrillist の新しいデザインをチラ見せしました。この完全な Web の変身の構造を読み続けてください。

クレジット：

ニューヨーク出身のベン・レーラーの発案で、スリル満点の彼の街では「若者が入手できる面白くて実用的な情報が不足していることに対処する」ために、2005 年に設立されました。 2010 年までに、この出版物は米国と英国の 19 都市で毎日 220 万の購読者に提供され、2010 Inc 500 の急成長米国企業の 93 位に挙げられました。

このサイトは、増大する視聴者のニーズに対応するために 2008 年に再設計されましたが、翌年までにサイトの規模が大きくなり、同社は使いやすさと拡張性を考慮して Web サイトの再設計と再構築を担当するチームを結成しました。

再設計チームは、Thrillist の新製品開発ディレクターである Chris Steib が同年 11 月に雇用された後、2009 年後半に初めて大騒ぎになりました。数十人のスリリストチームメンバーがデザインプロセスに関与しましたが、負担の大部分はスタイブと他の 2 人の肩にかかっています。クリエイティブディレクターのジェスウィリアムズとテクノロジーディレクターのマークオニールです。「これは間違いなく、最初から最後まで私が関わった中で最大のプロジェクトです」とシュタイブ氏は語った。

再設計プロセス

クレジット：

左: Thrillist.com;右: 新しいスリリストデザイン。ことわざの鉛筆がページに到達する前に、シュタイブは製品の方向性に関する宿題を何ヶ月も費やしました。「最初のステップは、以前のプロセスと実装をどのように改善できるかを判断し、既存の Web サイトに UX とデザインの問題がないか監査することでした」と Steib 氏は言います。「その後、私は早い段階で各部門の責任者およびそのチームの主要な関係者と会い、幅広いビジネス要件を収集しました。これらを大まかな範囲に分割し、会社の最優先事項である基本的なサイトマップとテンプレートディレクトリを構築しました。」

次にナビゲーションが登場しました。スケッチを作成する前に、チームはどのページを描画する必要があるかだけでなく、各ページがサイトの階層のどこに収まるかを把握する必要がありました。

バックグラウンド作業が完了すると、Steib はワイヤーフレーム (ページ上の要素を配置する場所を示す箱状のレイアウト図) を最初は手作業で、次に Photoshop で描画し始めました。ワイヤーフレームは、各「テンプレート」、またはレイアウト内の要素の独自の組み合わせに対して作成されました (たとえば、ホームページと個々の記事ページには異なるテンプレートがありました)。

クレジット：

各ワイヤーフレームは、レラー自身を含むスリリスト幹部との会議でレビューされ、議論されました。「これは、テンプレートを画面上に表示し、1 時間かけてバラバラにし、その後デスクに戻って変更を加え、次のセッションに向けて繰り返すことを意味しました」と Steib 氏は言います。

最初に承認されたワイヤーフレームでデザインの方向性が確立されると、チームのクリエイティブディレクターであるウィリアムズが実際のアートワークの作成に着手しました。

ウィリアムズは、Thrillist のブランドポジショニングが目指していた雰囲気を表現する、カラーパレットと「ムードボード」、つまりウェブや印刷物から集めたデザイン例のコラージュをまとめました。ページの階層から小さなボタンの詳細まで、すべてを網羅しています」とウィリアムズ氏は語った。「その文書から、どのスタイルが新しいサイトにインスピレーションを与えるスリリストの美学に影響を与えるかを突き止めることができました。私たちは洗練されたモダンなデザインに惹かれ、グレーに赤と青のハイライトを加えたカラーパレットを選びました。これは、多数のグラデーション、シャープなエッジ、ハイコントラストを備えた、男性的かつ現代的なものでした。」

クレジット：

一方、オニールと彼の開発チームは、サイトの TOP アルゴリズム (サイトで最も人気のあるコンテンツを表示する) などの新機能のためのバックエンドフレームワークの構築を開始しました。また、速度を向上させるために、Web サイトのデータベースを MongoDB に移行し始めました。

パターンと色の調査後、ウィリアムズは Web サイトのヘッダーのデザインを開始しました。会社の取締役との最初の会議で、彼女はいくつかのアイデアを提示し、チームはそれについて議論しました。「最初のミーティングから迅速に作業を繰り返し、特定のヘッダーで気に入った詳細を正確に特定し、それをその後のデザインモック全体に反映しました」とウィリアムズ氏は言います。

クレジット：

完成したヘッダーは、ページデザインの残りの部分のトーンを設定します。ウィリアムズはサイトの各ページのデザインを練り上げ、毎週のディレクター会議で議論、批評し、修正、描画、改訂を繰り返しました。

クレジット：

すべてのページが承認されるまでには 4 月から 8 月かかったが、その間、デザインチームは新しく買収した JackThreads.com など、Thrillist 用の他の製品の展開にも取り組んでいた。

その時点で、Williams と Steib は最終的なデザインをフロントエンドとバックエンドの開発チームに引き渡し、実際の Web サイトを構築しました。

実装

新しいデザインの構築は簡単でしたが、避けられない問題がいくつかありました。

「私たちは 45 個のモックアップを送りました...20 個の Photoshop テンプレートを送りました」とウィリアムズ氏は言いました。「そして、私たちはまだ何かを見逃していました。」

クレジット：

たとえば、サイトの新しいログインは動的なドロップダウンボックスでした。ただし、スリリストの電子メールには「ログイン」へのリンクが含まれており、通常はフラットなログインページが表示されます。オニール氏のチームがこれを指摘したため、ウィリアムズ氏は新たなページを作成した。

クレジット：

「設計を実際の実装に移す際のもう 1 つのポイントは、移行です」とシュタイブ氏は指摘しました。ポップアップボックスが表示されたときに発生するアニメーションのような、「トランジションを実際にデザインすることはできません」。フロントエンドチームがトランジションをコーディングした後、設計チームは構築されたサイトの一貫性と設計の整合性を監査しました。

実用モデルが構築されたら、あとはサイトを Thrillist のコンテンツ管理システムバックエンドとデータベースに接続するだけです。

計画から実行まで、プロジェクト全体には約 1 年かかりました。

教訓とデザインのヒント

スタイブ、ウィリアムズ、オニールは、1 年間にわたる再設計プロセス中に学んだ教訓のいくつかを共有しました。

クリス・ステイブは次のように提案しました。

Thrillist のようなサイトでは、コンテンツがトーンやスタイルの重要な部分を占めており、「コンテンツがデザインを主導する必要があります。」

企業のリーダーを早い段階からプロセスに参加させて、悪いアイデアに時間をかけすぎる前に彼らがそれを排除できるようにします。

会議にはチョコレートを持って行きましょう。

ジェス・ウィリアムズは次のように提案しました。

場合によっては、機能しないものを設計する必要があります。こうすることで、チームは何がうまくいくかを感じることができます。

デザインモックアップではダミーテキストではなく実際のコンテンツを使用してください。これは、デザインに必要なバランスを現実的に確認する最良の方法です。

実は自分でもできます。デザインプロセスを外部に送信するのではなく、自分で所有することには、余分な時間を費やす価値があります。