Customer.io、バリアブルとDev Modeを活用してデザインのハンドオフを簡素化

読了時間: 4分

概要: マーケティング技術(MarTech)の世界では、機能性が常に主要な焦点となっています。Customer.ioは、異なるアプローチで業界を変革しました。製品を顧客のために作成する際の指針となるのは、デザインとユーザーエクスペリエンスです。2012年に設立された同社は、Notion、Clearbit、IMAXといった主要ブランドの自動メッセージングキャンペーンを支えるまでに成長しました。

Figmaのビジネスプランの一環として、Customer.ioはバリアブルとDev Modeを活用してデザインと開発のハンドアウトを改善し、チームがより迅速に作業を進められるようにしました。

課題: 分断されたコンポーネントライブラリがデザインと開発の摩擦を生む

Customer.ioはFigmaをしばらく使用していましたが、デザインシステムのガバナンス不足とアドホックなコンポーネントが業務に影響を及ぼし始めるという転換点に差し掛かりました。Customer.ioのシニアディレクター兼プロダクトデザイン責任者を務めるAiden Bordner氏は次のように説明します。「Figmaで全コンポーネントに基準となる表現がある、という状況ではなくなっていました。仕様がデザインシステムの意図にうまく結びつかないせいで、デザインと開発の間に一貫したつながりが持てなかったからです」。

この断絶が、ローンチした作業全体にわたって逸脱を生み出しました。ボタンのボーダーが間違っている、ディバイダーが暗すぎる、数ピクセルずれているなど、最初に感じた影響は些細なことばかりでした。ですが、こうしたデザイン開発の不一致はすぐに重大な負担となり、ユーザーエクスペリエンスにも一貫性がなくなりました。

「このようなエラーを確認すると、QAの誰かがエラーをタグ付けし、チケットが作成され、その後フロントエンドを再構築しなければなりません。問題の修正にかかる時間と切り替えコストは、顧客に提供する新機能の構築に、実際の影響を与えます」と、Bordner氏は語ります。

不確実なワークフローとチーム間の摩擦が高まる中、Bordner氏はこれらの見落としがユーザーエクスペリエンスに大規模な影響を及ぼす前に変更を加える必要があると感じていました。

解決策: バリアブルとDev Modeを活用

Customer.ioは、デザインシステムをアップデートし始めた際に、Figmaの最新機能を採用しました。「スタートの合図はConfig 2023でした。Dev Modeとバリアブルがリリースされて、これこそ私が待ち望んでいたツールだと思いました」と、Bordner氏は言いました。プロダクトデザインチームは、Figmaで色、間隔、フォントサイズ、ボーダー半径、タイポグラフィスタイルをサポートするためのバリアブルを設定しました。これで、開発者はガターや正しい色コードの正確なピクセル数を推測する必要がなくなりました。

バリアブルを使用することで、チームはデザインプロパティをゼロから標準化できるようになりました。「開発者はデザインの解釈を自分で行う必要がありません。仕様の60〜70%が目の前にある状態なら、モックを実装に落とし込むのが新しい開発者にも楽になります」と、Bordner氏は述べています。統一されたフレームワークが整備されたことで、開発者はエラーの減少を実感し、プロセスをより迅速に進めることができるようになりました。

さらに、Dev Modeの採用はCustomer.ioのワークフローに大きな変化をもたらしました。Bordner氏は次のように述べています。「構築するものを見極めるのは多くの作業が必要かもしれませんが、Dev Modeを使用することで、デザイナーが特定のセクションをハイライトできるアノテーションにより、開発者はすぐに作業に取りかかることができます」。

影響: デザインと開発チームが効率の新たな基準を確立

刷新されたデザイン開発のハンドオフは、チームの生産性に多大な効果をもたらしました。デザインファイルに注釈がつけられるようになり、開発者は簡単に検査し、基礎となる構造を理解し、すぐに実装を開始できます。

このスピード向上の効果は、デザインチームにも巡ってきています。Customer.ioのブランドスタジオ責任者を務めるRennie Abraham氏は、次のように述べています。「デザイナーは成長マインドセットを身に着けつつあります。反復し、テストし、調整できるようになりました。2、3本の大型ランディングページに6か月費やし、それがビジネス目標に合致するか分からないままでいるのではなく。Figmaが提供するようなコラボレーションとイノベーションの精神を実現できる場所は、そう多くありません」。

バリアブルとDev Modeを活用することにより、Customer.ioのチームは内部プロセスを改善しただけでなく、MarTech業界のデザイン駆動リーダーとしての位置づけも確立しました。デザイナーは、ファイルをReady for devとマークすることで、細かい修正や変更の追跡を容易にし、開発チームと協力して提供する成果物の完成度を高めています。このレベルの洗練さを追求する企業の姿勢により、そのユーザーは製品が顧客コミュニケーションを変革できると確信を持つことができます。

「当社は、消費者向けレベルのUXおよびUIの洗練を顧客に提供することに焦点を絞っています。これはデザインとエンジニアリングの環境を接続する上での基盤であり、競争優位性を与える要素でもあります」と、Bordner氏は言います。

Customer.ioは、チームがデザインから開発へのハンドオフを合理化した際のポジティブな結果を示す好例です。最終的な結果は効率性を促し、ユーザーエクスペリエンスを向上させるだけでなく、創造的なイノベーションの新しい機会を生み出します。この協力的なアプローチを通じて、チームは今後も、インサイトに満ちたデータでユーザーの顧客エンゲージメントを支援する、デザイン中心のソリューションを構築し続けます。