GENIEE TechBlog
☀️

業務システムのフロントリニューアルで重視していること

に公開

はじめに

こんにちは。営業管理ツールGENIEE SFA/CRMのプロダクトデザインを担当しています、SAです。

GENIEE SFA/CRMは営業業務の効率化と生産性の向上を支援するツールです。
私たちプロダクトデザイナーは、優れたUIUXデザインを提供するために以下の3つの指針を設定しています。

  1. 画面遷移を少なくすること
  2. 一覧性を高めること
  3. 直感的な操作が可能なUI

これらの実現による生産性と効率化を目指し、日々邁進しています。
業務システムにおけるUI改善について、私たちがどんな事を考えて設計しているかは、是非下記記事もご覧ください!
https://zenn.dev/geniee/articles/7b4d65649b2e56

業務システムのフロントリニューアルへの挑戦

今回書かせていただくテーマは「業務システムのフロントリニューアルで重視していること」です。
GENIEE SFA/CRMは数年前からフロントリニューアルをミッションのひとつに掲げています。これは単なる見た目の刷新ではなく、ユーザー体験を再構築するプロジェクトです。

❓何故リニューアルが必要なのか

前述の通り「営業業務の効率化と生産性の向上を最大化」するためです。
リニューアル前は、必要な情報が同じ画面で確認できず、操作ボタンが遠かったり、機能追加の度に操作ボタンが画面に増えていき複雑になっていたりと、優れたUIUXのプロダクトとは言えませんでした。
ユーザー体験に与える影響がマイナスになっている現状ままに、業務の効率化と生産性の向上を支援するツールは名乗れません。これから機能も規模も成長していくプロダクトだからこそ、フロントリニューアルが必要だったのです。

リニューアル実例

ここからは、フロントリニューアルを実施した画面何点かをピックアップし、課題点と改善点を一部公開したいと思います。

グローバルナビゲーション

☁️Before


課題点

  1. 設定メニューが作業単位で並んでおりバラバラ。
  2. ナビゲーションの並び順が固定。ユーザーが自由に作成できるオブジェクトは、ナビゲーションに並べられずプルダウンにまとまっていた。オブジェクトアイコンも固定のため、オブジェクトの差別化がテキストを読み込むことでしか出来なかった。

☀️After


改善点

  1. 組織や機能など「操作する対象」を単位として再設計。煩雑で探しにくかった動線を改修。
  2. ユーザーがオブジェクトを好きな並びに変更できるようになり、よく使うオブジェクト移動の時間が短縮されるよう改修。ユーザー作成のオブジェクトのアイコンも変更可能に。

業務フローは、どんな組織も必ずこのフローで業務を進めるというものはなく、組織ごとに正解が違います。そのため、カスタマイズ性を持たせることも業務システムとして重視するポイントのひとつでした。

詳細画面

☁️Before


課題点

  1. 情報がすべて縦積みで配置。特定箇所へのショートカットはなく、ひたすらスクロールするしかなかった。
  2. 今いる詳細レコードの親や孫にあたるレコードを、同じ画面上で確認する事ができなかった。

☀️After


改善点

  1. 基本情報や関連など分類でタブ分け。特定箇所へすぐに移動できるアンカーリンクも用意し、見たいものに集中でき、欲しい情報へ辿り着く時間が短縮されるよう改修。
  2. 今見ているレコードを子とし、そのレコードの親と孫にあたるレコードを同画面で表示・編集できるように改修。

詳細画面では、その画面でどれだけ速く・多く欲しい情報を得られるかが重視されるため、一覧性を高めることが大切でした。
蓄積された情報から検索する作業を減らし先回って情報を提供する、自動で次のアクションを提案するなど、自動化も重視すべきポイントになっています。

一覧画面

☁️Before


課題点
1.担当者や対象期間に絞ったレコードなどを自由にリスト化ができるが、表示はひとつのみ。ユーザーインタビューでは、見たいリストを複数ブックマークしておくという運用をするユーザーもいた。
2. 一覧からタスクや活動履歴の関連付けは可能だが、ファイルの添付はできず、既に添付されたファイルの確認も詳細に入らないとできない。

☀️After


改善点

  1. リストをタブ化し並べることで、見たいリストの切り替えから表示までの時間を短縮。
  2. ファイルの添付が可能になり、詳細に遷移せずファイルの詳細も確認できるように改修。タスクなどの関連付け動線も短縮し、一覧画面から移動せず業務を推進できるように。

詳細画面で工夫した点だけでなく、一覧画面では一覧から遷移せずに業務を推進できることも重視しました。管理者や営業担当者など、役職ごとにその画面でどこまでの業務をしたいのかは変わってきます。それぞれにフィットするやり方を提供することで、効率化の実現を目指しました。
一覧ならではの、複数のレコードに対し一括操作ができる改修も絶賛対応中です。

まとめ

私たちプロダクトデザイナーは、PdMが作成した要件定義を元にUIを作るだけではなく、一緒に要件を揉んで必要なタスクを見つけ出し、必ず情報設計を挟んでいます。
3つのフロントリニューアル画面を紹介しましたが、どれも課題点と改善点はほんの一部にすぎません。まだリリースしていない実装中の部分は沢山あります。

リリースしてから時間が経ち、フロントリニューアルした画面についてユーザーの声も集まってきました。
必要な情報を見つけやすくなったという声もある中、ハッとさせてくれる改善を求める声もあります。
貴重なフィードバックを元に、リニューアルした画面もさらに改善をしていく予定です。

業務システムは複雑で難しいことが沢山ありますが、それに伴いやりがいもあります。
プロダクトデザイナーとして、これからもプロダクトと一緒に成長していきたいと思います。

GENIEE TechBlog
GENIEE TechBlog

Discussion