デザイナー発案で実現した、製品新デザイン化の学び

こんにちは、サイボウズ デザイングループの@kochitakuです。Garoonという中堅・大規模組織向けグループウェアを担当しています。最近クラウド版Garoonのデザインが新しくなったのですが、新デザイン化はデザイナー発案で始まり、いろいろな人を巻き込みチームワークで実現しました。この記事ではその時に得た学びを紹介します。細かいデザイン変更内容については割愛し、汎用性を意識して書きました。読んでいただいた方に1つでもお土産があると嬉しいです。

新デザインについて

PC用Web画面の変更をしました。 デザイン変更イメージ

製品内にユーザーさんからフィードバックをいただけるしくみを用意しまして、「気に入っている」を一番多くいただきました。

  • 気に入っている:563件
  • 不満がある:459件
  • アイデアがある:75件

厳しいご意見も全部確認して改善検討の材料にしています。何より1,000件以上のフィードバックをいただけたことに感謝しています。 フィードバック結果の棒グラフ

一番大きい自社イベントのCybozu Daysでも大きく紹介されました。会場で見ていて胸が熱くなりました。 イベントの写真

新デザイン発案のきっかけ

以前のデザインは5年以上前のもので、社内外の声からもモダン化への必要性を感じていました。サイボウズにはデザイナーが自主的に提案する風土があり、「More Modern活動(通称:MM活動)」と勝手に名乗り活動を始めました。「MM」と言い続けたところ、まわりにもどんどん認知されました。言葉って流行るのですね! 今回の新デザイン化はMM活動の第一弾で、その後も活動は継続しています。

まわりの心を動かす

自主的に活動を始めるのは簡単ですが、ステークホルダーの共感がなければものごとが進みません。サイボウズの場合、最初にPM(プロダクトマネージャー)の心を動かすことが必要です。どのように心を動かし、共感を得たかを紹介します。 まわりの心を動かす図

価値の共感

新デザインの軸を「トレンド(見た目・操作・効果)」「社内他製品との親和性」「アクセシビリティ」として、それぞれの価値を説明しました。ざっくり「モダンにしたい」だけでは説得力が乏しく、価値を探求して軸を決めました。

リスクの共感

やらないことへのリスクを説明しました。時には危機感をあおることも必要だと思います。 また、変えることへのリスクヘッジも非常に大切です。結果として今回は以下のように段階的に広げて、フィードバックを得ながら進めました。社内で実際に利用している製品という利点を活用しています。

  • 社内:開発メンバー

   

  • 社内:幅広い部署のメンバー(限定) 

   

  • 社内:全体

   

  • 社外:お試し用でリリース

   

  • 社外:正式リリース(デフォルトデザイン変更)

過去の経験から旧デザインも選択できる提案もしました。メンテナンスコストも考慮してCSSレベルで旧デザインをある程度保持できる仕様になりました。

コスト情報

PMが工数を判断しやすいよう、できるだけ正確なコスト情報を用意できるのが理想です。デザインの理想を追求すると開発全体のコストがどんどん膨らんでいくので、PGの工数を抑えた「html/CSS/image変更レベル」などレベルを分けた話をしながら詰めて行きました。松・竹・梅のイメージです。

価値の実感

今回はこれが一番ポイントだと思っています。前述のとおりGaroonは社内でも利用していて、社内環境で手軽に新デザインを疑似体験できないか考えました。掘り下げていくとCSS/imageの変更である程度は新デザインを実現できることわかったので、Stylishという自作のCSS/imageを適用できるChrome拡張を使って疑似体験の拡散に成功しました。これにより価値の実感の啓蒙が進み、正式リリースに向けて加速がつきました。

プロトタイプツールやテスト環境でのお試しより、普段の環境での疑似体験はかなり強力です。Stylish上のCSSを外部リンクにしておけば、フィードバック対応もリンク先のCSS変更だけで済むのでオススメです。 Chrome拡張を使ってもらいやすいよう、画面キャプチャ入りのマニュアルも用意しました。途中でつまずくと使ってもらう率が減るので、こういったマニュアルには労力を惜しまない方が良さそうです。

マニュアルの見本
実際のマニュアル
ちなみにサイボウズのデザイングループ内にはChrome拡張を自作する猛者もいます。自作が厳しい場合、PGに相談もオススメします。

専任PMの存在

Garoonは3人のPMがいるのですが、PMに相談して新デザイン化のあらゆる決断ができる専任PMを1人決めてもらいました。デザインの議論は好みに依存するケースもあり、決定スピードが鈍くなる過去の経験からの学びです。多忙なPMの予定調整やオンラインでの返事待ちコストも抑えることもできます。実際、専任PMのスピード感ある判断の連続でスムーズに進みました。

最後に

デザイナーの発案はきっかけにすぎず、たくさんの英断をしたPM、たくさんの画面を実装したPG、テストしたQA、ヘルプのキャプチャを刷新したTC(テクニカルコミュニケーション)、外部発信に尽力したマーケティングメンバー、その他大勢のメンバーやユーザーさんのフィードバック、問い合わせ対応しているサポート…とにかくたくさんのチームワークによって新デザイン化は実現に至りました。本当に良い経験ができました。ありがとうございます。

先月ベトナムでGaroon開発メンバーが集うMeet Upがあったのですが、新デザインのLTをしてきました。夜のKARAOKEは異常に盛り上がりました。。。 Meet Up・カラオケの写真

私事ですが最近は内弁慶を脱すべく社内外のデザイナーイベントにときどき参加していますので、なにか質問があればお声がけください。

関連リンク