Misocaのユーザー体験統一プロジェクトとは?

こんにちは。

デザイナーの@torimizunoです。

最近はリモートの日が増えたこともあり、リングフィットアドベンチャーで運動不足を解消する日々です。

今回は、現在進行形で進んでいる「ユーザー体験統一プロジェクト」について、1年間の歩みについてご紹介します。

まだまだ真っ最中ですが、1年という区切りでどのような取り組みや成果があったのか、お伝えしていきます。

立ち上げ

立ち上げについては、過去入社エントリーで触りだけ、取り上げました。

Misocaはサービスリリースから5年以上経ち、Web・iOS・Androidと3つの手段で提供されています。

長年サービスを運用していく中、プラットフォーム内、OSをまたいでユーザー体験の違いが発生してしまっていました。 f:id:torimizuno:20200310112706p:plain

社内でもデザインの生産性の低下につながったり、実装時に調査と意思決定に負荷が発生しており、「サービスでユーザー体験を一元化することで、社内の意思決定を加速させ、統一されたユーザー体験を提供する。」を目的に、プロジェクトが発足しました。

この時意識したこととしては、プロジェクト名を「デザインシステム」にせず、あえて「ユーザー体験統一」というラベリングにしたことです。

「デザインシステム」はあくまで成果物の手段であり、私たちが実現したいことは「統一されたユーザー体験を提供する」にあります。 関わるメンバーにも同じ意識を持ってもらいたかったので、常に共有時も「ユーザー体験統一」という伝え方をしました。

そのおかげか、このプロジェクトの話があがる時、「ユーザー体験統一」というコンテキストで会話がされたり、遊軍という改善チームでも活発的に統一の軸の改善が行われているように感じています。

どう計画したか

個人の経験談になりますが、過去にデザインシステムを検討〜適用を試みた時、適用まで進めることができなかった経験があります。

その時のふりかえりとして、「大きくやろうとしすぎた」という学びがあります。

今回はその時の学びを活かして、「最小工数でスコープを当て、少しずつ確実に検討・適用していく」方針で進めることにしました。

f:id:torimizuno:20200310121231p:plain

やり方としては、現在課題に感じている項目を洗い出し、それらをひとつずつ解決していくやり方です。

また、Misocaはユーザーが業務で使う道具にあたるサービスです。

道具の使い勝手が使っている途中に予期せぬものに変わってしまうと、ユーザーが業務上困ってしまいます。 その点にも注意を忘れないよう、「基本的には機能の変更はせず、あくまで体験を揃える」を方針としました。

どう進めたか

基本的にはどの項目も下記の手順でスケジュールを立て、実行しました。

  1. 調査
  2. 検討(作成→レビュー→調整を繰り返す)
  3. 定義
  4. 適用準備(レビュー環境に適用→レビュー→調整を繰り返す)
  5. 適用
  6. 共有

まず最初に着手した色を例に、具体例をご紹介します。

1.調査

現在プロダクトで使用されている色一覧を抽出し…

f:id:torimizuno:20200310114258p:plain

分類します(95色使われてたという衝撃の事実が発覚…😱)

f:id:torimizuno:20200310114325p:plain

2.検討

分類した色を、統一して置き換えられるか検討を重ねていきました。

f:id:torimizuno:20200310114410p:plain

3. 定義

そこから意味、命名、使用ルールの定義を固めていきます。

f:id:torimizuno:20200310114426p:plain

4. 適用準備〜5.適用

定義が固まったところでCSSコンポーネント化し、レビュー環境に適用します。

レビュー環境を確認しながら調整を繰り返した後、本番へと適用を進めていきました。

f:id:torimizuno:20200310174826p:plain

6.共有

開始時や合間合間で関係者を巻き込みつつ、適用後定義したデザインシステムが使える状態になったところで全体に共有をします。

f:id:torimizuno:20200310114645p:plain

進めてみて…

順調に進み、色・文字サイズ・アイコンの統一が落ち着いたので、今はボタンやリストなどの各コンポーネントに着手しています。 その後は文言の体験統一を予定しており、そこで一区切りをつけ、運用改善をしていきたいと考えています。

f:id:torimizuno:20200311094018p:plain

もちろんうまくいくことばかりでなく…大きな学びもありました! 学びについては、また別の機会にご紹介できればと思っています。

効果測定について

効果測定についても少し触れたいと思います。

Misoca内では、共通言語でコミュニケーションが円滑になった効果を感じています。

例えばボタンについて会話をする時、「primaryのbtn-sで」など、同じイメージを同じ言葉で伝えあうことができ、齟齬がなくなりました。

f:id:torimizuno:20200310143018p:plain

機能を考える時も、すべてをゼロから考える必要がなくなり、デザインシステムで定義されている箇所については意思決定の速度が早くなったと感じています。

今後は

デザインシステムは作って終わりのものでなく、社内での浸透や運用が重点と考えています。

浸透に関して何で計測できるか?を社内で相談したところ、「適用が進んできたタイミングで各プロジェクトでデザインシステムが利用されているか確認してみるのはどうか?」という助言をもらい、利用具合を調査してみることにしました。

2つのプロジェクトで調査したところ、どちらもデザインシステムの利用が見られ、定性にはなりますが、浸透を感じることができました。 もう少し進んだら、社内メンバーにヒアリングを実施して効果を測っていきます。

まだユーザーにとって体験統一でどのような変化があったかは未測定の領域なので、その点も今後検証していきたいです…!

終わりに

ユーザー体験統一プロジェクトの構築中に、何度か社外でデザインシステムを構築中のデザイナーの方とお話させていただく機会があり、同様の課題を抱えていたり、効果測定の話ができたり、とても刺激になりました。

引き続き気軽にお話できればと思っていますので、現在構築中の方も、これから始めようと考えている方も、お気軽にお話できると嬉しいです…!

twitter.com

Misocaではユーザー体験を一緒につくりあげてくれるデザイナーを募集しています。

recruit.misoca.jp