見出し画像

入力フォームデザイン統一の裏話

東京ガス内製開発チーム

はじめまして！UIUXデザインチームの富田です。
本日は我々の具体的な業務についてご紹介したいと思います。

経歴

本題に入る前に、私の経歴を少しご紹介させていただきます。

  • 私はデザイナーとしてキャリアを歩んできたわけではなく、2017年に新卒で東京ガスに入社し、CRM基盤の構築や、新しいデジタルチャネルの立ち上げ・運営をビジネスサイドとして担当してきました。

  • ２年ほど前から外部やキャリア採用のデザイナーから、デザインや内製開発に関するナレッジトランスファーを受け、現在はデザインチームで会員サイトmyTOKYOGASやWeb受付のデザイン業務を担当しています。（内製化を始めた理由やナレッジトランスファーについては、こちらのエントリをご参照ください。）

そんな私の目線で、UIUXデザインチームの業務をご紹介します。

背景と概要

東京ガスホームページの入力フォームは、各業務を担当する部署がそれぞれ構築してきており、デザインがバラバラで、使いづらいという課題感があったため、デザインシステムを適用しながら入力フォームのデザイン統一に取り掛かることになりました。
また同時に、入力フォームでのUIデザイン統一の効率化や、継続的なUIUXデザイン改善を見据えた土台づくりとして、入力フォーム用デザインシステムの整備を行ってきました。

実施したこと

私自身UIデザインの引き出しが少ないため、入力フォーム用デザインシステム作成にあたっては協業先のデザイナーの力もお借りしながら、分析や業務担当との調整も含めたディレクター的な役割として動いてきました。

具体的に実施した内容は、以下の３点です。

1.定量分析

入力フォームによってはページごとの離脱数など基本的な数値計測さえできていなかったため、課題特定や改善後の効果計測ができるよう、GoogleAnalyticsの設定やダッシュボード化を実施しました。

2.定性分析

計測した数値や、業務担当へのヒアリング、コールセンターから上がってくるお客さまの声の集計結果をもとに、課題にあたりをつけました。デザイン検討にあたっては、ユーザーインタビューを通して仮説を検証しながらブラッシュアップを行いました。

3.入力フォーム用デザインシステム作成

デザインシステムの原則や、テキストボックスやボタンなどの基本コンポーネントは既存のデザインシステムで定義したものを使用しました。そのうえで、氏名や電話番号などの複数の入力フォームで使用されている項目は、既存のデザインシステムより細かい粒度で入力フォーム用コンポーネントを定義していきました。

良かったこと

企画しながらデザインできる

  • 私自身がデザインの役割も担うようになり、企画段階からデザインチームが入って、仕様を検討しながらデザインを組み立てられるようになりました。

  • 例えば、プロトタイプを眺めながら、「スマホで見るとなんか説明が多くて読みづらい。この項目や注釈は本当に必要か？」というように、仕様とデザインを行ったり来たりしながら検討しています。

素早く形にして会話できる

  • 打ち合わせでのアイデアを形にしながら対話することで、イメージを擦り合わせるための会話が不要になったり、合意形成も容易になりました。

  • これまで、Excelに画像を貼り付けて画面仕様を考えていたときは、いざ実装してみたら画面が説明でいっぱいでわかりにくい・・なんてことになりがちだったのですが、ユーザーが使う画面に近いものを眺めることで、ユーザー目線も意識できるように徐々になってきていると思います。

  • 素早く形にするためにFigmaやデザインシステムも役立っています。コンポーネントを積み木のように並べて、議論用の画面を手軽に作れるようになったので、その分会話の時間を多く取れるようになりました。

難しかったこと

デザインの重要性を理解してもらう

  • これまでは、社内でUIUXデザインという言葉を耳にすることもなく、重要視されていませんでした。むしろ、デザインは見た目をカッコよくするためのもので、定量効果と結びつかないもの、という印象があったと思います。そんな状況でUIUXデザインチームが立ち上がって１年目ということもあり、社内に理解を得ていく苦労がありました。

  • 「なぜUIデザインを統一する必要があるのか？」「社員がデザイン業務を担当する意味があるのか？」と聞かれることも多々あり、その都度、デザイン推進の背景や、どんな意図でこのUIUXデザインに至っているかを言語化し資料におこして説明するなどのコミュニケーションを地道に重ねてきました。（デザインチームとは言いつつも、分析や会話にかける時間の方が多かったです。）これが最も骨の折れる作業でしたが、過去のナレッジトランスファーを通して「デザインは重要だし、推進していかねばならない！」という実感を持てていたことが支えとなりました。

  • そんな中、部内に業務内容やデザインの重要性を紹介する機会を頂きました。これまで積み重ねてきた考えや思いが部員に伝わり、デザインが重要であるという認識が少しずつ部内に浸透していったことも推進の後押しになっていると感じています。

  • つい目の前の成果物作成に没入しそうになりますが、ただ作るだけでなく、地道な啓蒙活動を続けることも同様に重要だと実感しています。

定量効果を出す

  • デザインの重要性を伝えるために求められる、改善後の定量効果の説明も苦労している点です。というのも、UIデザイン以外にも、業務やプロモーションなど様々な要因が数値に影響しますが、それらを把握する体制や仕組みが作れておらず、数値が変わってもどの打ち手の効果なのかあたりをつけられませんでした。

  • さらに、業務や基盤システムの都合でUIデザインを改善できる範囲が限定され、表面的な改善にとどまり悔しい思いをすることもありました。

  • これらの反省を踏まえ現在は、並行して進められている業務改革にデザイン担当として入り、一緒にUIUXを検討したりしています。また、業務担当とデザイン担当で定例の情報共有会を開催して継続的に改善できる体制を試行しており、定量効果をアピールしていけるよう頑張るぞ、というところです。

さいごに

デザインチームも立ち上がって２年目に入ります。まだまだデザイン組織として道半ばですが、地道に改善を重ねて、少しでも良いものを提供していければと思っています！
最後までお読みいただき、ありがとうございました。