灰色ハイジのテキスト

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

次世代女性コミュニティ The Potluck を立ち上げた

The Potluck - Notion

RieさんなぎこさんAmiさん と水面下で準備を進めてきた挑戦をし続ける女性のためのコミュニティ The Potluck をローンチした。

ポットラックとは、食べ物などを持ち寄って集まるパーティーのことで、それぞれのフィールドで活躍する女性が集まって仕事だけでなくプライベートなことも相談できる場所作りを目指している。

3年ほど前にRieさんからThe Potluckの構想を聞き、数人のメンバーで合宿をしたのが始まりだ。私がサンフランシスコに引っ越した後、不思議な縁でRieさんも結婚をして引っ越してきた。また、なぎこさんも仕事でサンフランシスコに来る機会があり、本格立ち上げに向けて準備をして、今日ようやくお披露目することができた。 The Potluckの立ち上げの経緯や思いは、Rieさんのブログで綴られている。

The Potluckの活動

f:id:haiji505:20190419112213j:plain

クローズドなコミュニティ

The Potluckの主な活動はSlack上でのクローズドなコミュニティだ。アメリカのコンシューマービジネスやデザインについてリサーチやディスカッションを行っている。これはメンバーがサンフランシスコ、ニューヨークそして東京に居ることで日々新たな情報を収集することができている。また、それぞれ得意な分野が違うため、違う意見が聞けて面白い。私はデザイン面でのリサーチを、他のメンバーはマーケティングやビジネス視点での考察をしている。

また、クローズドなコミュニティだからこそ、仕事の面だけでなく、生きていく上での悩みー健康や人間関係についても相談できる場所になっている。

パブリック

そして今回ローンチにあたってはウェブサイト代わりにNotionを使用した。

The Potluck - Notion

Notionは、私が普段メインで使っていることもあるけれど、体裁を整えるのに時間をかけるよりも、リアルタイムにやっていることを公開できた方が面白いだろうと思ったからだ。今後、私たちが行っているリサーチなどをこのNotionのページやPodcastなどを通じてパブリックに公開していく予定だ。

f:id:haiji505:20190419115856p:plain
ちなみにNotionでは、ページの一番上にある画像と文章がそれぞれOGPに反映されるようになっている。URLが長くなってしまう以外はウェブサイト代わりにとても良いプラットフォームではないかと思っている。

NotionのWorkspaceを使うことで、公開用のページと、管理ページ(Internal)を分けている。Internalには公開前の下書きや、議事録などのコンテンツを置いている。

f:id:haiji505:20190419111423p:plain f:id:haiji505:20190419111554p:plain

メンバープロフィールは、Notionのギャラリー表示機能を使用した。それぞれのプロフィール詳細に載せる項目も共通化されるので、Notionのテーブルは名簿のようなものを作るのにも向いている。

f:id:haiji505:20190419114134p:plain

既にメンバーはそれぞれのブログを持っていたので、The Potluckの活動分野に関連する記事はリンクをまとめるだけにした。リンクを貼ると、タイトルとOG imageを綺麗に表示してくれるところがNotionは良い。

メインビジュアル

f:id:haiji505:20190419113225p:plain

Podcastをやりたいという構想をRieさんから聞いた時、メインビジュアルには私たちの写真が使われていた方が「どういう人が喋っているのか?」というのが伝わって良いだろうなと思い、なぎこさんがサンフランシスコに来た時に3人で写っている写真を使用した。 色については、私たちの興味の対象が「自分たちの衣食住を豊かにする」ものが多かったので、生きている感じのする明るい色が良いなと思いこの色に落ち着いた。 書体も、当初スマートな感じにしたくて探っていたけれど、強さ+気取りすぎていない感じがしたくて、Antique Oliveにした。

Daily UIを終えた

f:id:haiji505:20181227092026p:plain
最後のお題はRedesign Daily UI Landing Pageだった

再開したDaily UIですが、ついに100日分終えました!

振り返りはnoteの方にまとめました。

無事に年越しできそうです。

Daily UI Challengeを再開した

Daily UIという100日間、毎日デザインのお題がメールで送られてくるサービスがある。DribbbleやTwitterで「dailyui」で検索すると、いろんなデザイナーが参加した記録を見ることができる。

Tradecraftでこれを知った私は去年はじめたのだが、ものの見事に11日目で続けるのをやめてしまった。

続かなかった要因としては、「ただUI作るだけだとつまらんから、アニメの練習したかったしモーションもつけよう!」と思ったことです。

f:id:haiji505:20180911080555g:plain
これに至ってはFramerで作って、実際に計算までできるように実装しはじめてしまった。。何の目的で何を練習したかったのか迷走したケース。

f:id:haiji505:20180911080823g:plain
これも明るさとかちゃんとスライダーでいじれるように実装した。

夫に私の継続性のなさを指摘されて30歳も超えてそういうのはアカンな、、と横に良い意味で厳しい人がいるので、今年中に汚名を返上すべく再開しました。今度は無理に自分から続かなくなるハードルを設けずに淡々とDaily UIしていきます。 8月末から再開して、No 12-23までひとまず終えたので、前回の挫折した記録に並びました。

f:id:haiji505:20180911081158p:plain
記念すべき再開第一号。お題はE-Commerce。

f:id:haiji505:20180911081250g:plain
週末など時間に余裕がある時は動きを付けたり。

でもやっぱりただ架空のUIデザインするだけだとあまり楽しくないので、「こんなのあったらいいな」と自分が欲しいものを考えたり、仕事だと使わないような配色を使うということを心がけています。

f:id:haiji505:20180911081616p:plain

普段ファンシーなデザインとかしないので、楽しい。使いたい色を使ってみた結果ピンク系が多くなった。

Dribbble

出来上がったDaily UIはDribbbleにアップしています。フォローやLikeもらえると励みになります...!

GitHub

Sketchファイルや、Framer、PrincipleなどのファイルもすべてGitHub上にアップしています。 気になる人がいたら参考用にご自由に開いてください。

デザインに関する記事をnoteで書き始めました

数年前に書いたnoteへの記事にいまだにアクセスがよくあります。

たまに日記っぽいものを書いたりしつつも放置していたのですが、デザインに関する記事はnoteに集中して書くことにしました。

深津さんがCXOになってからデザイン系の記事がnoteでも増え、特に若手のデザイナーの人たちが良く見るプラットフォームの1つになってきているからです。

私のnoteはこれ:灰色ハイジのデザインノート

noteに書いたデザインに関する記事

自分のブログが複数あるのも気持ち悪いな、という思いがあるので最終的に統合したりするかもしれませんが、ひとまずデザイン系はnoteに、サンフランシスコでの出来事など雑多なものはこのブログに書こうと思っています。逆に、noteに置いていたデザインに関係ないコラムはこのブログにひっそりと移動しました。元々このブログも更新頻度が高い訳ではないので、まずはどこでもいいからアウトプットを増やしたい。

デザインの話題に興味があって購読してくださっている方は、noteもフォローいただけると嬉しいです。

Foursquare: A UX case study の日本語版

f:id:haiji505:20180312114916j:plain

Tradecraftに入って最初に出た各自がそれぞれやるべき課題のひとつに実際のプロダクトの改善にチャレンジするものがありました。全体の流れは以下のようなもの。

  1. 自分が改善したいと思う、そして誰もが知っているアプリを選ぶ
  2. 問題点を見つけ、その仮説を立てる
  3. ユーザビリティテスト(ゲリラ!)を行い、仮説を検証する
  4. 改善のプロトタイプを作る
  5. プロトタイプを検証するユーザビリティテストを行う
  6. この一連のプロセスをケーススタディとしてまとめる

インストラクターのZacがひとりひとりに対して、丁寧にレビューをしてくれていたのですが、他のプロジェクトが始まり忙しくなったせいもあり、公開するための編集を放置してしまっていました。それをようやくまとめなおし、遂にMediumへ投稿することが出来たのが以下の記事でした。

この記事は、自分のスキル故に英語ではうまく書ききれなかった補足事項、Tradecraftのインストラクターや仲間からのフィードバックなどを書き足した日本語版です。

また、英語どころか日本語のレベルが落ちており、お世辞にも読みやすいとは言えなかった私の下書きを校正してくれた夫 @hmsk に感謝します。


f:id:haiji505:20180302125753p:plain
改善後のFoursquareのiOSデザイン

問題点の仮説

昨年、ポートランドへ旅行に行くにあたってFoursquareを使っていた時に、ふと自分が何気なくデスクトップブラウザで利用していることに気付きました。普段はモバイルアプリも使っているにもかかわらず。そこで旅行の計画を立てるのにモバイル版を使ってみたところ、思っていたよりも使いづらいことに気付きました。近くの場所にあるスポットを探すのには便利なものの、現在地とは異なる街の情報を収集するのに不向きでした。

f:id:haiji505:20180302130443p:plain
Foursquareのデスクトップバージョン

この問題を解消、使い勝手を改善するにあたって、目指すべき方向がビジネスと逸れていてはいけないので、まずFoursquareのコンテンツや使っている言葉などを調べました。すると、App Storeの説明で「旅行の計画」、そして「気に入った場所をリストに追加する」ことを勧めていました。公式ブログの記事を一通り読んでみると旅行ガイドの紹介も積極的に行っていて、私がつまづいた「現在地とは異なる街の情報を収集する」ことは重要なユースケースのようです。

f:id:haiji505:20180302130015p:plain

どうやらこの方向で間違っていないことを確信出来たので、次のステップに進みました。

仮ペルソナ

オンラインでFoursquareのユーザーを調査したり、身の回りのユーザーのことを思い浮かべながら仮ペルソナを作りました。「好奇心が強く、さまざまな新しい場所を探すことが好きな人」と定めました。普段の仕事なら、ペルソナは何人もインタビューを繰り返して作り上げるものですが、このプロジェクト中のプロセスにおいては短期間で仮説検証を繰り返す部分が重要なため、ここにはあまり多くの時間をかけていません。うまい当たりをつけることが大事です。

f:id:haiji505:20180302130554p:plain
レビューでペルソナにおいて、Behaviorsは「旅行好き」ではなく「1年に2週間の旅行に1回行く」など具体的に書くべき、との指摘を受けて修正しました。

ジョブストーリーとシナリオ

ペルソナを元に、「彼らは、何をゴールにしてこのアプリを使うのか?」というストーリーを書きました。ジョブストーリーというフレームワークを用いました。ジョブストーリーについては、日本語だとこの記事が分かりやすいです。

f:id:haiji505:20180302131129p:plain
ジョブストーリー

f:id:haiji505:20180302131151p:plain
シナリオ。3,4コマでユーザーの体験を描く。余談だけど、文章がおかしいよ、って言って同級生がその場で英語を教えてくれました。

ゲリラユーザビリティテスト

f:id:haiji505:20180302131416p:plain
一番大変だったのがこのゲリラインタビューです。不安がっていたら同級生が声をかけるのを手伝ってくれました。英語がネイティブとかそういうレベルじゃなくてインタビューがガチでうまい人だったので、とても助けられました。

f:id:haiji505:20180312120037p:plain

サンフランシスコの町中にある公園に居た人に実際に声をかけて、仮説の検証を行いました。テストを行う前には、「イメージしてください。あなたは旅行を計画していて、どこに行こうかと検討しています。(街でも国でも大丈夫です)」と彼らに伝えていました。

課題では、「2人の知人でテストし、5人の見知らぬ人に声をかけること」と言われていました。効率的にユーザビリティテストを行うには多すぎても無駄が多く、5人が良いそうなのです。おそらく最初の2人の知人は、テスト自体のリハーサルにあたるのでしょう。

テスト用に準備した質問

これに沿ってFoursquareのiPhoneアプリを操作してもらいました。

  1. 旅行先をこのアプリで探すとします。どうしますか?
  2. 気になる場所を見つけたとします。その場所の詳細ページであなたは何を見ますか?
  3. その場所を気に入り、そこへ旅行に行く計画を立てるとしたらあなたは次に何をしますか?

この際、いま何を考えているのか、何故そこをタップしたのか、など思ったことを口に出して言ってもらうようにします。同意を貰って録画や録音をすると後からテストの結果だけでなく、インタビュー自体の振り返りにも役立ちます。インタビュアーとは別の人が撮影を担当するようにして2人組で行うとスムーズです。

つまづきポイントの整理と重み付け

f:id:haiji505:20180302132736p:plain
アフィニティマップ

f:id:haiji505:20180312121711p:plain
四象限マトリクス

録画を見返しながら、ユーザーがつまづいた点をポストイットに書き出し、どこでつまづいたのかをカテゴリーごとに分けて集計しました。そして四象限マトリクスで、ユーザーにとって大事なことビジネスにとって大事なことの二軸で重み付けを行いました。

私が行ったテストでは、現在地より遠いところにある目的地についての検索結果までたどりテストした全員が着くことが出来ませんでした。検索は最も大事な機能のひとつですが、もしも新規のユーザーが欲しい情報にたどり着けなかったら、早々にアプリから離脱してしまうでしょう。ユーザーのつまづきポイントである検索機能の改善にフォーカスをあてることにしました。

また、写真を見る機能でもいくつかつまづきポイントが見られました。彼らは旅行に行く前に現地の高画質な写真を見ることを望んでいて、写真の見せ方についても改善の余地があるように思われました。

タスクフロー

f:id:haiji505:20180312121741p:plain

旅行先をFoursquareで探して決めるまでのプロセスをタスクフローにしました。お店などのレビューのページはFoursquareの肝となるところですが、残念ながらユーザビリティテストではほとんどのユーザーがそのページにたどり着くことが出来ませんでした。

デザイン

スケッチ

見つけた問題に対して解決案のUIを作り込む前に、どういった案が最善かを探るために手書きのスケッチを行いました。

f:id:haiji505:20180312131737p:plain

プロトタイピングと検証

SketchとプロトタイピングツールのMarvelを使ってプロトタイプを制作し、新たに5人に対してユーザビリティテストを行いました。以下は、プロトタイプとそれぞれのテストの結果です。

1 ホームページ

Foursquareは近くの場所を探すのには大変役立ちますが、旅行前に目的地を見つけることは簡単ではありません。参加者はFoursquareによる目的地をおすすめして欲しいと思っていました。

f:id:haiji505:20180312132123p:plain

  1. メインビジュアルをユーザーの現在地に基づいて変更しました
  2. ユーザーは魅力的な目的地を知りたいと思っているので、おすすめの目的地をすすめる特集コーナーを追加しました
  3. FoursquareはListsメニューの中で特集コーナーがあるのですが、新しいユーザーはListsメニューにそれがあると気付きません
    そこで、それらスポットリストの特集をホームページに移動しました
  4. ラベルを「Search」から「Explore」に変えました
    文字通りExploreは新しい場所を探すための言葉で、Searchよりもエモーショナルで新しいホームページにふさわしいと考えました

📝 ユーザビリティテストでは5人中4人がFeatured destinationをタップしました

2 検索フロー

旅行前に目的地を見つけることは、参加者の主なつまづきポイントでした。大きな問題は、街の名前を検索バーに入れた時に、その街の名前の入ったお店が検索結果として返ってきてしまうことです。そこで、ユーザーが都市の名前を入れていた場合には、都市のおすすめスポットを提示してあげることにしました。

f:id:haiji505:20180312132622p:plain

「Near me」と書かれている場所は、地域の名前を入れる場所ですが、最初のテストではほとんどの人が気付きませんでした。そこでタップ出来るエリアであることを分かりやすくするため、色とアイコンを変更しました。

📝 ユーザビリティテストでは5人全員が位置の入力エリアに気付きました

f:id:haiji505:20180312134749p:plain

検索ボックスに文字を入れる前の画面で、人気の都市を提案してみます。

📝 人気の都市を5人中2人がタップしました

f:id:haiji505:20180312134911p:plain

街の名前を検索バーに入れた時に、その街の名前の入ったお店が検索結果として返ってきてしまう問題には、もしも街の名前だった場合にはその都市への検索結果を提案することにしました。

📝 5人中3人が街の名前をメインの検索ボックスに入れた後に表示された「Tokyo」をタップしました

f:id:haiji505:20180312135204p:plain

「Tokyo」の検索結果はすべてのカテゴリーのお店が出てきてしまい、探すのが大変なため、都市名で検索した場合にはカテゴリーリストを表示しました。 また、写真の魅力がより伝わるように、サムネイルのサイズを少し大きくしました。

📝 5人中3人がカテゴリーボタンに興味を持ちました

3 詳細ページ

普段iPhoneを使う人は、シェアボタンとブックマークボタンを見つけることが出来ませんでした。iPhoneユーザーはAndroidのフローティングアクションボタンに親しんでおらず、押した先に「Add to List」ボタンがあることを予期できませんでした。そこで、それらのメインアクションとなるボタンを見える位置へと移動しました。

f:id:haiji505:20180312135652p:plain

📝 5人全員が「Add to List」ボタンを簡単に見つけ、タップしました

新たな場所へユーザを導く

全体的に、改善後のプロトタイプでは参加者たちは旅行の目的地を楽しく探索できたんじゃないかと思います。

現在のFoursquareも便利ですが、ユーザーがアプリに期待するいくつかの機能が欠けているようにも思えます。Facebook Local、Yelpなどのローカル検索の競合が現れる中で、人が世界中のどこに居ても新たな場所を出会えることが出来る、旅へ出ることをサポートする、そんなアプリへと少し進化出来ると良いのではないかと考え、今回のケーススタディを楽しむことが出来ました。

Foursquareのファンとして、いつでもどこでも使いたいです。そしてFoursquareがこれからも新たな場所へと導いてくれると信じています。

感想

この記事を出すまでに何回か改良を加えています。最初にクラスメイトの子によるフィードバック(英語の初歩的なミスや、画像の書き出しサイズなど)、次にインストラクターによる細かなフィードバック、そしてその後ネイティブによる英文チェックの過程で、初めて見た人にも伝わる内容ヘと修正を加えました。そしてこの日本語版では、冒頭にも書いたように夫の校正で日本語の読み物としても分かりやすいものへと改良が加わりました。

インストラクターからのフィードバックの内容

この課題の後に、ベイエリアにあるスタートアップのプロダクト改善をいくつか行ったのですが、ベーシックなこのUXのプロセスが実地の課題に取り組む際にも役立ちました。

プロセスを体験するだけでなく、それを実践に応用する、そして記事としてアウトプットすることで、ようやく学びになるということを学びました。

関連記事