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

   ＃プロダクト篇

   

   View Slide

2. お名前：まる／まんまるねこ@Cat_Maru
   所属：マネーフォワードケッサイ株式会社
   プロダクトマネージャー /プロダクトオーナー
   2020.12~：無料で見れる500万社企業情報サイト「マネーフォワード 法人ナビ」
   https://houjin-navi.mfkessai.co.jp/
   2020.04~：SaaS BtoBプロダクト「マネーフォワード ケッサイ」売り手側改善
   https://mfkessai.co.jp/kessai/top
   バックグラウンド：制作会社
   Webディレクター、事業会社
   UIUXデザイナー
   自己紹介

   

   View Slide

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

   

   View Slide

4. 開発組織

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

   View Slide

5. 開発組織

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

   View Slide

6. 開発組織

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

   View Slide

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/
   デザイン＆開発でコンポーネント作成連携
   

   View Slide

8. 新管理画面デザインリニューアル関連イベント

   2020年
   〜3月：デザイン作成
   3月：開発スタート、デザイン作成（先任デザイナー1人が育休に入り、他に外部のUIUXデザイナー2人Join）
   4月末：社内で新管理画面MVPリリース
   6月：売り手へ新管理画面周知、社外正式提供開始
   　　　他社へMFKサービス提供
   11月：社名変更に伴い、サービス名/ロゴ変更、ブランドカラー変更で管理画面の色変更
   2021年
   1月25日：旧管理画面提供終了
   5月31日：旧管理画面のAPI提供終了
   ※スクラム開発
   

   View Slide

9. リニューアルにあたって、

   ユーザーを考慮したこと

   Topic

   

   View Slide

10. 売り手にお知らせ前に、社内でプロダクト新機能のマスター

    

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

    View Slide

11. 新管理画面リリース後、十分な切り替え期間（半年間）を設けた

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

    View Slide

12. 新管理画面リリース後、十分な切り替え期間（半年間）を設けた

    旧管理画面提供終了＆新管理画面紹介 LP：https://closev1.mfkessai.co.jp/
    

    View Slide

13. ユーザーの声をもとに継続的にUIUX改善

    ・ユーザーの行動を直接見れる計測ツール導入：Hotjar、Posthog
    行動観察＆仮説立て＆検証
    ・売り手からの機能要望リストを１か所に集める
    ・わかりにくい声を集める
    

    View Slide

14. 新管理画面に対しての課題の声を元に

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

    View Slide

15. ユーザーの行動を直接見れる計測ツール導入

    Hotjar、Posthogで行動観察＆仮説立て＆検証
    ※PO祭り2021Spring過去登壇資料より抜粋
    

    View Slide

16. 視認性の改善

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

    View Slide

17. エンジニア、プロダクトマネージャー募集しています！

    https://mfkessai.co.jp/corp/recruit
    

    View Slide

18. ご静聴ありがとうございました！

    安心で、世の中をなめらかに。
    

    View Slide