Web講演会改修

UI / UX

担当範囲
企画提案 / UI設計 / デザイン
経緯
この案件はmedpeer.jpの全体改修のうちの一つとして立案されました。
メドピアの全体改修は、複数あるサービス同士でもデザインのトンマナが揃っていなかったため、デザインシステムを導入してレイアウトを統一しUI/UX改善とパフォーマンスの向上を目標としたプロジェクトです。サービスの中でも売上の高いWeb講演会の改善を一任されました。
  • 開発中により実際のものとは異なります。
作業内容
現状の問題点を把握(ユーザーからの問い合わせ内容を確認、社内で意見をヒアリング、他社サイトのベンチマーク)と情報整理を行いました。講演会ページは載せる情報が多いため、多忙な医師へも一目で伝わりやすいようにレイアウトを検討しました。
チーム構成
PM1名、アートディレクター 1名、デザイナー 1名、エンジニア 3名
制作期間
(自分が参画してから)2ヶ月程度

Before

Web講演会トップ モバイル版
Web講演会トップ

Web講演会には主に以下のような問題点がありました。

  • 「今何の講演会が見れるのか」がわかりにくい
  • ファーストビューのバナーエリアが大きいため、他の必要な要素がページ上部に入らない(特にスマホビュー時)
  • 講演会数が多い時、カレンダーが縦に長くなる。また操作性が悪く見にくい。
  • メドピアポイント(MedPeerサイト内でポイントを貯めると換金できるシステム)が貰える講演会はどれなのか分からない

After

Web講演会トップWeb講演会トップ
Web講演会トップ

問題点に対して、以下の点を中心に改善提案しました。

  • 「今何の講演会が見れるのか」を分かりやすくするためにLIVEを目立たせる
  • 視聴アンケートの露出を増やすこと(アンケートに回答するとポイントがもらえる仕組みとなっているため、視聴率UPにも貢献する)
  • 週間カレンダーにて先の予定を見ることができる(月間ではなく週間が良いと判断した理由として、多い時で1日5本以上あるためページが長くなることを懸念したため)
  • 配信にはLIVEとオンデマンド(録画したものを一定期間配信)の2種類があり、全てをカレンダーに載せることは難しく、検討した結果タブを採用してカレンダーとリスト型とで見せることになった
  • ポイントが貰える講演会にはポイント数を表示
Web講演会トップ モバイル版
講演会トップ モバイル版

一括予約ボタンはページ内での優先度が高いため、PC / モバイルともにファーストビューに入るように配置しました。モバイルでのカレンダーの見せ方は、PCとは異なりますが見易さと使いやすさを優先しました。

当日のWeb講演会一覧
当日のWeb講演会一覧

日別に講演会が表示されるページです。1日に開催される数が今よりも多くなった時のために提案しました。

カレンダーページ
カレンダーページ

先々の予定が分かるようにと、トップの週間カレンダーからの導線として月間カレンダーを作成しました。

詳細 予約前詳細 予約後視聴前詳細 視聴後
詳細ページ(予約前 / 予約後視聴前 / 視聴後)

詳細ページでは、予約前 ~ 視聴後 とステータスが変わる毎にページ内で必要が要素が変化します。
そのため、重要かつ視聴の動機となる要素はページ上部へ配置しています。

  • 予約するボタン
  • ポイントなどのインセンティブ
  • アンケートへの導線
  • 講演会名、日付、演者の情報など
  • カレンダー登録への導線(視聴促進の狙い)
Web講演会LP PC版Web講演会LP モバイル版
講演会LPの改修

以前使われていたLPは情報が古かったため、改修を提案しました。よりMedPeerの講演会のメリットを伝えている構成としています。

猫
Designed by Curoneco