Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BtoB SaaSプロダクトデザイン全面リニューアで工夫しルたこと #プロダクト篇

Fbca6257ea170fe36741b49c99782892?s=47 Cat_Maru
September 01, 2021
170

BtoB SaaSプロダクトデザイン全面リニューアで工夫しルたこと #プロダクト篇

【LT満員御礼!】UI/UXデザイナーLT会 - vol.4 #uiuxdesignersltで
「マネーフォワード ケッサイ」サービスUIフルリニューアル時に心がけたことをプロダクト視点からお話ししました。

・ただいまバックエンドエンジニア、データエンジニア絶賛募集中です!
https://mfkessai.co.jp/corp/recruit

・サービスづくりをもっと知りたい方は弊社CTO対談記事もぜひご覧ください!
誰もが品質を担保できるチームづくりを。BtoB決済サービス「マネーフォワード ケッサイ」が描く未来
https://autify.com/ja/stories/moneyforwardkessai

Fbca6257ea170fe36741b49c99782892?s=128

Cat_Maru

September 01, 2021
Tweet

Transcript

  1. BtoB SaaSプロダクト
 デザイン全面リニューアルの裏側
 BtoB決済代行サービス「マネーフォワード ケッサイ」 
 まんまるねこ@Cat_Maru
 #プロダクト篇


  2. お名前:まる/まんまるねこ@Cat_Maru 所属:マネーフォワードケッサイ株式会社 プロダクトマネージャー /プロダクトオーナー 2020.12~:無料で見れる500万社企業情報サイト「マネーフォワード 法人ナビ」 https://houjin-navi.mfkessai.co.jp/ 2020.04~:SaaS BtoBプロダクト「マネーフォワード ケッサイ」売り手側改善

    https://mfkessai.co.jp/kessai/top バックグラウンド:制作会社 Webディレクター、事業会社 UIUXデザイナー 自己紹介

  3. 「マネーフォワード ケッサイ」サービスとは?


  4. 開発組織
 「2分で読めるMoney Forward KessaiのPdM」より抜粋 https://speakerdeck.com/mfkessai/2fen-dedu-merumoney-forward-kessaifalsepdm

  5. 開発組織
 「2分で読めるMoney Forward KessaiのPdM」より抜粋 https://speakerdeck.com/mfkessai/2fen-dedu-merumoney-forward-kessaifalsepdm

  6. 開発組織
 「2分で読めるMoney Forward KessaiのPdM」より抜粋 https://speakerdeck.com/mfkessai/2fen-dedu-merumoney-forward-kessaifalsepdm

  7. デザインリニューアルの背景
 MFKのサービス提供から3年たち、売り手へ提供したい未来を再度考え直した カスタマイズしない前提での、他社へMFKサービス提供、業務提携 他社のブランドカラーに合わせてメインカラーのみ変更、 「OOO powered by Money Forward Kessai』で管理画面提供

    実際提供中の例: SEIKYU+ Powered by Money Forward Kessai https://www.muf.bk.mufg.jp/collect/seikyu/ ひろぎん Bill powered by Money Forward Kessai  https://www.hirogin.co.jp/corporation/service/efficiency/recovery/hirogin-bill/ デザイン&開発でコンポーネント作成連携
  8. 新管理画面デザインリニューアル関連イベント
 2020年 〜3月:デザイン作成 3月:開発スタート、デザイン作成(先任デザイナー1人が育休に入り、他に外部のUIUXデザイナー2人Join) 4月末:社内で新管理画面MVPリリース 6月:売り手へ新管理画面周知、社外正式提供開始    他社へMFKサービス提供 11月:社名変更に伴い、サービス名/ロゴ変更、ブランドカラー変更で管理画面の色変更 2021年 1月25日:旧管理画面提供終了

    5月31日:旧管理画面のAPI提供終了 ※スクラム開発
  9. リニューアルにあたって、
 ユーザーを考慮したこと
 Topic


  10. 売り手にお知らせ前に、社内でプロダクト新機能のマスター
 
 お問い合わせが来てもその場で回答できるように、 ・開発時より、新旧管理画面の比較表(変わったテキスト、機能、のリリース機能& リリース予定)をCS、セールスの見えるところに共有周知 ・社内でCS,セールス社員(派遣社員除く)全員にプロダクト勉強会を開く 事前に触ってもらうようにお願いして、当日機能紹介&FAQ

  11. 新管理画面リリース後、十分な切り替え期間(半年間)を設けた
 ・新管理画面を積極的に案内、新から旧管理画面へいつでも切り替えできる  ・旧管理画面ログイン時、ログイン後には新管理画面切り替え案内導線を設置 ・旧管理画面提供終了時期を明確にし、ユーザーへ共有  ・専用LPやお知らせにて告知  ・同一ログインメールアドレス/パスワードでログインすることが可能、旧管理画面から登 録したデータは、引き継き利用可能を明記して利用ハードルを下げる ・旧管理画面提供終了後、旧管理画面へアクセスするとポップアップで新管理画面へ案 内  ・業務利用シーンで管理画面をブックマーク保存しているユーザーへの考慮

  12. 新管理画面リリース後、十分な切り替え期間(半年間)を設けた
 旧管理画面提供終了&新管理画面紹介 LP:https://closev1.mfkessai.co.jp/

  13. ユーザーの声をもとに継続的にUIUX改善
 ・ユーザーの行動を直接見れる計測ツール導入:Hotjar、Posthog 行動観察&仮説立て&検証 ・売り手からの機能要望リストを1か所に集める ・わかりにくい声を集める

  14. 新管理画面に対しての課題の声を元に
 ・全体的に白くて視認性が落ちた ・フォームの枠が薄く細い。字が見づらい。 ・旧管理画面はボタンの色がはっきりしていてわかりやすかった。 ・顧客番号と取引日は縦だと長い。以前の2カラムがよかった。 ・振込一覧画面が縦長になった。旧管理画面は左:振込済(過去) 右:振込 予定(将来) でわかりやすかった。 ・エラーに気づきづらい… …

  15. ユーザーの行動を直接見れる計測ツール導入
 Hotjar、Posthogで行動観察&仮説立て&検証 ※PO祭り2021Spring過去登壇資料より抜粋

  16. 視認性の改善
 Before After 社内からもユーザーからも多くの声から改善に サイドバーカラーの調整、 メインボタンのカラー調整、テキスト使用の調整など

  17. エンジニア、プロダクトマネージャー募集しています!
 https://mfkessai.co.jp/corp/recruit

  18. ご静聴ありがとうございました!
 安心で、世の中をなめらかに。