複雑さを感じさせないデザインを目指した、ecforce maのUIデザインについて

SUPER STUDIOデザイナーの西山です。2023年3月1日にリリースされたCRM効果を最速で高めるEC特化のMAツール「ecforce ma」のUIデザインを担当しました。

私がecforce maのプロジェクトにアサインされた時点では、MVPとなる機能の開発は進んでいましたが、仕様が固まっていない部分も残されている状態でした。そのため、開発背景や仕様のキャッチアップをしながら、より直感的に扱えるUIへとブラッシュアップしていくことになりました。

今回は、ecforce maのUIデザインの過程で意識していた、複雑な仕様をキャッチアップしながら、使いやすいUIに落とし込んでいく工夫をお伝えできればと思います。

ecforce maはEC/D2Cメーカー向けに提供しているCRM効果を最速で高めるEC特化のMAツールです。

ecforce内に既にある顧客データと連携できること、ECに特化したCRMツールであることが特徴であり、複雑なデータ連携の設定をせずとも、すぐに効果的なCRM施策を実行し、効果検証を進められます。

UIをデザインする上で、ECに関する各種データや、「ノーコードでのHTMLメール作成」「セグメントメッセージ配信」「シナリオ配信」「シナリオプリセット」など、ecforce maが提供する機能を深く理解しつつ、複雑さを感じさせない直感的な体験に落とし込んでいくことが求められました。

ここからは、「シナリオ配信機能」を例に、どのようにUIデザインを進めたかをまとめていきます。

シナリオ配信機能は、セグメントやタイミング、配信方法など、複数の条件分岐を組み合わせながらノーコードで直感的にCRM施策を実行するというものです。

EC/D2Cメーカーが抱える様々な課題に応じて、適切なCRM施策を直感的に実施できるため、β版開発時点でも期待の高い機能でしたが、UIをデザインするなかでは、

• セグメントやタイミング、配信方法など様々な条件の理解

• データ設計やAPIの仕様の深い理解

• 複雑さを感じさせない、直感的なUI設計

など考慮すべき点が多くありました。

この状態でUIを作っていったとしても、使いづらく、実装コストが高いものができてしまう可能性があるため、いくつかの視点から適切なUIはどのようなものか探っていきました。

まずはじめに、顧客毎に任意の条件を組み合わせて施策実行までのシナリオを作れる、という機能に対し、適切なUIはどのようなものかチームで検討しました。

• 対象顧客のセグメントという起点と、特定の施策実行という終点がある

• 起点と終点の間では、複数の条件分岐を設定できる

• それらを直感的にアレンジできる

という特徴から、ノードベースのUIが適切だと考え、類似サービスのUIをリサーチしながらリファレンス集としてまとめていきました。

その後、自分でもプロトタイプをいくつか作成しながら、大枠のUIのイメージを固めていきました。

また、シナリオ配信機能でできることを整理したフロー図をつくり、機能要件やUIのイメージについて、PdMやエンジニアにレビューをもらいながら整理していきました。

開発段階であり、まだ仕様が固まっていない部分もあったため、UIを作る上で決めるべきことや確認したいことを適宜レビューをもらっていくことで、より進めやすくなったように思います。

より詳細なデータ設計やAPIの仕様については、実装を担当しているエンジニアに説明をしてもらいながら理解を深めていきました。

UIにおける表層の分かりやすさはもちろん重要ですが、どのような仕組みでシステムが動いているのかを理解できていないと、どこかで全体の構造が破綻してしまうので、キャッチアップができてありがたかったです。

その後、さらにデザインのパターンを作成し、PdMやエンジニアとも議論しながら実装コストも踏まえたUIとしてブラッシュアップしていきました。

また、ecforce maの正式提供開始前には、SUPER STUDIOが運営するD2Cブランドで実際にシステムを利用し、その効果や使いやすさの検証を進めていきました。

(ふつうの)ショップ | (ふつうの)日のための、(ふつうの)お店。

ここに並ぶ製品の基準は、シンプルです。レストランを営む私たち自身が、ふつうの日に、ふつうに使えたら、ふつうに食せたら、嬉しいもの。ふつうの日にこそ、食を楽しむ余白があると思うからです。レストランで向き合うのは、特別な1日だとすると、ここで向き合うのは、ふつうの毎日です。

https://futsuno.shop/

具体的には、LTV改善のための施策や、休眠・未購入者に向けた施策をecforce maのβ版システムを用いて実施した結果、短期間で効果を出せることを確認しています。

また、利用状況を見ながら優先的に改善を進めていくべき点の見極めや、UIの改善をチームで進めていきました。

このように、自社のD2Cブランドでβ版を実際に使ってみたり、素早くフィードバックを得ながらプロダクト改善ができるのは、SUPER STUDIOならではの進め方であり、面白みだと感じています。

このような流れでecforce maのUIデザインを進め、実装フェーズを挟んだ後、2023年3月からEC/D2Cメーカー向けに正式に提供を開始しました。

提供開始後から導入企業も増えており、現在は利用状況を見ながらスクラムでのプロダクト改善を進めています。

私がこのプロジェクトにアサインされた時点で、一部機能の開発や自社D2Cブランドでの検証が進んでいる状態であったため、UIデザインが貢献できる点は「いかに分かりやすく、直感的に扱えるようにできるか」だったと思います。

そのなかで、EC/D2Cメーカーの業務フローや、CRM施策を実施するまでの流れ、ecforce maにおけるデータ設計やAPI連携などをしっかりキャッチアップし、自分で噛み砕いてみたり、PdMやエンジニアに適宜レビューをもらいながらデザインを進めていくことが重要だと感じました。

プロダクトのリリースを経て、ecforce maを使ってくださっている方にインタビューをしながら今後開発する機能の検証を進めたりと、リサーチ面にも力を入れています。

これからもecforce maをより良いサービスにできるようなデザインに取り組んでいきたいと思いますので、今後にご期待ください。