花王   「My Kao Mall」商品登録用システムUI改善による業務フロー統合支援

花王株式会社様（以下、花王）は、自社サイトに商品の掲載登録を行うための独自システムを導入されています。コンセントでは、2022年のECサイト「My Kao Mall」立ち上げに合わせてシステム改修とUI改善を支援。ステークホルダーとの検討を重ね、実際の業務での使いやすさを追求したUIの開発を通して、部署間で分断されていた業務フローの統合に貢献しました。

※ 本プロジェクトは伊藤忠テクノソリューションズ株式会社（バックエンド開発／サーバー／インフラ担当。以下、CTC）、アドビ株式会社（AEMテクニカルコンサルティング）と協業で行っています。

花王では2021年の製品カタログサイトリニューアルに合わせて、業務フローの改善が実施されました。コンセントは商品登録業務システムのUI開発を担当しました。

しかしその段階では製品カタログが2系統に分かれており、その間で業務フローが異なっているという課題が残っていました。そこで2022年のECサイト「My Kao Mall」立ち上げに合わせて、商品登録業務システムとそのUIを改修。それにより、業務フローの統合・整理を目指しました。

まず、既存のシステム・業務フローについてステークホルダーへヒアリングを行い、追加すべき機能と改修範囲を検討しました。

既存の業務フローならびにそこに追加される概念を整理。新たな業務フローとUI上で取り扱うべき項目について認識をそろえた。

次に具体的なUIや改修後のワークフローの検討に入りました。ここで強く意識したのは、実際の業務に寄り添ったUIにすることです。まず、あるべき形を短期間で模索するため、デザインイメージやモックといった具体的なUI案を先行して作成。それらに対し、実装担当のCTCからは開発目線でのフィードバックを、ユーザーとなる花王からは「本当に業務において使いやすいUIか？」という観点でのフィードバックを細かに回収しました。

その後、フィードバックを要件に反映し、再度UIとしてビジュアライズ。それに対するフィードバックを回収してさらにUIを改善……その一連の流れを毎週の定例ミーティングで繰り返すことで、実際の業務に即した要件とデザインをスピーディーに検討していきました。

システム上の固有の概念である「ラインナップ」と「バリエーション」の使い分けをわかりやすく伝えるために、グラフィカルなUIを採用しています。
ラインナップとバリエーションは、どちらも類似の商品同士の関係性を表す言葉です。この2つの使い分けについては本プロジェクト内で検討し、最終的に以下の定義に則って運用されることになりました。

しかし、文章による説明のみでは上記の使い分けの理解と直感的な操作が難しいと判断し、UIを通した意味の伝達を試みました。

商品を登録する際、ラインナップ・バリエーションを指定する箇所。理解が難しい概念だからこそ、視覚的にその意味を伝えることを目指した。

ビジュアルを用いたイメージしやすい選択肢を設けることで、業務固有の概念を扱う際にも直感的な操作が可能となりました。