灰色ハイジのテキスト

サンフランシスコで働くデザイナーの日記とか考え事とか

トップ > デザイン

FoursquareのUX・UI改善を書いたところ、創業者に届いて、人事からもメールが来た話

アメリカ サンフランシスコ デザイン English

通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。

するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。

チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きました。 採用決定メールではなくて、ただの採用情報の連絡なので、自社製品について語っている人がいたらまぁ連絡とるよなぁ、とは思うのですが、何より驚いたのはそのスピード感。

また、この数ヶ月アメリカで働くとしたら私はどの程度のレベルに位置するだろう？と考えていたので、シニアプロダクトデザイナーのポジションの案内が来たのは1つの指標として自信をくれるものになりました。

ドイツ、台湾のFoursquareのユーザーグループにも届いた

※ チームと表記していたのですが、Superusers (SUs) なのでユーザーグループに近いと思うとの意見を頂いたので見出しを改めました。

2016年にも外部の人がFoursquareについての記事を書いたみたい。サンフランシスコのFoursquareのデザイナーの方にもメンションしてくださってました。

読めないので中国語から英語に翻訳にかけてみたところ、「メインの検索フィールドに直接都市の名前を入れてしまう、この間違い私もよくしてしまう！」と書いてあって、私が記事で指摘した改善点について言及してくれていました。

これが英語

これがアメリカ...！と思っていたところ、夫には「これが英語やで」と言われました。生まれて初めて英語で記事を書いたのですが、それだけでこれまで届かなかった人たちに届いたのだと思うと、デザイナーとして何かを伝える仕事をしているのであれば、これはこれからも英語で記事を書くのは継続してやった方がいいな...!と思わざるを得ない体験でした。30歳になってから始めた英語の学習ですが、ようやく楽しさが分かってきたのでした。

ベイエリアだけでなく、ニューヨーク、アムステルダム、スペイン、台湾、上海などさまざまな都市のデザイナーが記事を読んでMediumで拍手をくれました。

f:id:haiji505:20180313084952p:plain

9周年おめでとう

今日はちょうどFoursquare9周年でした。おめでとう！

追記

日本語訳を出しました。

ベイエリアにある2つのスタートアップ「Laughly」「Finery」のプロジェクトを終えて

Tradecraft 日記 サンフランシスコ デザイン

Tradecraftでの主な活動はクライアントプロジェクト。ベイエリアのスタートアップのオリエンを聞いて、ユーザーリサーチ、プロトタイプ、検証を1プロジェクトあたり1ヶ月くらいでこなす。 先週はとても忙しかったのだけれど、無事に2つのプロジェクトが終わった。 現在ポートフォリオのリニューアルを進めていて、そこに携わったプロジェクトも載せる予定。各プロジェクトの紹介はいずれまとめたいと思っているのだけれど、終えてみての要約と感想を書き記す。

Laughly

コメディーに特化したストリーミングアプリ。現在はAlbumやPodcastなどの音声で、今後動画フォーマットを追加すること、またサブスクリプションのモデルを変更するにあたってそれをどうUIに落とし込むのかというのが課題だった。

このプロジェクトが私の最初のプロジェクトだったこともあり、最初のMTGでとても緊張したことを覚えている。チームの議論に入るのが怖かったのだ。（今以上に1ヶ月前は英語を聞き取るのが難しかった）プロジェクトは最初にオリエンを聞いた後、興味のある人が挙手して参加するのだけれど、サンクスギビング、クリスマス前のタイミングで入った私たちはちょうどプロジェクトが少ない時期だった。そのせいか久々にやってきたこのプロジェクトは参加希望者が多く総勢10人のデザイナーが参加するという大所帯となった。

f:id:haiji505:20180124162539p:plain 楽しかったのはDesign Studioと呼ばれる、全員でペーパープロトタイピングをして投票して設計を決めるワークショップ形式の方法。5-10分という短い時間で全員でアイデアをスケッチし発表、2ラウンド目はみんなのアイデアから良いと思ったものを盗んで再度スケッチ、そして投票してみんなの合意で良いと思ったアイデアを絞り込んでいく。Laughlyは必要な画面数が多かったので機能ごとに分けて行った。事前に時間の設計を行い90分に収まるように各ラウンドの時間は組み立てた。 Design Studioは日本語の情報がぜんぜん無かったのだけれど面白いのでこれもまたいつか記事にまとめてみたい。

f:id:haiji505:20180124162210p:plain
デザインした画面の一部

手書きスケッチやワイヤーフレームをLo-fi (Low fidelity)、Sketch appなどで綺麗に作り込んだデザインをHi-fi (High fidelity)と呼ぶのだけれど、Lo-fiとHi-fiはそれぞれデザインが完成した後でユーザーテストを行い、その結果を元に再度作り直している。Tradecraftのプロジェクトは大体どれもそのようなステップで行っている。人によって作るのが好きな人、リサーチが好きな人のグラデーションがあるので、この方法によって割と満遍なくみんなが作業できるのに加えて、フレームワーク化されることによって次に何をしたら良いのか明確になるので良い。

f:id:haiji505:20180124183403j:plain
コメディアンにインタビューしようとコメディクラブに行ったところ、取材なら別の曜日に来てくれ、と言われて叶わなかったことも...

Finery

自分の持っている服を管理するワードローブサービス。面白いのは、各ECのアカウントと接続すると自動で買ったものがFineryに追加されるところ。

課題はダッシュボードのリニューアル。ビジュアルデザイナーはいるけれどUIデザイナー不在のスタートアップで、依頼を受けた時は、モバイルでデザインが破綻していたり、デザインルールが存在していない状態だった。存在するコンポーネントを集めて、デザインルールを新たに定めた。

f:id:haiji505:20180124160622p:plain f:id:haiji505:20180124161500p:plain

以前からファッション関係のデザインがしたいと思っていたので嬉しい。途中でダッシュボードに掲載する内容を当初のオリエンからまるっと変えたいとの要望がクライアントから来て、締切がタイトになったこともありプレゼン前日に4人でほぼ徹夜になりながら作業をしたのも良い思い出...。深夜にSlackで遠隔で確認＆議論しながら作業を進めてちょっと青春感じた。やってることは世界で変わらない。

f:id:haiji505:20180124180210p:plain
提案したリニューアル後のダッシュボードデザイン

デザインのバージョン管理

5-6人のデザイナーで同じSketchファイルを操作するのでどのプロジェクトでもAbstractを使っている。前に夫と2人で試した時はあまりその恩恵にあずかれなかったのだけれど、大人数の人が触る可能性がある＆同時に操作する可能性があるプロジェクトにはとても良いなと思った。

f:id:haiji505:20180124181347p:plain

この2つのプロジェクトで嬉しかったのは良いメンバーに恵まれたこと。中でもTeaという子は一緒に作業がしやすく楽しかった。ツールの知識やデザインのレベルが近いと、あまり言葉を多く話さなくても円滑に進めることが出来た。彼女とはいつか一緒に仕事がしたい。

関連記事

2018-01-11 Assignment

Tradecraft デザイン サンフランシスコ 日記

Tradecraftは3ヶ月しかない。気付けば3ヶ月目に突入した。「I'm the oldest cohort...!」などとビックリする月である。

インストラクターのZacから個別の課題がそれぞれに出されることになった。 まず最初に自分がどんな方向に進みたいのか、何が課題なのかのアンケートがとられた。 40個くらい項目のあるGoogle Formが送られてきて、それぞれに「やりたくない」「ぜひやりたい」「優先的に関わりたい」の温度感を答えた。

項目は以下のような感じ。

  • Logos
  • Work on VR/AR apps
  • Landing pages for growth campaigns
  • A/B testing to improve product features
  • Work on native iOS apps
  • Creative Direction
  • User Research
  • Building Prototype
  • Design team management
  • etc

私の今の一番の興味としては、プロダクトデザインのブランディングで、これまで得たさまざまなスキルを活かして統合的にどうプロダクトを作っていくか、ということだった。プレイヤーとマネージメントだと、どちらに興味がある？と聞かれた。やりたい方向性としてはプレイヤーだけれど、私の今の一番の課題はどうやって他のデザイナーとコミュニケーションをとって物づくりを推めるのか、ということだった。

Tradecraftのプロジェクトは、実際にサンフランシスコのスタートアップの課題を1ヶ月程度で解決する。毎月そう多くのプロジェクトがある訳ではないため、1つのプロジェクトに10人前後のデザイナーが参加することになる。主にリサーチとUIにフォーカスする人で方向性は分かれていくが、それでも5,6人が1つのSketchファイルを同時に触ったりしている。これは日本に居た時にはまったく経験したことないことだった。

そうして私に与えられた課題は、スタートアップやプロダクトを製作する会社でクリエイティブディレクターになることを目指したもので、自分は手を動かさずに、他の子に指導しながら、クリエイティブの方向性を決めてプロジェクトの成果物を作り上げる、というものだった。 これがとてもハードで、この1週間はとても忙しかった。正直に言えばどんなに量があろうとも、自分一人で作業した方が早い。それを人を導くとなると、いつも自分が頭で描いていることを1つ1つ説明する必要がある。また、どう進めたら良いのか手順も再考する必要がある。これがとてもハードで、でも今の自分にはとても必要なものだと思う。

Tradecraftに居る間にしかこうした経験は出来ないと思うので、とても良い経験になっていると思う。

ようやく今週1つプロジェクトが終わりそうでホッとしている。Laughlyというコメディーに特化したラジオアプリに新機能を追加するため、ユーザーリサーチからプロトタイプ作りまでを行った。

f:id:haiji505:20180112172357p:plain
ユーザーインタビューはあまりコミット出来ないので、手を動かすフェーズでは貢献しようと思い、Design System作りを行った。

そうだ。もう1つの課題はサンフランシスコに居るクリエイティブディレクターをピックアップして5人にメールを送りコーヒーを飲んで質問して来なさい、というものだった。ようやくTradecraft内の人と喋れるようになってきたところだけれど、まだ外部の人と英語で話すのは緊張するな...。

プロダクトデザインの訓練に、ホワイトボードチャレンジをしてみよう！

Tradecraft デザイン サンフランシスコ

f:id:haiji505:20180109043542j:plain

こんにちは、灰色ハイジです。

私が在籍しているサンフランシスコにあるプロダクトデザイナー養成所「Tradecraft」では、座学だけでなく手を動かして問題解決に挑むカリキュラムがたくさんあります。そのうちの1つがこの「ホワイトボードチャレンジ」です。

目次

ホワイトボードチャレンジって？

ホワイトボードチャレンジは、選ばれたお題に沿って、「クライアント役」からのヒアリングからスケッチまでを、「デザイナー役」の人が20分間で行うUX/UIデザインの訓練方法です。 デザイナーだけでなく、プロダクトに関わる人全員の問題発見能力とヒアリング、デザインについて伝えるスキルを鍛えるのに役立ちます。また、デザインをする人の思考プロセスを可視化する訓練になります。

新人デザイナーの訓練に良いのはもちろんのこと、私は実際にやってみて、チームでプロダクトについてディスカッションする際にも用いると効果的だと思いました。ホワイトボードを使う利点は、書くプロセスを他の人も見ることが出来ることです。紙の上に書いても、もちろん良いのですが、手や頭に覆い隠されてしまっていたり、アングルの問題でなかなか見づらくなってしまいます。

ぜひ、デザイナー以外の人もチャレンジしてみてください！

全体の流れ

f:id:haiji505:20180109183934p:plain
時間の配分は目安です。トータルの20分間に注意しながら、なるべく2番に時間を割けると良いでしょう。

「デザイナー役」と「クライアント役」の2人1組が、20分間で以下のことを行います。

デザイナー役

  • クライアント役に何が必要なのかを質問して課題を整理する

  • 課題に対するアイデアを考え、ワイヤーフレームなどのデザインスケッチを行い、プロダクトを提案する

クライアント役

  • 「誰の何のためのアプリ、機能」が書かれたお題をピックアップする

  • お題に沿った自分が欲しいものを想像して、デザイナーからのヒアリングに回答する

タイムキーパー

  • タイムキーパーも兼ねて、上の2人以外の人もいると良い

  • 上記の様子を見て気付いたことがあったらメモをとっておき、終わった後にフィードバックする

Step0: 準備

f:id:haiji505:20180109044330p:plain

お題を書いたカードを用意しましょう。

f:id:haiji505:20180108190034p:plain
Tradecraftではさまざまなお題が書かれたカードが箱に入ってホワイトボードの前に置かれています。クリスマスの時期にはサンタの為のアプリと言ったお題も入れられていました :D

お題の例

  • 大学生のためのレシピアプリ

  • 大家さん用ToDoアプリの新規登録/ログイン画面

  • 親と子どものための本検索アプリ

お題カード作りました

印刷して使えるお題のPDFを用意しました。こちらからダウンロードできます。

f:id:haiji505:20180108185832g:plain:w300

自分の作ってみたいアプリや、現在取り組んでいる課題があれば、それを題材にするのも良いでしょう。もしあなたが新人デザイナーだったらランダムに選ぶことをオススメします！思いがけないお題が来て、頭が真っ白になるかもしれませんが、きっと良い訓練になります。

クライアント役の人は、最初はあなたの上司や先輩にやってもらうと良いかもしれません。クライアント役になった人は、選ばれたお題のイメージを膨らませておきましょう。（あなたがユーザーだったら何が欲しい？実際に作るならどんな目的で作る？）

Step1：問題を理解する（5分）

f:id:haiji505:20180109050129p:plain

まず、クライアントの持つ問題を理解して、ホワイトボードに書き残します。（Step2は広いエリアを必要とするので、ホワイトボードの左半分より大きくならないように注意します） デザイナー役の人は、クライアント役の人にまずは質問してみましょう！方法は自由ですが、以下にいくつかのフレームワークを紹介します。

ユーザーストーリー

ホワイトボードの左側に「Who」「What」「Why」と書いて、上から順番にクライアント役の人に質問してメモしていきましょう。

f:id:haiji505:20180108185037p:plain

クライアント役の人はお題に沿いながら「一人暮らしの大学生 (Who)がレシピを探したい（What)。友だちとホームパーティーをするために（Why）…」といったように即席でそのアプリにまつわるストーリーを創作して答えてあげてください。

上記を基本としながら、どんな大学生？どんなレシピ？と深堀して聞いていきましょう。どんなシチュエーションで欲しているのかを、より詳細に特定するために、「いつ使う？（When）」を私はよく聞いています。

クライアント役の人は、「授業の合間にレシピは検索して保存しておきます」「スーパーに行ってから使う」など具体的なシーンを思い浮かべて答えましょう。

ペルソナ

ペルソナは、その製品を使う人物像を定めたものです。趣味や習慣を、細かく定めます。（例えば、旅行好きというだけでなく、1年間に何回くらい行くのか、など）

Needs & Goalsに、そのペルソナが必要としているものを記載します。クライアント役の人に聞いてみましょう。この項目がStep2であなたが解決し考えるべきアイデアの元になります。

f:id:haiji505:20180108184809p:plain

他にも…

Job Story: 動機・背景について考えるジョブストーリー

Step2: アイデアを具体化しよう（14分）

f:id:haiji505:20180109050101p:plain

さて、ここからが本番です。真っ白なホワイトボードに何から描き始めれば良いのか不安で、タイマーが切れるまでクライアントに話を聞き続ける方が楽だと思うかもしれません。でも、ここがデザイナーとして一番鍛えられる場面です。

下手なスケッチを人前で披露することには緊張するかもしれませんが、綺麗に作り込むよりも、雑でも良いので素早くたくさんのスケッチを描くことがより多くのアイデアを生み出します。

f:id:haiji505:20180108185114j:plain
これは私が「ヘアカタログアプリ」というお題でチャレンジしたときのもの。英語が不自然なのはご愛嬌…

アイデアをスケッチしている間は、あなたの考えを大きな声でシェアしてください。 「最初に髪の長さを選んで、その後に顔の形を選ぶことが出来て、さらにシチュエーションをフィルター出来る…」といったように。 声に出しながらスケッチを描くことは、出来上がったデザインを提出するのと同じくらい重要なので絶対やりましょう。クライアントやあなたの上司は、何故そのデザインに至ったのか？というあなたの考えを知りたがっていると思ってください。

「どう思う？」と途中でクライアント役の人に質問してみるのも良いかもしれません。クライアント役の人も自分の想像していたものと同じかどうか、もっとこんなものを望んでいた、という意見を伝えてください。

「ヘアカタログアプリ」にチャレンジした私の例だと、最初に髪型を選ぶシチュエーションを書いたのですが「私は自分の長さと同じ髪型かどうかを最重要視している」というコメントをもらったので、その場で描き直しました。

アイデアを具体化するフレームワーク

ワイヤーフレーム以外にも以下のようなものがあります。

  • タスクフロー: ユーザー登録など特定のタスクにおいてのユーザーの行動を記したフローチャート

  • ユーザーフロー: タスクフローと似ていますが「ユーザーのWant」と「Goal」を定めて作るフローチャートです。行動が分岐することもあります。

  • サイトマップ: ウェブサイトやアプリの画面遷移の構造をまとめたものです。既にあるサイトなどを改善する際に用いると良いでしょう。

組み合わせるのも効果的で、これらを先に描いてから、ワイヤーフレームを描こうとすると、「何故その画面をデザインするのか？」という目的がハッキリします。

参考サイト: フローチャート設計の最新UX用語と、4つの役立つツール | Workship MAGAZINE(ワークシップマガジン)

Step3: まとめる（1分）

f:id:haiji505:20180109050115p:plain

深呼吸してクライアント役の子にあなたのスケッチを説明します。

やってみると分かるのですが、思っていた以上に早く時間切れになってしまい、大抵はStep2の途中でタイマーが鳴ってしまいます。20分という時間内にホワイトボードチャレンジを終わらせることは難しいです。でも心配しなくても大丈夫です。それこそが、このチャレンジを繰り返す行う理由です。このStep1から3を何度も行うことで、素早くニーズをキャッチし、たくさんアイデアをスケッチする訓練が出来ます。

とにかくこのチャレンジでは、急いでスケッチを描いてください。このまとめの時間をとることが出来ると、クライアントがあなたのアイデアを理解し、それがどのようにプロダクトに役立つのか確認することが出来ます。

もし時間が余ったら

アイデアを改善したり、拡張したり、他のシチュエーションについても考えてみよう。

「プロダクトの規模が拡大した場合には、デザインはどのように変更しないといけなくなる？」 「アイテムが1つもない場合に、どのように表示される？」

参考記事＆便利ツール

Tradecraftに私とほぼ同時期に入ったデザイナーの2人が、ホワイトボードチャレンジについてまとめた記事です。英語の記事ですが、さらに詳しく知りたい方はぜひ。日本語のこの記事を書くにあたって参考にしています。

Tradecraftの講師が制作したホワイトボードチャレンジ用のウェブアプリです。タイマー機能付きでお題をランダムに出題してくれます。

チャレンジジェネレーター

最後に

f:id:haiji505:20180108193307j:plainf:id:haiji505:20180108193904j:plain

このホワイトボードチャレンジのプロセス自体はUX/UIデザインを行うための基本的なものですが、20分という短い時間でヒアリングからスケッチまで行うため、スポーツでいうところの基礎体力をつけるトレーニングにあたります。業務であれば、時間をかけて参考資料を探したりしながらデザインを行っているかもしれません。しかし、このホワイトボードチャレンジでは瞬発力が求められます。デザイナー役は、ヒアリング力とスケッチ力が鍛えられますし、クライアント役は企画力と、どんな人が製品を使うのか、という想像力を鍛えることが出来ます。

Tradecraftでは毎週水曜日の午前中に1時間ホワイトボードチャレンジの時間があります。毎回同じ人とやるよりは、違う人とやる方が対話スキルも鍛えられます。繰り返し色んなテーマや色んな人とチャレンジしてみてください。

ぜひチャレンジしたらハッシュタグ「#ホワイトボードチャレンジ」で投稿してみてください。

関連記事

2018年が始まって

Tradecraft 日記 サンフランシスコ デザイン

冬休み中にすっかり英語を忘れ、新年初日は学校が憂鬱だった。 お決まりの「How was your holiday?」をたくさん聞かれるのに、うまく答えられない。元々よくない発音も更に悪くなってて「Huh?」と聞き返される始末。

2日目の朝に友だちに「Did you think of your story?」って聞かれて何かと思ったら、その日の午後までに、面接を想定して自分の過去と未来を2分半で語った動画を撮っておかなければいけなかったらしい。冬休み前に出されていた課題を聞き取れていなかったのだ。「え！！」と焦りながらも、午前中のカリキュラムの合間に必死に自己紹介文を書いて、ランチタイムにみんなで録画しあった。

そして午後、先生の前で順番に発表。 構成についての先生のフィードバックは「中盤のプロモーションの仕事が長く感じられて、プロダクトデザインとどちらをやりたいのか分からなかったから、後半を手厚くすると良いかもね（意訳）」という的確なものだった。 そしてもちろん発音についてはひたすら改善が必要だ。

Carrot & Stick は無事に冬休み中に課題を終えた。今度先生がソイラテを奢ってくれるらしい。 ポートフォリオに2件日本の時の仕事を載せた。

f:id:haiji505:20180108100610p:plain f:id:haiji505:20180106115649p:plain

将来アメリカで働くかはまだ分からないけれど、少なくともその準備はしておこうと思っている。職種にもよるだろうけれど、こちらは仕事のプロセスが評価に繋がっているような気がする。また、アメリカでの活動に際して、本名を使うことに決めたので、灰色ハイジとは別にポートフォリオを構築中。

英文は、ゆかちゃんに添削してもらった。意訳＆私の言葉足らずな部分を補ってくれていてとても感激した。英語で文章をうまく書けるようになりたい。（日本語も毎回夫に指摘されるので、英語だけの問題じゃないのかもしれない）

1月に入ってまた新しい子が入ってきた。台湾から来た子と長く話し込んだのだけれど、似たようなカルチャーだとやっぱり話しやすい。3日ほど経ってようやく冬休み前のようにコミュニケーション取れるようになってきた。