20241204_UI/UXデザイナーLT会 - vol.10_DMM

ユーザービリティテストを活用したUI改善について
具体的なプロジェクト立ち上げの詳細はnote(https://note.com/dmm_team_alpha/n/nf68ee7d90706)をご覧ください。
この資料ではは、特に大きな会社で『ユーザービリティテスト』がなぜ重要なのか、そしてその結果どのような成果を得たのかに焦点を当ててレポートしています。

Transcript

1. © DMM.com 60事業以上の使いやすいUIを作る私たちの改善 2024/12/4 UI/UXデザイナーLT会 - vol.10 合同会社DMM.com アルファ室 石田素子
2. © DMM.com 目次 2 1. 自己紹介 2. 背景と目的 3. ユーザービリティテストの必要性 4. UI改善と共通機能の最適化 5. 成果と課題 6. さいごに
3. © DMM.com 1.自己紹介 毎年誕生日はお寿司を食べています🍣 @銀座おのでら なまえ：石田素子 出身地：神奈川県横浜市のはじっこ 職歴：化粧品会社の百貨店事業部で化粧品を販売していたのが原 体験で、その後ずっとtoC向けのサービスやプロダクトの企画に携 わってます。 voyage group(7年) →ぐるなび(8年)→auコマース＆ライフ(3年) UXデザイン組織導入や専門部署の立ち上げを経験 →現在 DMMのアルファ室でプロダクトマネージャー /プランナーをしてい ます。
4. © DMM.com 本日のテーマ 60以上の事業を展開するDMMの 会員登録・ログイン画面のUI改善について
5. © DMM.com 背景と目的 • 数年進化できていない UI • 各事業が手が出しにくい共通画面 わたしが所属するアルファ室は、横断組織です。これは立ち上がるしかないと考えました。 新しく利用を開始したいユーザーや、再訪問時のスムーズなログインに向けて UI改善することで、事業に貢献していきたい。それが目的です。
6. © DMM.com ユーザービリティテストの必要性 とはいえ、1サービスの会員登録やログインを改善するわけではない。 立ちはだかるのは、具体的な改善内容の合意です。誰のために改善し開発するかといえば ユーザーのためです。 （しいては事業のため）ここを根拠として進めようという考えです。 取り入れたのが、HCDサイクルです。 利用状況の把握と明示 ユーザーと組織の 要求事項の明示 設計による解決案 の作成 要求事項に対する 設計の評価 要求事項の合意 実装へ 調査 分析 設計 評価
7. © DMM.com ユーザービリティテストの必要性 そうだ、社内でやってみよう。 5,000人近い社員数の会社なのでできる気がしました。 • 全体のslackチャンネルで協力者を募りました • 入社の浅い方に声をかけました • プロトタイプは、デザイナーに協力してもらい figmaを用いて実施しました • 現UIと新UIと他社サービスの登録操作を調査。 • 予行練習もしました が、しかし、ユーザービリティテストを実行する予算や体制（外注契約）がない状況でした。これまでの 経験では、ありがたいことに予算と体制がありました。ただここで諦めるわけにはいきません。 準備含めて２週間程度で完了しました、テストそのものは1日2時間ほどを3日間に渡って実施という 感じです。
8. © DMM.com UI改善と共通機能の最適化 ⚪テストから得られたこと ・複数の登録手段にポジティブな印象を持つ ・この後の画面でメアドとパスワードの入力は１画面で まとめたほうが操作がスムーズ ・サービスによっては、SNS登録への抵抗感を感じる ケースあり。 ⚪改善ポイント ・文字の大きさを大きく ・説明文を改善 ・登録手段は並列に見せる ・ログイン画面へ移動しやすいUIに ・背景画像や登録手段は、サービス毎にカスタマイズで きる仕様を導入
9. © DMM.com UI改善と共通機能の最適化 ⚪テストから得られたこと ・ログイン手段は2列表示が理解しやすい ・迷いがない ・前回利用したログイン手段を忘れがち ⚪改善ポイント ・前回利用したログインを表示する ・全体的に文字の大きさを改善 ・複数あるログイン手段は2列表示に。 ・ログイン手段の並び順はサービス毎にカスタマイズで きる仕様を導入
10. © DMM.com 成果と課題 成果 • 社内での合意形成時にユーザービリティ テストの結果を用いたことによって、ス ムーズに行えた • テスト設計やテスト実施の実行によるスキ ルを身につけられた • 設計時に悩んでいたUIの改善方法が見つ かった • リリース後、会員登録数が増加した 課題 • 複数サービスにおいてカスタマイズできる 仕組みをどう活用していくか。 • サービス毎での背景設定 • 登録手段の並び順など • リリース後のA/Bテストによる定量調査の 実施 • ユーザービリティテストの組織浸透 • ナレッジの共有やフローの導入 改善は1回で終わりではないので、繰り返しどうやっていくかを考えて動いています。
11. © DMM.com さいごに アルファ室では、一緒に働く仲間を募集しています！ 興味を少しでもお持ちになられたら気軽にお話ししてみませんか。 アルファ室では、60事業以上を展開する DMMにおいて、 ユーザーの声を元にした改善を企画・開発することに挑戦ができます。 ＼カジュアル面談ぜひ／ ＼PdM職募集しています／ ＼noteフォローお願いします！／ 後日、本資料をアップ予定です 😊