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

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

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

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

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 行動観察＆仮説立て＆検証 ・売り手からの機能要望リストを１か所に集める ・わかりにくい声を集める
14. 新管理画面に対しての課題の声を元に
 ・全体的に白くて視認性が落ちた ・フォームの枠が薄く細い。字が見づらい。 ・旧管理画面はボタンの色がはっきりしていてわかりやすかった。 ・顧客番号と取引日は縦だと長い。以前の2カラムがよかった。 ・振込一覧画面が縦長になった。旧管理画面は左：振込済(過去)　右：振込 予定(将来)　でわかりやすかった。 ・エラーに気づきづらい… …
15. ユーザーの行動を直接見れる計測ツール導入
 Hotjar、Posthogで行動観察＆仮説立て＆検証 ※PO祭り2021Spring過去登壇資料より抜粋
16. 視認性の改善
 Before After 社内からもユーザーからも多くの声から改善に サイドバーカラーの調整、 メインボタンのカラー調整、テキスト使用の調整など
17. エンジニア、プロダクトマネージャー募集しています！
 https://mfkessai.co.jp/corp/recruit
18. ご静聴ありがとうございました！
 安心で、世の中をなめらかに。