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

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

Cat_Maru
September 01, 2021
210

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

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

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

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

Cat_Maru

September 01, 2021
Tweet

Transcript

  1. BtoB SaaSプロダクト

    デザイン全面リニューアルの裏側

    BtoB決済代行サービス「マネーフォワード ケッサイ」 

    まんまるねこ@Cat_Maru

    #プロダクト篇


    View full-size 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 full-size slide

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


    View full-size slide

  4. 開発組織

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

    View full-size slide

  5. 開発組織

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

    View full-size slide

  6. 開発組織

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

    View full-size 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 full-size slide

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

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

    View full-size slide

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

    ユーザーを考慮したこと

    Topic


    View full-size slide

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


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

    View full-size slide

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

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

     ・業務利用シーンで管理画面をブックマーク保存しているユーザーへの考慮

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

  16. 視認性の改善

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide