デザイナーとエンジニアと銀行員
こんにちは、JDDの久野です。
三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（以下JDD）でExperience Design Div.に所属し、体験設計におけるデザインチームのプロジェクトマネジメント、品質管理を担当しています。
今回は、わたしたちJapan Digital Designのデザインチームが他の部門とどのように協業してサービス開発しているかについてご紹介します。
紹介するプロジェクト
2023年7月19日に、三菱UFJ銀行から「そうぞくガイド」というサービスがリリースされました。
そうぞくガイドのサービスの開発支援をJDDで行わせていただいたので、今回はこのプロジェクトを題材に、デザイナーとエンジニアの協業についてデザイナー目線で紹介させていただければと思います。
加えて、クライアントである銀行とJDDとの協業における効果についても軽く触れられればと思います。
デザイナーとエンジニアの業務改善のポイント
はじめに、サービス開発ではデザイナーとエンジニアが上流から下流まで密接に連携して業務に取り組むことが重要となりますが、デザイン提案の前提の理解の共有や、実装フェーズでのデザイン意図を伝えることなど難しい点がいくつかあります。
今回のプロジェクトでは、上流での開発のプロジェクトへの参加、Figmaなどを使った実際の開発の進め方の検討、UI仕様シートを用いたコミュニケーションの改善といった大きく3つのポイントで工夫しながら進めました。
これらの工夫により業務の効率化や、品質の安定に繋がったと考えております。
プロセスと役割分担
まず、プロセスについて紹介しますが、体験設計フェーズによる基本コンセプトの作成ではデザインチームが主体的に動きました。
その後エンジニアチームが主体となり基本設計フェーズ、開発後のエンハンスフェーズと続きます。体験設計のプロセスについては、以前の記事「わたしたちのデザインプロセス」に詳しく記載してありますので、ご覧いただければと思います。
この記事の本題となる、デザイナーとエンジニアの協業ですが
体験設計フェーズからのエンジニアの参加
基本設計フェーズでの進め方
エンハンスフェーズでのコミュニケーションの改善
といった形で紹介していきます。
体験設計フェーズからのエンジニアの参加
体験設計フェーズでは、銀行が考えている仮説を整理して、ユーザーリサーチを行い、ユーザーにとって求められるサービスとは何か、必要な機能は何かを考えました。
デザイナーが主体的に検討しましたが、このタイミングからエンジニアが入ることで、検討しているサービスの実現性や開発工数の見積もりなどが早い段階で行えました。
また、既存のプロジェクトでは、体験設計フェーズでエンジニアが入ることは少ないものの、今回のプロジェクトでは体験設計フェーズからデザイナーとエンジニアが協力しながら進めました。その結果、ユーザーの意見などについてもエンジニアが横目で見ることができ、その後の開発で共通認識をもつことに役立ちました。
基本設計フェーズでの進め方
基本設計フェーズでは、体験設計で考えた機能をリリースできるように開発を進めました。
主な役割分担としては、体験設計で考えた機能を実現するためのUIフローとUI案をデザイナーが検討。
その後エンジニアに実装検討をしてもらうという進め方で行いました。
細かい仕様については実装検討を進めながら、銀行、エンジニア、デザイナーの3つのチームで議論しながら決めていきました。
基本設計フェーズでの具体的な進め方として、UI検討などデザイン作業はFigmaで行い、そのデータをエンジニアが実装を行うという形で作業を行いました。加えてデザインの一貫性を保ちつつ、開発の負荷軽減をするためにデザインルールやコンポーネントのルールを決めたデザインシステムを作成しました。
Figmaでのデザイン作業は便利な点もありつつ、変更の経緯と変更点や最新版の管理、エンジニアからの質問や修正依頼などが整理しきれず運用に一部課題も残りました。
少し細かい話になりますが、情報共有の変遷についてもお話ししたいと思います。
当初は、FigmaのコメントをメインにしつつSlackで質問をすることもあり伝達手段がバラバラでした。
ある程度検討が進んで別ファイルにデータをコピーするとコメントがコピーできなかったりするので過去の検討履歴を追うのが大変だったり、情報の伝達ミスなども起こっていました。
そこで、次に付箋を貼ってコメントを記入して、Figma上でコメントでメンションする運用に変更しました。
議論中のものは色をつけて、議論が終了するとグレイにするなど、見た目でも色のついている付箋があれば何か議論起きているかもと他の人にもわかりやすく、またコピーもできるため履歴も残せました。ただ、時間がたつとグレイの付箋だらけのファイルになってしまい、ある程度上手くいったもののベストな解決策とは言い切れなかったかと思います。
基本設計フェーズでエンジニアメンバーからの感想としては、
「UI設計をデザイナーにお願いできたので、エンジニアは開発に集中できた」
「そもそもデザインシステムがあること自体がありがたい」
などデザイナーとエンジニアがFigmaをベースにうまく役割分担ができていたという意見が上がりました。
また、「デザインシステムについてもデザインでベースを作りながら開発メンバーと話合いながら作りやすいものに改善した点がよかったかと思います。」との声もあり、上手くコミュニケーションをとりながらお互いに使いやすいものに変えていくことが出来たことは良い点だったと思います。
今回のサービス開発では、相続を起点に、弁護士などの士業の方々とユーザーをマッチングする機能を持ったサービスだったので、ユーザーが利用する部分に加えて情報を掲載する士業の方が申請するシステム、その申請を銀行側で管理するシステム、といった3システムの開発を同時に行いました。
並行して3システムを開発したことを踏まえ、エンジニアメンバーの意見を元に複数のシステムを跨いて共通のシステムを使えるようにパブリックなデザインシステムに変更していきました。
こちらも良い改善ポイントだったと思うというエンジニアメンバーの声もありました。
一方でデザインメンバーからの声として
「タイミングや条件によってUIが変更する場合に、Figmaでどのように記載したら分かりやすいのか悩ましい」
とのことで、基本的な画面設計に加えてどのように条件分岐を伝えるかに改善の余地は残っていました。
エンハンスフェーズでのコミュニケーションの改善
基本的な開発を終えた後に、サービスの改善を行うタイミングで、JIRAとConfluenceを使って「バックログ管理」と「UI仕様シートの作成」という形でデザイン作業前の要件整理とデザインでの作業履歴を記録に残すように作業フローの変更を行いました。
基本設計フェーズの説明でも書きましたが、それまでは、疑問点や確認したい項目をFigmaにメモしていたため、見落としやタイムラグなどが発生したり、放っておくと付箋が膨大になったり、付箋を外して別のファイルを作ると振り返った時に何を決定したのかわかりにくいなど、コミュニケーションが上手くとれないケースもありました。
今回の作業フローの変更により一つのドキュメント内で議論や検討の内容が残るので、多くの問題が解決しました。これらは、デザイナーとエンジニアが課題を共有しながらやり方を変更したのですが、この改善プロセスもよかったのではないかと思います。
この作業はデザイナーとしては少し負担となりましたが、この手間のおかげで要件をうまく伝えられることができ、経緯を正しく記録に残すことがうまくできたので、負担以上の効果があったのではないかと思います。
QAの観点でも何を意図してデザインしているか理解できるので、テストに利用することにも役立ちました。
プロセス面では、基本設計フェーズではデザイナーはUI全体を見ながら検討を行い個別のデザインをして、全体に戻って個別画面の修正を行っていました。そのやり方ではエンジニアが開発に取りかかれず手戻りが発生することがあるので、エンハンスフェーズではバックログで次に開発するべきチケットを意識し、それに向けてデザインを完了させるというプロセスに変更できたことが良い改善だったかと思います。
エンジニアメンバーからは
「UI仕様シートをベースにして設計することで、設計漏れを防ぐことができている。漏れていても気づくことができる」
「バックログ管理とUI仕様シート作成と週二回の開発ｘデザインのMTGなど密に認識あわせつつ検討から実装が行えた。」
「テストでも要件を見ながらテスト設計ができていて、QAチームはMTGとして一緒に施策検討にはいる時間はないにもかかわらず、テストができている。コミュニケーションコスト削減にも貢献できた。デザイン、開発でうまく分担が出来ている、進め方が型化できて見通しが良い」
とのコメントもあり、改善の取組みが設計漏れの防止やQAコスト削減の貢献にも繋がったことがわかります。
全体を通して
また、全体を通して銀行メンバーからもコメントとして
「スピードに加えて高いクオリティで開発できたことはよかった。デザインとテック両方のチームを抱えているからこそ小回りがきくので仕様変更などに対応できたと思う」
などの声もいただき、JDDとしてデザイナーとエンジニアの関係性を密にしながら業務を行ったことが銀行からの評価にも繋がったと思います。
ここまで色々な取り組みを書いてきましたが、お互いに敬意を持って作業を進めることが重要であると思いますし、本プロジェクトではメンバーがそれぞれ信頼しながら業務を進められたのではないかと思います。
最後に
Japan Digital Designでは、デザイナーをはじめ一緒に働いていただける方を絶賛募集中です。弊社の取り組みにご興味を持っていただけた方は、カジュアルにお話をするだけでも大歓迎ですので、ご連絡いただけますと幸いです！
この記事に関するお問い合わせはこちらにお願いします。
Experience Design Lead
Yoshiki Kuno（久野 芳揮）