freeeの開発情報ポータルサイト

会計freeeのホーム画面をフルリニューアルした話

アイキャッチ画像(会計freeeのホーム画面をフルリニューアルした話)

この記事はfreee Developers Advent Calender 2020の17日目の記事です。

こんにちは、freeeのプロダクトデザインチームで会計freeeのデザインをしたり、リサーチをしているはるたん(@hrtnde)です。

今日は構想から1年半かけて会計freeeのホーム画面をフルリニューアルした裏側を全て公開します!!!

新旧ホーム画面の比較画像
新旧ホーム画面

会計freeeの提供から約7年、日々freeeは機能アップデートを重ねプロダクトを進化させてきた一方、ホーム画面については大きな変更を行っていませんでした。

そんなfreeeのホーム画面を大きく刷新、ついにフルリニューアル後のβ版提供も終了し、会計freeeの法人・個人アカウントのユーザー*1が新しいホーム画面を利用していただいております!(👏👏👏)

リニューアルの概要については、freeeのリリースノートに載っているので、そちらをご確認ください。

www.freee.co.jp

はじまり

ホーム画面はリリースしてから主要機能の大きな変更がなかったため、freeeのユーザーセグメントの変化に対応できなくなっていました。例えば、従業員数が100人を越す会社の経理担当者も起業したばかりの1人経営者にも同じ画面を提供していたため、情報が全く整理されておらず、経理経験のない経営者にいきなり専門用語で圧倒するなんてことも。。。

主要な機能はあまり変化がない一方で、会計freee内のさまざまな画面への導線やユーザーへのメッセージは追加されていくという悲惨な状況。

2019年6月、会計freeeを担当するデザイナー陣のミーティングで、ホーム画面をリニューアルしようということになり、本プロジェクトがついに幕を開けます。

デスクリサーチでホーム画面の課題を整理

プロジェクトが始まった当時の事を振り返ると、リニューアル後のイメージが持てず、暗中模索しているような状態。僕自身、入社してからずっと社外から会社の経理業務に関わる「税理士さん」向けの機能開発に関わっていたこともあり、社内で経理業務をする「経理担当者」や、数字を確認する「経営者」への理解が薄かったのも要因の一つだと思います。

まず初めにやったことは、社内SNSで会計freeeのホーム画面に関するフィードバックを全従業員から集めることです。

freeeのホーム画面に関するフィードバックを集めている写真

募集をかけてすぐに、様々な職種・部署の人からたくさんの意見をもらいました。例えば、「特定の機能の導線を目立たせたい」「何をすればいいか分からない」「特定ユーザーを想定した固定的なホーム画面の提供はもうムリ」「お気に入りメニューの登録みたいな形でカスタマイズできるようになると嬉しい」などなど。部署が違えば意見も違うため、改善案の方向性が中々定まりません。

次に経営者、経理担当者がどうやってfreeeを使うかを理解するため、経理業務や経営者が日常的に行う業務フローを整理。合わせて経理業務に関する本を読んだり、ブログを読んだり、時には経営に関する本を読み込みながら少しずつ理解を深めていきました。

経営者の業務を整理したシート、業務別にfreeeのホーム画面どの機能と関連するかが書かれている
経営者の業務を整理したシート

業務の理解が深まるに連れて、ホーム画面としてどうあるべきかまでは見えていなかったものの、どんな機能があれば経営者の業務が楽になりそうか?という仮説が見えてきました。

改善案の方向性が何となく見えてきた段階でfreeeの経営陣(CEO&COO)へ、freeeのホーム画面を改善したいという相談を行うことにします。(直接経営陣に提案するのは始めての機会だったので、最初はめちゃくちゃ緊張した記憶がありますw)

相談の結果、「経理担当者」や「経営者」など全ユーザーセグメント向けの画面を一気に変更すると検討工数も開発工数も膨らんでプロジェクトが進まないのでは?という話はあったものの、ホーム画面を改修していくことには全面的に賛成。

詳細は割愛しますが、「経営者」に絞って検討を進めていくことが決まり、プロジェクトが本格的に始動しました!

30人以上の経営者に話を聞き、作って壊すを繰り返す

初期のコンセプト案に関して、CEOからのフィードバックはあったものの、実際にそれが良いかどうかはユーザーに聞いてみないと分からないよねという結論になり、ユーザーインタビューを行うことにしました。

1回目のインタビュー

1回目のインタビューで使用したプロトタイプ
1回目のインタビューで使用したプロトタイプ

ちなみにこれが初期のプロトタイプ。最終的な形と比べると機能モリモリでしたが、それが初回のインタビューとしては良い効果に繋がりました。

というのも、新ホーム画面をそのまま公開するためのインタビューというよりは、「経営者としてホーム画面で重要な情報は何か?」を明らかにすることが最重要。話を引き出すためのプロトタイプとして利用するには、実は機能モリモリの方がやりやすかったです。

インタビューでは、「経営者にとってホーム画面で重要な情報」を明らかにするための質問事項を設計しました。

インタビューで質問する事項を整理した図(説明は後述する)

まず、「新ホーム画面」と「今までのホーム画面」に関するフィードバック、そしてその理由を伺うことで、その人にとって何が重要な情報かを明らかにします。

とはいえ、その人のバックグラウンドを理解しないままが発言を鵜呑みにしても、最終的にホーム画面にとって重要かどうかの判断は難しいため、インタビューの前段にその人のストーリーを理解するために『会社の「これまで」と「これから」を記入してもらう質問シート』を用意しました。

会社の「これまで」と「これから」を記入してもらう質問シート(説明は後述する)

このシートを使って、インタビュイーのストーリーを聞き出します。起業した経緯、そしてそれまでの変化、どんな経営的な判断を行ってきたのか、そしてその時にfreeeはどんな存在だったのか?を紙に書いてもらいます。書きながら感情の変化とかを書いてもらったお陰で、過去の話も具体的な体験とともに語ってくれました。

たくさんの経営者に話を聞く中で、freeeのお陰で救われたという経営者もいました。僕たちが作っているプロダクトが彼ら、彼女らの人生に大きな影響を与えているんだなと感じ、責任の重さを感じつつも、体が熱くなるほど嬉しくなった事を思い出します。

freeeの新旧ホーム画面を印刷したシートにペンで円バツが書いてある様子
freeeの新旧ホーム画面を印刷したシート

新ホーム画面や今までのホーム画面に関するフィードバックを集めるために、それぞれ印刷した紙を渡して、必要そうな機能に丸、使わない機能にはバツを。そして、丸やバツにした理由を聞くことで、どんな情報を重要としているかを理解していきました。

印刷した紙を渡したことで、経営者の中には自分でこういう機能が良いんだよねーと言いながら、紙にアイデアを書いてもらうことでプロトタイプを一緒にデザインしていく場面も何度かありました。

1回目のインタビューが終わり、インタビュー結果や経営者の方のアイデアを元にプロトタイプを修正することにします。

2回目のインタビュー

2回目のインタビューで使用したプロトタイプ
2回目のインタビューで使用したプロトタイプ

特にユーザーからのフィードバックが多かったものを修正し、自信満々で2回目のユーザーインタビューを行いました。 2回目のインタビューも1回目とインタビューと同じように、質問シートを使ってターゲットの属性を把握した後、プロトタイプを見せて反応を見てみるインタビュー。

ところが、ものの見事に僕らの自信は打ち砕かれてしまう。

2回目のユーザーインタビューで得た気付きは2点。1つめは、「freeeを使いこなしている経営者の方は、今回のプロトタイプで得られるメリットが少ないということ」、2つ目は「freee使い始めの人にとってはホーム画面だけでは改善の意図が伝わっていないということ」でした。

3回目のインタビュー

3回目のインタビューで使用したプロトタイプ
3回目のインタビューで使用したプロトタイプ

3回目に作ったプロトタイプは初めて使う人でも使いやすいホームに振り切ってみることにします。

1、2回目と同じようなインタビューを行った結果、このプロトタイプは、どうやって操作するかわかりやすい反面、慣れてきた時に鬱陶しいとのこと。

ただ、僕たちが届けたい想いは今までのプロトタイプに比べて伝わっていたように感じます。改善すべきポイントはたくさんあったものの、ホーム画面としてどうあるべきかが3回の改善を繰り返したことでようやく見えてきました。

コンセプトを固める

インタビューを改めて振り返ると、経営者の数だけいろんなストーリーがありました。起業した想いもバラバラだし、今やっている業務も職種や業種が同じであったとしても全然違う。

ただ、実際に経営者にあったからこそ、そんな経営者の想いをサポートしたいという気持ちは強まっていました。

freeeのビジョンは「アイデアやパッションがあればだれでも、ビジネスを強く育てるプラットフォーム」と掲げているが、経営スタイルはスモールビジネスの数だけ多種多様。

どんな経営スタイルであっても、freeeとしてスモールビジネスを支えていきたいし、支えることができるということを伝えられる、活用してもらえるホーム画面に育てていきたい。

この想いがfreeeのホーム画面のリニューアルの軸になったことで一気にリニューアル案の方向性が固まっていきます。

リリースまでの道のり

ホーム画面のリニューアルは影響範囲がかなり大きいため、いきなり全面展開することはせずにβ版をリリースし、アンケートでフィードバックを集めつつ致命的な課題がないかを見ながら丁寧に進めていきました。

アンケートもプロダクトマネージャーと全て目を通し、Twitterでの反応も見つつ本番リニューアルに向けて追加対応すべきことがないかを議論。細かいUIの修正も含めて、8~9個近くの要望に対応してリニューアル版をリリースしました。

対応した要望一覧はこちら

このプロジェクトの学び

1年半近くの長期プロジェクトを終え、その中でも特に大事だと感じた学びを紹介します。

「どんなに要件が曖昧なプロジェクトであっても、自分たちが届けたい想いを大事にする」

ホーム画面という誰もが使う画面の大規模リニューアルをした後はいろんな意見があると思います。UIを変えただけでも変化を嫌う人は多くいると思います。ただ、すべての要望を叶えることは難しい。だからこそ、自分たちが届けたい想いをまず明確にして、その視点から要望に真摯に向き合うことで、やるべきことに集中でき、リリースした後の評価もしやすいと思います。

「大きなリニューアルをするときは検証しやすい範囲でやるのが大事」

ユーザーインタビューでは、インタビュイーが細かい機能変更やレイアウトの変更に気を取られてしまい、コンセプトが正しく評価できない場面がありました。その学びを活かし、今回のリニューアルでは、コンセプトに関わらない機能は見た目の変更に留めてリリース。その結果、リリース後も大きなトラブルなく落ち着いております。(今のところ)

最後に

freeeに入社して以来、最も長期的且つ、大規模なプロジェクトがひと段落してほっとしているところですが、今回のリニューアルはfreeeのミッション達成に向けた第一ステップに過ぎません。これから一緒にfreeeのプロダクトを育てていけるデザイナーを絶賛募集しております。

jobs.freee.co.jp

明日はアクセシビリティで一発当て太郎こと、magiさんです。お楽しみに!

*1:OEMアカウント・アドバイザーアカウントは2020年12月21日以降新ホーム画面が適用される予定です