コンテンツ
- プロジェクトの目標は何でしたか？
- どのようなUX調査を行いましたか？
- 仕事はどのように分割されましたか？
- コミュニケーションはどのように処理しましたか？
- 時間と予算の制約を管理するために、プロセスをどのように適応させましたか？
- プロジェクトのコアデザインの価値をどのように特徴づけますか？
- かなり上手く乗ったようですね。それはプロジェクトにどのように影響しましたか？
- どのテクノロジーを使用しましたか？
- ジョンはこれを「夢のプロジェクトに最も近いもの」と説明しました。どうして？
- パターンライブラリをどのようにコンパイルしましたか？
- なぜ図書館を共有したのですか？
- なぜアルファリリースをしたのですか？
- 古いサイトからのコンテンツの移行をどのように処理しましたか？
- このプロジェクトには主題歌がありましたか？
ベイエリアの非営利団体Codefor Americaは、米国政府のデジタルサービスを美しく、シンプルで使いやすいものにするのに役立ちます。英国を拠点とするUXエージェンシーClearleftと提携して実施された最近のサイトのオーバーホールは、同じ価値を独自のオンラインプレゼンスにもたらしました。 Clearleftでは、Jon Aizlewoodがビジュアルデザインを担当し、フリーランサーのAnna Debenhamがフロントエンドのビルドを担当し、JeremyKeithが作業を監督してJavaScriptを作成しました。 CfAでは、UXエバンジェリストのCyd HarrellがIAを担当し、CTOのMike Migurskiが変更を実装し、シニアマーケティングマネージャーのDanaOshiroがプロジェクトを管理しました。
プロジェクトの目標は何でしたか？
マイク・ミグルスキー：私たちの最初の使命は、古くて不気味なCode for AmericaのWebサイトを、より現代的に見えるものに置き換えることでした。 2013年の夏にプロジェクトに取り組み始めたとき、プロジェクトをより良くするのに役立つ3つの目標を特定しました。まず、政府とオタクコミュニティの動機に関するCyd Harrellの調査では、サイトの専門用語を、視聴者向けに直接書かれたものに置き換える必要があることが示唆されました。
第二に、GOV.UKの立ち上げは、政府のWebサイトの役割に新たな注目を集めました。市や郡のパートナーにアドバイスする際に、有意義な直接体験を利用したいと考えました。最後に、さまざまなイニシアチブに対して一貫性のないサイトデザインが多数あることに気付き、将来のプロジェクトを構築する際に利用できる柔軟でモバイル対応のパターンのライブラリが必要でした。
どのようなUX調査を行いましたか？
Cyd Harrell：全体的なエンゲージメントモデルまたは参加のアーキテクチャにも取り組んでいたため、Webサイトの再設計で一般的であるよりも生成的なスタイルの調査を行いました。さまざまなプログラムの現在、過去、および将来の参加者約40人にインタビューを行いました。私は、私たちと一緒に仕事をする人々の動機、興味から完全な関与への道、そしてウェブサイトが彼らの旅で果たした役割を調査しました。
新しいウェブサイトのデザインの多くの根底にある最も興味深い発見は、彼らの専門的なスキルを永久に使用したいという非常に強い願望でした。公務員と商業技術者はさまざまな方法でこれからブロックされており、Code forAmericaの活動はそれらのブロックを超える方法を提供します。そのため、人々が行動し、行動の影響をできるだけ早く確認できるようにWebサイトを方向付けることが、最優先事項になりました。サイトの開発を続けると、これが強化されます。
仕事はどのように分割されましたか？
ジェレミーキース：通常、Clearleftがプロジェクトに関与している場合、UX側のこと、ビジュアルデザイン、場合によってはフロントエンド開発をカバーします（バックエンド開発を行わないことを意図的に選択します）。このプロジェクトは少し異なっていました。CodeforAmericaはすでに大規模なコンテンツ監査を経ており、必要なユーザーエクスペリエンスを実現していました。そのため、ビジュアルデザインとフロントエンド開発を行う必要がありました。作業が進むにつれて、UXまたは情報アーキテクチャに関連する問題はすべて共同で処理されました。
コミュニケーションはどのように処理しましたか？
JK：私たちは毎日、簡単な「スタンドアップ」電話会議を行いました。私たちにとって、電話は1日の終わりの午後5時30分でした。それは、人々がコードフォーアメリカのオフィスに入っていたのと同じように、サンフランシスコでは午前9時30分でした。それは驚くほどうまくいきました。彼らから必要なものがあれば、一日の終わりに彼らに知らせます。それから彼らはそれをまとめるために一日中持っていたので、私たちが翌日仕事に入るときそれは私たちを待っていました。これらの大西洋横断のチャットはいつも素晴らしくて短いものでした。それらが10分または15分より長く続くことはめったにありません。それは、誰もが何が起こっているのかを理解するのに十分な長さでした。そのレベルの継続的なコミュニケーションはちょうど良かったです。途中で予期しない驚きや「大きな暴露」はありませんでした。
時間と予算の制約を管理するために、プロセスをどのように適応させましたか？
JK：厳しいタイムスケールと限られた予算で作業するということは、意思決定を迅速に行わなければならないことを意味しました。すべてを詳細に検討する余裕がありませんでした。つまり、アイデアは可能な限り迅速に伝達される必要がありました。時々それは紙のスケッチでした。より詳細な情報が必要な場合は、Photoshopが役立ちます。相互作用の質問である場合は、いくつかの実用的なコードをすばやくまとめようとします。
タイムスケールが短いということは、設計と開発を並行して行う必要があることも意味していました。開発を開始する前に、設計が完全に理解されるのを待つだけの十分な時間がありませんでした。これはプラスの効果があったと思います。デザインはPhotoshopで調査されましたが、ブラウザーで完成しました。
ジョン・エズレウッド：奇妙なことに、ブライトンとサンフランシスコの間の9つのタイムゾーンは、変装した祝福でした。毎日のスタンドアップは、私たちがその日に終えた仕事を通して話すことを可能にしました。基本的に、毎日が最後に再生されるスプリントだったので、私たちは毎日午後5時30分に間に合うように設計、開発、反復を行っていました。これは、誰もが取り組んでいることに完全に最新であったため、電子メールテニス、Basecampの小説、およびプロジェクト管理がほとんどないことを意味しました。コンテンツやページの説明図などを共有するためのGoogleドキュメントに加えて、To Do、Doing、DoneのかんばんスタイルのアプローチにTrelloを使用することを選択しました。
プロジェクトのコアデザインの価値をどのように特徴づけますか？
JA：CfAチームは、州の代理店によってすでにいくつかのブランディング作業を行っており、サイトの視覚言語のトーンを設定するのに役立ちました。この言語をWeb向けに進化させたとき、CfAが組織として使用する原則を実行し、UIの強力で大胆なパレット、大きなタイポグラフィ、および全体的なシンプルさを通じてそれらを表現しました。私たちは、このサイトが強力でコミュニケーションがよく、愛国心が強く、CfA運動に関心のあるすべての人から親しみやすいものであることを望んでいました。
んん：仕事を推進する3つの価値観は、開放性、通貨、楽観主義でした。アイデアは、ここが秘密のソースを共有するアクセス可能で居心地の良い場所であり、サイトがコンテンツと実際の動作の両方の点で最新であり、市民と政府が協力して物事を改善できるということです。
かなり上手く乗ったようですね。それはプロジェクトにどのように影響しましたか？
JK：ジョンはClearleftのフルタイムの従業員ですが、アンナはフリーランサーです。しかし、このプロジェクトのために、私は彼女がクリアレフトのオフィスに来るだけでなく、ジョンと並んで座っていることを主張しました。彼らはお互いを殺しませんでした。実際、彼らはとても楽しかったと思います。プロジェクトの終わりまでに、Annaは、teamethod.co.ukに文書化されている、お茶を作るという彼女の物議を醸すアプローチのメリットをほぼ確信していました。コード・フォー・アメリカのカウンターパートへの大西洋横断電話会議で一日を終えることは常に素晴らしいことでした。私たちが関わっていた3人は、一緒に仕事をするのに絶対的な喜びを感じました。
アンナ・デベンハム：私たちは平等な立場にありました。CodeforAmericaの人々は自分たちのことを本当に知っているので、信じられないほど役立つフィードバックを提供し、問題を先取りすることができました。システムの構築は、プロセスのほんの一部でした。プロジェクトがどれだけ成功するかを実際に決定するのは、Code forAmericaが数か月から数年にわたってプロジェクトを維持および構築するのがいかに簡単であるかに基づいています。
どのテクノロジーを使用しましたか？
広告：SassではなくCSSファイルを提供するように依頼されましたが、開発中にSassを使用して、px値をremsに変換したり、色変数を保存したりしました。プロトタイプテンプレートはJekyllで作成されましたが、ページがデータベースではなく静的HTMLファイルとして保存され、他の人が簡単に共同作業できるため、これがライブサイトで使用されることになりました。タスクの管理には、壁に物を貼り付けるのではなく、Trelloを使用しました。これにより、いつでも誰でも、何が進行中であるかを確認できます。ジョンはデザインにPhotoshopを使用しました。これは私に多くのことを誓わせたので、彼はもうPhotoshopを使用せず、代わりにSketchを使用しています。
デバイスのテストとバグ修正に関して、Ghostlabは大きな助けになりました。プロトタイプにローカルで変更を加え、デスクトップのブラウザーを更新すると、すべてのデバイスのブラウザーが自動的に更新されます。プロトタイプには初日からGitHubを使用し、プロジェクトの終わりに向けてバグが報告されました。現在、すべてのサイトファイルが存在するため、簡単に変更できます。
ジョンはこれを「夢のプロジェクトに最も近いもの」と説明しました。どうして？
JA：絶え間ない対話と、オープンで正直なフィードバックを提供するクライアントの組み合わせが、私にとって、プロジェクトの成功の基礎であると思います。毎日のスプリントはすべてを集中させて軌道に乗せ、CfAの人々は受容的で、迅速に行動し、彼らが何について話しているのかを知っていました。彼らが正当な目的のために良い仕事をしている本当に素晴らしい人々の集まりであることは害にはなりません。全体として、それは完璧なミックスでした。
広告：Code for Americaは、私たちが提供し、少し実験することを信頼してくれました。彼らはアイデアに対して非常にオープンでした。それはまた、彼らがすべてのデザインを気に入ってくれて、私たちのユーモアのセンスを共有するのに役立ちました！
パターンライブラリをどのようにコンパイルしましたか？
広告：Code for Americaから、最近作成したブランドスタイルガイドが送られてきました。 Jonがテンプレートのモックアップを開始している間、私はそれを選び出し、Webサイトに必要なもの（フォント、色、アイコン、画像）をいくつか抽出しました。モックアップを作成する準備ができたら、デザインをパターン（コンテンツの個別のモジュール）に分割し、それぞれを作成して、さまざまなデバイスでテストしました。毎日のスタンドアップでは、どの新しいパターンが作成されたかを確認し、ブラウザで一緒に確認しました。
パターンの横にコードがあると、Code forAmericaがHTMLとデザインに関する技術的なフィードバックを提供してくれることがあるので良かったです。途中で、パターンライブラリの「パッチワーク」ビューを追加して、デバイスのテストに役立て、コンテナにラップするのではなく、パターンを全幅でチェックできるようにしました。
なぜ図書館を共有したのですか？
広告：いいこと以外に、どうして？結局のところ、Webサイトが公開されている場合、CSSとHTMLはソースを表示することですでに利用可能です。ライブラリは他の人にとって優れた学習ツールであるだけでなく、GitHubに配置することで、バグの修正や改善を提案する場所ができます。また、コードがはっきりと見えるようになることを知っていることは、より良い、より思慮深いマークアップを書くための良いインセンティブです。
なぜアルファリリースをしたのですか？
んん：いくつかの理由から、メインサイトの立ち上げの6週間前にアルファリリースを行うことにしました。まず、新しいサイトが古いサイトに置き換わる前に、コミュニティが新しいサイトを見て探索できるようにし、GitHubにあるコンテンツを利用して修正や追加を送信できるようにしたかったのです。第二に、組織として、私たちは政府パートナーのためのアジャイル/リーン開発方法論の背後に立っており、その話を歩きたいと思っていました。また、一定期間にわたって1つずつ実行できる場合は、切り替えを行う方がストレスが少なくなります。現在でも、古いサイトは引き続き利用できます。
古いサイトからのコンテンツの移行をどのように処理しましたか？
んん：コンテンツの移行が最大の作業でした。ビジュアルデザインフェーズに到達する数か月前に言葉を動かし始め、政府と市民のセクションのページを書き直して簡素化し、構成要素の焦点を反映させました。 Dana Oshiro、Cyd Harrellと私は、コンテンツの整理と合理化、リダイレクトの設定、新しいページの作成を行う6つの「ページカル」を開催しました。 Danaは、このトピックに関する優れたブログ投稿「Testing TheUglyDuckling」を公開しています。
Clearleftの作業が完了すると、1月は残りのページを転送するための積極的なプッシュとなりました。 Danaは、Cydと私からの多くのコピー/貼り付けの努力により、この作業の大部分を担いました。それは魅力的な仕事ではありませんでした。古いサイトのスタイルシート用に最適化されたマークアップを取り除き、既存のリンクが失敗しないようにリダイレクトをマッピングし、画像とリンクを移動し、2つのサイト間のリンクを継続的にテストする必要がありました。少しのPythonコードがテストに役立ち、共有スプレッドシートが調整に役立ち、膨大な数のHTTPリダイレクトが驚きの404を最小限に抑えました。アルファリリース後、私たちのコミュニティは、問題やプルリクエストを介してページコンテンツを完成させるのを手伝ってくれました。
このプロジェクトには主題歌がありましたか？
JA：おかしいです。人形、マットデイモン、そしてたくさんの罵倒が含まれているこの映画があります。その特定の映画の主題歌が少なくとも一度はフルボリュームで再生されるまで、私たちの日々は始まりませんでした。コード・フォー・アメリカ、Fuck Yeah！
