ビザスクではリニューアルプロジェクトを進めており、8/19にセルフマッチング形式のサービスをビザスクliteに名称変更し、一部のUIを先行リリースしました。今回は本プロジェクトを担当しているWeb事業部の事業部長の田中とデザイナーの長岡にデザインリニューアルの裏側について、話を聞いてみました。

デザインリニューアルのきっかけは？

田中　今までは使いやすさの改善よりもサービスの拡大に注力し、新機能の追加やKPIに直結する改善を中心に開発を進めてきました。その結果、順調にサービスは成長してきたのですが、機能やUIの複雑化が進んできてしまい、ユーザーからも使いにくいという声をいただくようになってきました。このままではいけないと思い、リニューアルの必要性を感じていたのですが、社内に大規模なデザインリニューアルの知見がなく、なかなか踏み出せずにいました。

ちょうど悩んでいた時に、Basecampの坪田さんがTwitterでビザスクのUIについて言及してくださり、代表の端羽からお声がけさせていただいたのが今回のリニューアルのきっかけです。

坪田さんの発言がなかったら、大規模なデザインリニューアルは進んでいなかったんじゃないかと思います。

リニューアルが決まった時、どう思いましたか？

長岡　「やった！」と思いました。デザインリニューアルはやりたいと思っていました。でも大掛かりだし、事業的に伸ばすところは伸ばしていきたいとも思っていて、なかなかやれる機会がありませんでした。そのため、フルリニューアルが決まった時はとても嬉しかったです。

田中　ちなみに、動き出してからリニューアルが決まるまでのスピードは非常に早かったです。Basecampさんにリニューアル案をご提案いただいた翌日が経営会議だったのですが、期の予算追加や開発ロードマップの変更が必要になるにもかかわらず、即決でした。

リニューアルの体制は？

田中　両社のデザイナーが協業する体制にさせてもらいました。デザインスタジオと事業会社のデザイナーが一緒にリニューアルを進めるというのは珍しい体制なのではないかと思います。

長岡　今までは「デザインをもっと良くしていこう」となっても、社内に知見がなく、うまく進めることができない状況が続いていました。今回はデザインをリニューアルをするだけではなく、デザイン改善のプロセス自体を学ばせてもらいたいと思い、一緒に進める体制にさせてもらいました。

田中　また、社内の体制としては、プロジェクトチームにCS(カスタマーサクセス)チームのメンバーにも加わってもらいました。CSは日々直接ユーザーとやりとりしており、ビザスクで一番ユーザーの生の声を知っています。その声をリニューアルに反映するためにデザイナー・エンジニア・CSが一緒になったチームを作りました。

リニューアルで重視したことは？

長岡　機能やUIの複雑化に加えて、一画面の情報量が多いことなどが使い勝手を悪くしていると考えてましたので、情報設計をやりなおしてUIをシンプルにすることを目指しました。

田中　例えば、登録時にアドバイザー利用と依頼者利用のどちらの用途での利用なのかを選択してもらい、アドバイザーと依頼者でマイページを出し分けてそれぞれの使い方に最適化しようとしてきました。しかし、実際は依頼者登録した人がアドバイスすることも、アドバイザー登録した人が依頼することもあって、結果的に使いにくくなってしまっていました。　

長岡　今回のリニューアルでは登録時の利用用途による選択に関係なく、アドバイスする時も依頼する時も使いやすくて、初めての人も何度も使う人にとってもわかりやすくすることを心がけました。また、今回のリニューアルに合わせてサービス名を「ビザスクlite」としました。liteには気軽に使えるサービスにしたいという想いを込めていて、情報のわかりやすさや、簡単に使えそうな雰囲気を意識したデザインを心がけ、色使いなども工夫しました。

田中　開発チームとしては開発の効率化も重視しました。以前はデザインのルールが確立しておらず、ページごとにUIが統一されていなかったり、似たようなコンポーネントが乱立したりしていました。今回はAtomic Designでコンポーネント化を行うなど、デザインシステムの構築にも取り組みました。

第一弾リニューアルの感想は？

田中　期待していた以上に満足のいくクオリティを出すことができたと思っています。今まではビザスクのサービスは複雑で、わかりにくいのは仕方がないと思っていた部分もありました。今回のプロジェクトでは、わかりにくいと思っていたことがデザインの改善でどんどんシンプル化され、わかりやすくできることに驚かされました。ユーザーからのフィードバックも楽しみですね。

長岡　今回のリリースはまだ一部分のみですが、デザインリニューアルはサイト全体を対象にして進めています。ページ単位の改善ではできない、ユーザー体験全体を通した導線やUIの改善を進められたのは良かったです。

今後の展開は？

田中　第一弾はマイページのリニューアルを行いました。今後も、公募の募集や検索機能、メッセージのやりとり画面など、主要なページを段階的にリニューアルしていきます。

長岡　今までビザスクはちょっとお堅いイメージがあったと思うのですが、今回のデザインリニューアルで払拭できるのではと思っています。ビザスクliteでは気軽にユーザーインタビューの対象を募集することができるのですが、今後のリニューアルでは募集内容をSNS上でシェアし、広く応募を集めやすくする仕組みなども考えていますので、ご期待ください！

今回リニューアルされたビザスクliteはこちら
>ビザスクlite TOPページ
https://service.visasq.com

ビザスク テックブログではリニューアルで使用したデザインツールについて記事をしたためております。
https://tech.visasq.com/figma-vs-xd/

「ビザスクlite」のスタートを記念して、依頼者としてご利用いただく際に1,000円OFFとなるクーポンをプレゼントさせていただきます。ぜひこの機会にご利用ください。

またリニューアルプロジェクトで具体的にやったことはBasecampのかみそるさんにまとめていただいていますので、ぜひそちらもご覧ください！