クラウドサインのデザイン組織は、ブランドデザインチームとプロダクトデザインチームに分かれています。

クラウドサインのデザイン組織は、プロダクトデザインチームとブランドデザインチームに分かれている

プロダクトデザインチームでは、クラウドサインというプロダクトをシンプルな体験にし続けることで、プロダクト体験からブランドとしての印象をつくることに取り組んでいます。

本記事は、クラウドサインでのプロダクトデザインの考え方や、プロダクトの体験を通じてブランド印象を形成するための具体的な取り組みについてまとめています。

プロダクトデザインチームは、業務委託を含めて十数名のデザイナーで構成されています。

半年ほどの周期で、クラウドサインのプロダクトに関するプロジェクトにそれぞれがアサインされ、要件の掘り下げやリサーチ、UIデザイン、フロントの実装など幅広く活動しています。

クラウドサインのプロダクトデザインチームの体制と役割について

そんなプロダクトデザインチームでは、クラウドサインらしさを、プロダクトの体験からつくることを重視しています。

クラウドサインが取り扱う契約業務というものは、非常に面倒なプロセスというのが大半の方の認識です。

そのため、クラウドサインが愛されるためには、とにかくシンプルな体験を提供することが大切です。

例えば、他のツールですでに行われていることは他のツールに任せるべきで、MVPとして最小限のシンプルな体験にとどめることを常に意識しています。

クラウドサイン立ち上げ時の社内資料。ただでさえ契約業務は複雑なので、他ツールとのリプレースコストは最小限に抑えるように、クラウドサインはシンプルな体験にとどめている。

前回の事例でお伝えしたブランドブックの中にも、「100年続いた紙と押印に変わる、新しい社会インフラ」という第一想起を取ることが重要とされています。

ブランドブックより引用。ブランドの核となるアイデンティティとして、「100年続いた紙と押印に変わる、新しい社会インフラ」という第一想起を取ることが重要とされている

ブランドデザインチームは表現としてそれらを伝えますが、プロダクトデザインチームは、第一想起になるような体験をUIで体現していくことを求められています。

それは、大規模な機能開発だけでなく、ユーザーのことを理解しているからこそできる細かな機能開発でも常に意識されています。

具体的な取り組みの例として、2022年5月から12月にかけて、プロダクトデザインチームで、ブランドリニューアル後に変更したブランドカラーをプロダクトに適用させるディレクションを行いました。

背景

実はクラウドサインの色はサービスのターゲットの変遷に合わせて少しずつ変更されています。一方で、プロダクト内のカラーは、サービス開始当初から変わっておらず、2022年12月下旬まではチグハグな状態になってしまっていました。

ターゲットの変遷に合わせて、少しずつカラーが変更されていった
一方で、当時のサービスサイトには過去のカラーのままの箇所も多くあった

ただ一部を変更すれば良いだけでないため範囲が膨大で誰も整理ができず、さらに大規模な開発が進行する中で優先度が下がってしまい、最初のカラー変更から約2年ほど、ずっと着手されていない状況がありました。

そこから2021年ごろ、ブランドブックができたこともあり、サービスサイトやTVCMなどのプロダクト外の体験では新カラーが反映されていきました。サービス内のUIだけカラーが適用されていないことで、ユーザーの印象が統一されないことを危惧して、プロダクトデザインチームが責任を持ってカラーを一新させることになります。

プロダクト内の体験だけでなく、主に作業に関わるデザインチームのメンバーに向けてもアクションがシンプルになるように進めていきました。

まずは、調整が必要なヘッダーやボタンについていくつか検証を行いつつ、各種色の定義などを行っていき、主要画面の配色に問題がないかについてもプロトタイプで確認しておきます。

ヘッダーの検討の様子。ヘッダーやボタンなどコンポーネントごとに検証

主要画面に当てはめてみて検証

その上で、すべてのコードを目視で確認しながら、コードを修正する必要があるところも網羅的に洗い出してまとめていきました。修正対象となるファイルは100を超えており、一つ一つの使用箇所を調べるだけでも多くの時間を費やしました。

コード単位で修正が必要な箇所をすべて洗い出して、スプレッドシートにまとめる

そして、プロダクト内のカラーをすべて変更するに至ります。

また、今後もプロダクトで使われるカラーがブレないように、デザイナー以外の開発メンバーにカラーに対する浸透を行いました。例えば、開発共有会でクイズ形式でカラーについてインプットを行っています。

今後もプロダクト内のカラーが統一されるよう、開発部門の全体MTGで新しいカラーに対する浸透のためのクイズを行った

結果として、開発メンバーの負荷が少ない形で変更を行うことができました。今では、開発メンバーがカラーコードのSlackスタンプを自分でつくっているなど、暗唱できるほど浸透しています。

Slackにカラーコードのスタンプがつくられるなど、しっかり浸透している

また、プロダクト上でのエラーメッセージの出し分けをプロダクトデザインチームとして行いました。

汎用的なエラー(ネットワークエラーとか、障害など)を伝えるテキストが、画面によってバラバラだったことから、プロジェクトが始まります。

エラーとして起こっていることは同じでも、ユーザーに対する表現が違っていたため、統一的な体験を提供できていませんでした。

「この画面ではネクストアクションがあるのに、こっちでは出ていない」などメッセージの表現が違うことで、ユーザーを混乱させてしまうと、結果的にプロダクトに対する信頼もなくなってしまうと考え、早急に解決に取り組みます。

解決策として、エラーメッセージのパターンを切り分けながら、メッセージの出し分け構造を設計していきました。

これまではエンジニアが都度考えていたところを、このように整理することで工数も削減することができ、ユーザー・開発者双方に良い改善となりました。

エラーメッセージの構造を整理し、エラーメッセージを統一していく

ちなみに、メッセージ制作時には「誠実な姿勢」「自信があり堂々としている」「ユーザー目線で情報を取捨選択」「短い文章で端的に表現する」などの観点を踏まえており、これはトーンオブボイスの内容とも相関させています。

クラウドサインのトーンオブボイスをもとに、メッセージを制作することで一貫した印象をユーザーに持ってもらえるようにした

クラウドサインでは、どんな立場の人もブランドをつくるためのアウトプットに関わっているということを伝えています。

クラウドサインのブランドブックより
お客様にどう認知してもらいたいか、を考え、全職種で動いてアウトプットすることでブランドがつくられる

例に漏れず、プロダクトデザインチームも、ブランドを守り育てるために、プロダクト内の体験をアップデートし続けています。

クラウドサインが持つ挑戦者という姿勢と、次のスタンダードとしての王道さを、シンプルなプロダクト体験によって印象づけていくことを、今後も続けていきます。

このデザイン組織をもっと知る

クラウドサイン