見出し画像

デザインの「見える化」でサービスリニューアルが捗った話

NAVITIME_Tech

こんにちは、運転ジャンキーです。ナビタイムジャパンで『auカーナビ』アプリのUI/UXデザインを担当しています。
今回は、UIデザイン（以下デザイン）をチームメンバーと共有する方法を改善し、チーム内でデザインについての議論活性化と作業効率アップを実現したことについてお話しします。

なぜデザイン共有方法を変えたのか

デザイン共有方法を変えたきっかけは『auカーナビ』アプリのリニューアルと、新型コロナウィルスの流行でした。
私が所属するチームでは、機能改善の際、初めにデザイナーが機能仕様とデザインの案を作成します。それを基にチームメンバー（PM・エンジニア・QM）と議論しながら「作って壊す」を繰り返し、より良い機能へとブラッシュアップしていきます。
しかし、リニューアルでは複数の機能改善を同時に行う必要があったこと、コロナ禍に入りこれまでは対面で実施していたミーティングの場が減ったことで「作って壊す」サイクルを早く回せなくなっていました。

（ご参考までに）『auカーナビ』リニューアル内容については、こちらの記事をご覧ください。

これまでのデザイン共有方法

これまでのデザイン共有は、

  1. デザインをZeplin（デザイン共有ツール）にアップロード

  2. 共有のためのURLを取得

  3. SlackでチームメンバーへURL共有とミーティングの場を設定

  4. 議論

という流れで行っていました。

既存のデザイン共有手順

一見シンプルに見えますが、この方法では「デザイナーがZeplinのURLを共有するまで、議論を進めることができない」のです。
また、ミーティングを実施するまでにデザインの完成から1営業日ほどの間隔が空くことも多かったため「作って壊す」サイクルを早く回せない原因の1つとなっていました。

Slack連携で共有を自動化

そこで、いつでも議論できるように「デザイナーがZeplinのURLを共有する」部分をZeplinとSlackを連携して自動化してみました。詳細な手順はZeplin公式ページをご参照ください。

Slack連携によって、デザイン共有手順が以下のようになりました。

  1. デザインをZeplinにアップロード

  2. 専用のSlackチャンネルに自動投稿（デザインのサムネイルとZeplin共有URL付き）

  3. 議論

Slack連携で共有を半自動化

実際にSlack連携してみて

アップロードされたデザインをチームメンバーがいち早く確認できるようになり、議論の活性化と作業効率アップが実現できました。具体的な内容を以下に挙げていきます。

1. ミーティングまでの待ち時間を削減できた

デザインで気になった点があればチャンネルのスレッド内でいつでも議論できるようになり、ミーティングの場を設ける機会がほぼ無くなりました。今回のサービスリニューアルでは1機能あたり「作って壊す」サイクルを5回ほど繰り返していたため、概算ですが

  • 5（回のミーティング）*1（営業日の待ち時間）*10（機能）＝50営業日

ほどの時間を削減できました。

2. Zeplinが議事録として機能するようになった

これまでは、デザインについて複数のSlackチャンネルやスレッド内で話すことが多く、会話の見落としや認識齟齬が発生していました。
Zeplinにはデザインに対してコメントできる機能があるのですが、コメントもSlackチャンネルに通知されるようになったことで、Zeplinにコメントを残す文化がチーム内に浸透しました。その結果、デザインの手戻りを格段に減らすことができました。

3.チームメンバーからのデザイン提案が増えた

メンバー全員がデザインを気軽に見られるようになり、フランクにデザイン改善提案やフィードバックを貰えるようになりました。いちデザイナーとして、とてもありがたい出来事でした。デザインを「見える化」することでチームで仕事をするメリットをこれまで以上に享受できるようになったと感じます。

メンバーから提案を受け、会話がそのまま議事録として機能する例

4. チームメンバーの感想

チームメンバーからは、以下のようなフィードバックを得られました。

  • デザインについて質問する場所が明確になり、Slackで別途連絡する手間が減った

  • Zeplin内のコメントも通知されるので、会話しやすい

  • デザインをアップロードした瞬間に通知がくるので、デザイナーに共有される前に自分で気付けるようになった

  • デザインのサムネイルをSlackで確認できるので、どの画面のデザインが更新されたかわかりやすい

まとめ

デザイン共有をSlack連携で自動化し、早い段階からデザインを「見える化」することで議論活性化、作業効率アップを実現でき、無事にサービスリニューアルを終えることができました。
また、チーム開発では細かな進捗共有が大事であることを改めて実感しています。
当社では来年度からUIデザインツールがFigmaに置き換わるため、「見える化」がさらに進みそうです。

当記事が少しでも皆様の参考になれば幸いです。最後までご覧いただきありがとうございました！