ビザスクでデザイナーをしている稲葉です。

今回はビザスクの「クライアントポータル」というプロダクトのログイン画面のリニューアルを例にして、デザイナーが主導してサービスの問題を定義・推進したプロセスについてまとめていきたいと思います。

デザイナーから機能改善を提案する方法や、他職種とのコミュニケーションの取り方に悩まれているデザイナーの方々の参考になれば幸いです。

今回は、ビジネス側からのエラー報告を受けてプロジェクトが開始しました。

ビジネス側のメンバーから「ログインがうまくいっていないクライアントがいる」というエラー報告をSlackで受け、エンジニアメンバーが調査したところ、そもそもUIに問題ある気がするのでなんか対応考えてくれませんか。というざっくりした相談がありました。

今期のロードマップでは改善予定がなかった箇所でしたが、優先度を上げて対応するべきか判断するために、まずは問題の大きさを調査してみることにしました。

最初に、改善するとどれぐらいの業務が削減できるのかを明確にするために調査から始めました。

今回報告してくれた1人の声だけでなく、実際に顧客と接しているビジネス側のメンバーに、ログインエラーに関してどれくらいの頻度でどんな内容の問い合わせがあるのかをSlackで気軽に質問してみます。

ビジネス側のメンバーに実態としてどのくらい問題が発生するのかSlackでヒアリング

結果、ビジネス側のメンバーからの返信をまとめると、月に20回以上はログインできないユーザーがいるようでした。

そうした問い合わせに対して、エンジニアが調査して、回答する作業にかなり時間を取られていそうだなということが推測できます。

もう少し具体的に状況を理解するためにデータも確認してみます。

ログインエラーに対して、問い合わせボタンが押された回数を確認すると、やはり実態としてもログインできていないユーザーが一定数いるんだなということが明確になります。

ログインできなかったユーザー数を要因ごとに、数値で分析する

他にもログイン関連でのお困りごと部分の要望を、この機会に共有してもらい並行して検討しました。

ログイン改善に取り組むことをビジネス側のメンバーに伝達した時に共有された要望

ここまでのプロセスを通じて、対応しているメンバーの肌感・データの両方でログイン画面のデザインに問題があることが確認できたので、優先度を上げて対応することを決めました。

具体的なデザイン作業の最初のステップとして、解析ツールを使いログインできなかったユーザーはどんな行動をしているのかを観察し、現状のフローにおける問題箇所を確認していきます。

調査からログインできない原因として、

  • そもそも(ユーザーが)間違ったメールアドレスを入力していて、ワンタイムパスワードが届かない。
  • ワンタイムパスワードは届いているけど、入力する箇所を間違えていてログインできなかったので問い合わせた。

の大きく2つにパターン分けできることがわかりました。

フローを洗い出した上で、うまくいくパターンと、うまくいかないパターンを整理

今回はデザイン修正で解決できそうな、入力する箇所を間違えていてログインできなかったパターンに絞ってデザイン案を検討しました。


また、差し込みの改善なので、できればデザイナーだけでほぼ作業を完結できるように、極力画面の構造はあまり変更しないことを意識してデザインを作成しました。

解決案をデザイン案にまで落とし込む

プロジェクトを進める上で、解決までの道筋の解像度を高められることがデザインの強みだと思うので、数値やデザイン案にまで落とすことを意識しています。

デザイン検討が終わった段階で、資料を作成してログイン画面を改善することで影響がありそうなビジネス側の関係者に共有しました。

開発前に問題とデザイン案を資料にまとめて主にビジネス側のメンバーに向けて共有した

資料を共有する相手が普段使用しているツールで共有することで相手の負担を軽減できるので、今回はビジネス側のメンバーが普段使っているGoogleスライドで、原因の仮説・現状の課題・変更後のデザインが完結に伝わるようにまとめて共有しました。

(デザインチーム内での共有は主にFigmaを使っています。)

課題の仮説をまとめたページ
現状のログインフローの中で問題部分をまとめたページ
改善画面も資料にまとめて、何が変わるかを分かりやすく伝える

開発を始める前に、ビジネス側のメンバーにも何が変更されるのかを分かりやすく伝えてレビューをもらうことで、全体での合意が形成でき、不安も解消できると思うので、最近は可能な限り資料を作成して共有することにしています。

実際に開発した後も、メンバーから多くのリアクションをもらいました。

ビザスクでは機能をリリースすると、エンジニア以外のメンバーからもたくさんリアクションがもらえます

問題を明示し、事前にどのように改善するかを関係各所に共有するプロセスを置くことで、改善内容や大まかなリリースの時期を認識してもらえるので、リリース後は事業側のメンバーを通じてスムーズにユーザーまで届けることができます。

また、ビジネス側からのフィードバックに対して丁寧に受け答えしていくことで、今後もお互いに協力しやすい体制が作られていくと考えています。

改善後データを確認したところ、問い合わせ件数は0件に(改善前は週平均5.4件)。

運用を担当してくれているエンジニアさんにも念のため確認したところ、「リリース後デザイン起因での問い合わせはないよ。」とのことでした。

問題は無事解決できたみたいで、いろんな人の時間をもらって協力してもらった甲斐がありました。

ビザスクには、できる人が手をあげて、周囲は積極的に相談にのってくれたり、協力してくれるカルチャーがあります。

ロードマップにはない改善要望でも、自分がやろうかなと意思表示して相談すれば、自由に進められる(勝手にではないですよ)ビザスクの環境は、デザインをする上でとても快適な環境だと思います。

トップダウンではなくフラットな関係性で、自然とお互いに協力し合えるカルチャーは、ビジネス側と開発チームがフランクで距離が近いことが土台になって出来上がってきたものだと思います。

今後もビザスクデザインチームの取り組みをどんどん発信していきます、お楽しみに。

このデザイン組織をもっと知る