こんにちは。M&Aクラウド Webデザイナーの長竹です🐤
入社してから約1年立ちました！
ここ数ヶ月では、M&Aクラウドの主要ページのリニューアルを進めてきました。 その振り返りも含めて、学んだことや意識的に行った事をまとめたいと思います。 今回はTOPページのリニューアルについて振り返ります。
リリースまでのフロー
始めてみると、必要なタスクは膨大にありました。
他部署に協力してもらったり、多くのユーザー様にご協力頂き、少しづつ進めていきました。
トップページの課題
サービスの成長に伴い、主に上記3つが課題として存在していました。 これらを解決するために今回リニューアルを進めていきました。
UXリサーチ
様々なデータや、今まで貰っていたユーザーの生の声、普段ユーザーと対話しているメンバーにヒアリングなどを行い 現状の課題感やユーザーの求めるものを整理しました。
- アナリティクスやマウスフローなどのデータ解析
- ユーザーから今までに貰っていた意見をまとめる
- 要望のヒアリング
- 改めてペルソナを作成
軸を定める
M&Aという業界で、競合や類似業界のTOPページがどんな軸で作られているのかを調査しました。 まず、コンテンツを見せているのか？サービスの説明をしているのか？といった大きい軸に当てはめ、競合や類似サイトを2つに分類しました。
旧トップページは後者で、コンテンツをメインにしていました。 しかし、今までに無い新しいサービスなのにあまり説明をせずにコンテンツを見せているため、そのコンテンツが何なのかをユーザーが理解していなかったりなど問題がありました。
そこで、今回のリニューアルではまずはしっかりとサービスを理解してもらい、M&A業界にサービスを浸透させていくことを軸として定めました。
プロトタイプを作る
様々な参考サイトを集め、UXリサーチで得た情報を基にプロトタイプを作成します。 ユーザーヒアリングを想定しているため、今回はある程度作り込みます。
デザインのルールを見直す
M&Aクラウドで使用しているカラーリングをまずは見直し、プロトタイプ作りを進めました。
サービスサイトでは、M&Aクラウドのロゴカラーの「赤」と「青」を様々なボタンに使用しています。 しかし、どちらも色が強く、結果ユーザーを迷わせてしまいます。
そこで、新しいカラーを用意し、強調したいボタンをより明確にしました。 このルールをサイト全体に反映し、分かりやすいUIを目指します。
ファーストビューを考える
社内・外からアイデアを募り「事業売却と資金調達で次のステージへ」というキャッチコピーを作成しました。
事業売却と資金調達をする事で、各々の「次のステージ」に進む事が出来る。といったメッセージを込めています。 出来上がったキャッチコピーを基に「次のステージに向かってる感！」のあるファーストビューを作成しました。
訴求のテーマを決める
説明をしっかりしたいので、どのような訴求の流れが良いのかを模索し、今回は「悩みを解決」をテーマにサイトを構成しました。
ユーザーヒアリングを実施
出来上がったプロタイプを基に、計6回ほどユーザーヒアリングを行いました。 新鮮な意見を聞くことができとても参考になりました。
例）「売却案件」とありますが、売り手側からすると「案件」ではないので違和感があります。 など、本当にユーザー目線でいなければ気づかなかった細かい視点に今回多く気付く事ができました。
遂にリリース
Before
After
思い切ってファーストビューでの検索フォームは外し、キャッチコピーを目立たせています。 サービスについても具体的で分かりやすくなったと思います。
今回のリニューアルでは、業務フローや技術はもちろん
弊社のミッション「テクノロジーの力でM&Aに流通革命を」を実現するデザイナーとしてユーザーの理解がまた少し進んだと実感しました。
現在デザイナーは1名なので、引き続きオールマイティーに頑張りたいと思います！
