Slide 1

Slide 1 text

新人デザイナーが 初めての改修で リサーチをした話 上田 利瑳子 / GMO PEPABO inc. 2022.01.18 Design Study Morning Vol.6 1

Slide 2

Slide 2 text

2 自己紹介 ホスティング事業部 マーケティングチーム 2021年 新卒入社 上田 利瑳子 (uepon) ● アニメ・漫画・温泉・ビール・キャンプ 好き ● 先月、3歳のかわいい息子と誕生日ディズニー ● 人生初LT☺ ● Twitter : @rimmmonga

Slide 3

Slide 3 text

3 主に担当しているサービス ムームードメイン ロリポップ!レンタルサーバー サーバーを使ってウェブサイトやブログが作れるサービス (昨年11月で20周年🎉) 欲しいドメインが簡単に検索・取得できるサービス

Slide 4

Slide 4 text

最初に 4 • デザイナーが小さくリサーチを始めるプロセス • スピーディーにユーザビリティテストを実施するには • 簡易版でもユーザビリティテストを実施することで得られるもの 今回の話から得られるかも?🐯

Slide 5

Slide 5 text

テーマ「改修事例とそのプロセス」ですが 何を改修したの? 5

Slide 6

Slide 6 text

よくあるユーザーさんの希望 6 サーバーを借りてサイトを作りたい! 好きなドメインをとって設定しちゃいたい 🙂

Slide 7

Slide 7 text

従来の仕様 7 サーバーとドメインは別に申し込まないといけない… 運用元は同じなのに、別々になっているの面倒だなぁ 😥

Slide 8

Slide 8 text

現在 8 ロリポでサーバーを申し込む時に、 欲しいドメインも一緒にとれるようになった! 😄

Slide 9

Slide 9 text

ロリポップのサーバー申し込み画面 9

Slide 10

Slide 10 text

10 何を改修したの? 二次リリース 初期リリース 「ムームードメインの新規ユーザー登録が必要で す」既にムームードメインのアカウントを持っている 人にやさしくない仕様 😢 ムームードメインのアカウントを持っている人は、 すぐにID連携して利用できるように 🎉 👆こっちの改修を担当しました! 󰢧(私)

Slide 11

Slide 11 text

施策開始後、やったこと 11

Slide 12

Slide 12 text

改修プロセス 12 施策全体を通じてやったこと • 全体を俯瞰して変更が必要な点の把握と洗い出し • 仕様の把握 • スケジュール立て・工数見積もり • 申し込み画面の改修(UI検討〜実装) 👈 主に話すのはココ! • 入力フォームのUI検討・修正 • メールの変更点洗い出し・修正 • エラー画面の変更点洗い出し・修正

Slide 13

Slide 13 text

改修プロセス 13 「申し込み画面の改修」でやったこと • デスクリサーチ • 競合調査・自社サービス調査 • 要件定義 • 改修のスコープ決め • UIプロトタイプ作成 • レビュー・ヒューリスティック評価 • 簡易ユーザビリティテスト 👈 主に話すのはココ! • ブラッシュアップ・デザインFIX • コーディング(エンジニアさんと分担しつつ実装)

Slide 14

Slide 14 text

改修プロセス 14 最初からユーザビリティテストありきだった? • いやいや、違います! • 「レビューだけじゃ判断しにくいね」という場面に出くわしたから • もしそのままGOしてしまったらこうなる未来が見えた…😇 • せっかく実装しても使ってもらえない機能になる😨 • お問い合わせ頻発・最悪クレームの可能性も😡 • デザイナーの自己満UI爆誕💣 • つまり…途中で「ユーザビリティテストをした方がいい」状況になった!

Slide 15

Slide 15 text

改修プロセス 15 レビューだけじゃ判断しにくかったポイント • エラーメッセージに関する懸念😥 • システム側の事情で複雑なエラーパターンが生じた • 「このエラーメッセージで本当に通じるんだろうか??」 • エラーの状況をうまく伝える・行動を促すのが難しい… • 「ボタンの有り・無し」どっちがいいか判断できない😥

Slide 16

Slide 16 text

サービスをまたいだ仕様による、複雑なエラーパターン 16 👇デザイン案に対するコメント

Slide 17

Slide 17 text

ログインボタンがないことに対する不安 17 👇デザイン案に対するコメント

Slide 18

Slide 18 text

「ユーザビリティテスト やった方がいいね!」 18 そして翌日やることに󰝋💨

Slide 19

Slide 19 text

ちょっと待った! 19 とは言え・・・ユーザビリティテストってそう簡単にできないよね?? • スケジュール大丈夫?リリース間に合う? • すんなり「やりましょう」ってなった? • 関係者の人達に説得できたの?

Slide 20

Slide 20 text

ふり返ってみると・・・ 20 結論:あまり時間をかけずに「簡易版」で実施したのでなんとかなった • 準備〜振り返りまで 6h程度の工数(1営業日以内)で実施できた󰢏 • もともと見積もっていた施策全体の工数の範囲内でおさめることができた • リリーススケジュールを遅らせたりなどせず、関係者に共有する程度で実施できた • 先輩デザイナーが「4h程度でできるね」と見積もってくれた(結果+ 2h)

Slide 21

Slide 21 text

ユーザビリティテストのプロセス 21 ユーザビリティテストの過程でやったこと󰝋 • テスト設計 • 社内リクルーティング • ユーザビリティテスト実施 • 発話思考法を使用 • 分析 • 振り返り • ドキュメントまとめ

Slide 22

Slide 22 text

実際にこんな感じで やりました 22

Slide 23

Slide 23 text

23 テスト設計@Notion

Slide 24

Slide 24 text

24 社内リクルーティング@Slack

Slide 25

Slide 25 text

実施:プロトタイプ 25

Slide 26

Slide 26 text

実施:プロトタイプ 26 連携ボタンの有り・無し 2パターンの各評価を得るため、 1案につき2名ずつ実施(一人1案)

Slide 27

Slide 27 text

結果記述・簡易分析 27

Slide 28

Slide 28 text

どんなことが明らかになった?例 1 28 エラーメッセージを見た後の行動が(想定外のもの含めて)明らかになった • ユーザーは「🤔💭 ムームードメインへのリンクがあるだろう」と想定して、リンクを探す行動をする → リンクが見つからず、困惑した動きを見せる • 内容を読まずに「🤔💭 ID・パスワードの入力ミスエラーか」と想定(誤解)して再入力しようとする( エ ラーメッセージ=入力ミス という先入観があり、そもそも読まれない )→混乱する • 「🤔💭 ムームードメインで個人情報を登録しなきゃいけないなら、今回はやめておこう」 →後から別にムームードメインでドメインを取得しようとする

Slide 29

Slide 29 text

どんなことが明らかになった?例 2 29 成功メッセージの意味が伝わっていなかった • 「下記の注意事項の確認に進んでください。 」の「注 意事項」が何を指すか分からず、どこを見ればよい のか混乱していた人がいた

Slide 30

Slide 30 text

どんなことが明らかになった?例 3 30 連携ボタンの有り・無しはどちらでも問題なさそうだった(確信)

Slide 31

Slide 31 text

“簡易版”でも 多くの判断材料が得られた! 31

Slide 32

Slide 32 text

ちょっと待った! 32 色々やってるけど… • これ本当に1日以内で全部できたの?? • やり方を調べたりドキュメント準備とか大変そう。 • 残業した?!?!

Slide 33

Slide 33 text

ふり返ってみると 33 スピーディーにできた理由は・・・ • 社内リクルーティング(午前)→ 当日午後に参加できる人を募った( 15分程度) • テスト対象者:4名(検証のために最低限必要な人数) • 既にあるテンプレ(先輩たちの知見・ドキュメント)を使いまわした • プロトタイプ準備コストがほぼかからなかった • 機能開発系は普段のレビューからプロトタイプを用意してるので、微調整だけで済んだ

Slide 34

Slide 34 text

「簡易版」って何だろう 34 どこが「簡易版」なの? 今回、簡易にしたポイント • 「5人の評価者で発見できるユーザビリティの問題の検出率は約 84%」(Nielsen and Landauer, 1993) → 4人 • テスト前後の調査協力者への インタビュー実施 → 2〜3分程度 • 発話の録音・書き起こし → その場で記録 • 「UXメトリクス」を用いた 分析方法もある → 今回は使わず https://u-site.jp/usability/evaluation/usability-test より引用

Slide 35

Slide 35 text

リリース後、 結果どうなった? 35

Slide 36

Slide 36 text

改修その後 36 リリース後、数値でも改善が見られた🎉 • そもそも「対象ユーザーは少ないだろう」ということで、 二次リリースに回された範囲の改修だったが … • リリース後、ドメイン同時取得率が 3.4%上昇 🎉(リリース前後の各1ヶ月間で比較) • 対象ユーザーにこの機能を利用してもらえていると言えそう 🕊

Slide 37

Slide 37 text

37 Thank You! Thank You! noteにも違う視点から書いてるのでよかったらぜひ見てください🎉 「新人デザイナーが小さく始めるUXリサーチ」