TECHSCORE BLOG

クラウドCRMを提供するシナジーマーケティングのエンジニアブログです。

Synergy!リターゲティングメールのデザインリニューアルを終えて

2023年8月、Synergy!リターゲティングメール1のデザインをリニューアルしました。
2022年8月から開始した約1年にわたるプロジェクトでしたが、リリース間際にデザインシステム2の適用について反対意見を社内からいただきました。
反対意見それ自体は特に問題ないのですが、そのタイミングがリリース間際であったことが一番の問題だと考えていて、どのタイミングで改善すべきだったのかを振り返ります。

目的

そもそもこのプロジェクトの一番の目的は、フレームワークを刷新し機能の拡張性を担保することでしたが、せっかく作り変えるなら、デザインの課題も一緒に解決しようと考えました。

この時は良い機会なので一緒にやればいいかと軽く考えていましたが、この判断が大きな波紋を呼ぶことになります。
※1つ目の振り返りポイント

プロジェクトのあゆみ

ここからはプロジェクトの進行状況を時系列に紹介していきます。

カンプ作成~コンポーネント作成、画面へ組み込み

2022年8月、デザインシステムを適用する上で、大きな方針を2つ定めました。

  • 既存の仕様を変更しない
  • 既存の画面遷移を踏襲する

これは既存のお客様に対し、大きな混乱を招かないようにするための方針でした。
ただし、明確に既存の仕様に課題がある点は見直すことにしました。

デザイナーがFigmaでカンプを作成し、PdMがレビューする。
エンジニアがStoryook3でコンポーネントを作成し、デザイナーがチェックする。
OKになったものをエンジニアが画面としてアプリケーションに組み込んでいく。
こういう役割分担で、一歩ずつ作業が進んでいきました。

毎日の朝会で日々のタスクや課題を共有し解決しつつ、1週間単位で振り返りを行うことで、少しずつチームが成熟していくのを感じていました。

ユーザビリティテスト

2022年11月、一通りカンプが完成したタイミングで、前提となるデザインシステム自体がユーザーに受け入れられるかを検証するため、Figmaのモックでユーザビリティテストを実施しました。

デザインシステムの適用が一番早く進んでいたリターゲティングメールのデザインを用いて、

  1. 記念日配信の設定
  2. 実績エクスポート
  3. コピーして次の配信設定

という流れを3人の社員にテストしていただきました。

  • サポート担当(Synergy!の機能に詳しい。毎日触る。お客様からのお問い合わせ内容も熟知。)
  • ベテラン営業担当(Synergy!の機能に詳しい。お客様への提案に合わせた検証のため、Synergy!はほぼ毎日操作する。)
  • 若手の開発担当(Synergy!の機能に慣れていない。Synergy!を操作したのは入社時研修のときのみ。)

結果は3名とも多少の違和感はありつつも大きな課題なくテストを完了出来たため、このデザインで進めることに決めました。
※2つ目の振り返りポイント

お披露目会

その後、利用ライブラリに苦戦したり、退職に伴うリーダーの交代などもありましたが、2022年12月には一覧画面から配信設定までを、2023年4月にはレポート画面を開発環境で動作させるお披露目会が開催できました。
お披露目会とは、開発中の機能について事業部長・PO/CTO・TD/MD/SDの皆様に意見をいただく場なのですが、既存機能との差異や変更点などいくつかの質疑応答を経て、デザインに関しては違和感なく受け入れられました。
※3つ目の振り返りポイント

テスト~リリース、デザインシステム説明会

テストフェーズに入り、細かなデザインチェックと仕様確認、修正にチーム全員で取り組んでいき、7月半ばになり、ようやく不具合も収束してきたため、8月リリースの準備を進めました。
ステージング環境でもデザインを確認できるようになり、社内に公開されたタイミングで、デザイン変更に反対の意見をいただきました。
具体的には、以下のような内容でした。

  • 「新規作成」のボタンが画面左側から右側へ移動したことに違和感がある
  • 全体的な色味が薄い
  • 「新規作成」のボタンは緑色という認識があるので、青色に変更されて戸惑う
  • お客様も同じような戸惑いを感じることが予想される
  • お客様からご質問をいただいても、変更の意図が分からないと説明できない
  • 個別にマニュアルを作成されているお客様には変更負担が大きい

具体的な変更点や違和感については、なぜそういう変更を行うのか、という意図を説明することで理解していただくことで軽減・解消すると考えて、その後、直近で行われたリリース説明会でデザイン変更の補足説明をしたうえで、あらためてデザインシステムについての説明会を実施しました。

また個別マニュアルの改修負担については短期的な解決策を見いだせていませんが、根本的にはそもそも使いやすい、分かりやすいUIを提供することでマニュアルを作らなくてもいいようにすることが大事かなと考えています。

振り返り

最初にあげた課題「リリース間際に反対意見をいただいた」について、もっと早くに意見を拾い集めることができれば、丁寧に説明する時間とともに十分に納得感を持っていただけた可能性もあると考えています。

そのチャンスは、大きく3回ありました。

1. プロジェクト開始時点

開発系の社員には、半期ごとのキックオフなどで周知されていましたが、それ以外の社員には積極的に伝えていませんでした。 デザイン変更におけるお客様への影響を考えると、この時点で頭出しを全社に向けて実施しておけばよかったなと考えています。

2. ユーザビリティテスト

テスト自体は問題なく完了したことで、細かな違和感を拾い切れませんでした。 初見の方が持つ違和感(特に既存機能を知っている人ほど強くなる)は、使い慣れていただけば問題なくなることが多いのですが、そのインパクトは人によって大きく変わります。 その違和感への対処として、この時点で、デザインシステムの考え方を社内に共有しておけば、デザイン変更の受け止め方も違ったのではないかと思われます。

3. お披露目会

お披露目会では違和感はないという意見が多かったのですが、参加される方は皆さん普段の業務でSynergy!をあまり利用されない方でした。 逆に、よくSynergy!を利用している方にも公開して、広く意見をいただくことができていれば、リリース直前に反対意見をいただくこともなかったでしょう。

そして、個人的な反省としては、1年間、レビューだテストだと新しいデザインを見続けてきたため、完全に見慣れてしまっていたことで、初めてこのデザインを目にするお客様目線を失ってしまっていたことです。 適切なプロセスを踏んできているという、どこかに油断・慢心もあったんだろうと思います。
一つ一つの変更について、しっかり検討を重ねたうえでの決定なので、そこは自信をもって使いやすいデザインになったと言えるのですが、早めに、丁寧な説明をもって理解していただくことを疎かにした点が残念でした。
今後はそういった点にも気を配りつつ、さらなるSynergy!の進化を目指していきます。


川島 吉久(カワシマ ヨシヒサ)
2004年入社。
Javaプログラマから始まり、SE、プロジェクトマネージャー、テクニカルサポートを経て、現在はSynergy!のプロダクトマネージャー兼プロダクトオーナー。


シナジーマーケティング株式会社では一緒に働く仲間を募集しています。


  1. リターゲティングメールとは、フォーム登録やメールクリックなどのユーザ行動や、繰り返しスケジュール、顧客の記念日などをトリガーにして自動でメール配信する機能です
  2. デザインシステムとは、Synergy!が一貫したデザインを提供できるようにUIパターンを定義したルールです
  3. storybookとは、UIコンポーネントをアプリケーションから独立して開発できるフロントエンド開発用ツールです