PC版Yahoo!メールリニューアル～サービスのUI/UX統合と改善プロセス～ #yjtc

755 Views

February 02, 22

#yjtc #Yahoo!メール #UI/UX #リニューアル #デザイン改善 #アクセシビリティ

スライド概要

2021年9月、PC版Yahoo!メールを10年ぶりにリニューアルしました。技術刷新を機にweb・アプリのUI/UXを統合し、Yahoo! JAPANのサービスとしての一貫性あるデザインにしました。大規模リニューアルの改善ポイントとそのプロセスについてご紹介します。

Yahoo! JAPAN Tech Conference 2022は2022年2月3日、4日に開催しました。
https://techconference.yahoo.co.jp/2022/

アーカイブ動画はこちらからご覧ください。
https://youtu.be/zuE6IysVsNw

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 165.5K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 86.6K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 74.2K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 58.1K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 36K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 29.3K

各ページのテキスト

星野美佳サービス統括本部PIM本部現在はYahoo!メール WebのUI/UXを担当兼務でYahoo! JAPANの新規機能・サービスをリリース前にウォークスルー形式でチェックする「品質管理コミッティ」の運営を担当。趣味はものづくり、漫画・映画・美術鑑賞などよく使うソフトウェアはSketch,Photoshop ©2022 Yahoo Japan Corporation All rights reserved.

従来のYahoo!メールの課題巨⼤サービスであるがゆえの動きづらさ写真：アフロ Yahoo!メールの全ユーザー数は⽉間2400万⼈※と影響範囲が⼤きい上に、 PC版は多機能で複雑な作りになっており、アプリの開発スピードに追いつけない状態になっていました。 ※1か⽉に1回以上「Yahoo!メール」にログインした利⽤者数の年間平均値。 1つのYahoo! JAPAN IDにつき1⼈の利⽤者とした場合（2021年4⽉現在） ©2022 Yahoo Japan Corporation All rights reserved.

従来のYahoo!メールの課題 Yahoo! JAPAN全体のデザインとの乖離写真：アフロまた、Yahoo! JAPANとして新たにVI （Visual Identity）が設定されたあともなかなか追随できておらず、⼀貫性があまりない状態になっていました Yahoo! JAPAN トップページ従来のYahoo!メール ©2022 Yahoo Japan Corporation All rights reserved.

10.

改善を容易にするために技術刷新を実施それを機に、シンプル化とスマートフォンアプリやYahoo! JAPAN全体と体験が揃った新デザインにリニューアルへ

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

リニューアルの進め⽅ 1.調査 – 現状の使われ⽅を把握ログ分析 • 現状の機能の利⽤状況を調査 • ユーザーへの影響度を判断し、要件を設定ユーザーアンケート • 機能の使われ⽅を⼀般の⽅から募集しているヘビーユーザーのコミュニティ「サポーターズクラブ」を対象にアンケートを実施 • 規模感だけでなく、ユーザーにとっての重要度も加味 ©2022 Yahoo Japan Corporation All rights reserved.

22.

リニューアルの進め⽅ 2.設計 – サービスのUI/UX統合と使い勝⼿の維持・向上 • 全デバイスのUI/UX統合 • Yahoo! JAPANの「Visual Identity」「UIガイドライン」への準拠 • 従来のデザインとのギャップ低減（使い勝⼿を変えない） • アクセシビリティの向上 • メールwebアプリとしてのトレンド追随 ©2022 Yahoo Japan Corporation All rights reserved.

23.

24.

リニューアルの進め⽅ 4.テスト – ユーザビリティと機能の両⾯からのテストユーザービリティ検証 • 「サポーターズクラブ」でのオンラインインタビュー形式のテスト • 社内のエキスパートによるウォークスルー • サービスメンバーによるウォークスルー • 別サービスの有志社員によるアドホックテスト機能テスト • テスト漏れを防ぐために、⾃動テスト・スクリーンショットテストを実施 ©2022 Yahoo Japan Corporation All rights reserved.

25.

提供⽅法の⼯夫 5.リリース - 段階的な提供と併⽤期間の設定全ユーザーを8分割し、３ヶ⽉かけて段階的に展開を実施。提供完了後も従来のデザインと併⽤期間を設け、ユーザーにより慣れて使えるようにしています。継続運⽤・新デザインへの切り替え誘導従来のデザイン新しいデザインに統合新デザイン段階的な提供・機能改善 ©2022 Yahoo Japan Corporation All rights reserved. 並⾏期間・機能改善

26.

27.

28.

29.

30.

31.

PC版Yahoo!メールリニューアル ～サービスのUI/UX統合と改善プロセス～ #yjtc