ビザスクlite×Basecamp!デザインリニューアルまでにやったこと
Basecamp社でビザスクlite、というサービスのデザインリニューアルのお手伝いをしています。
8/19にサービス名称が「ビザスク」→「ビザスクlite」に変わり、一部のUIが先行リリースされました!まだまだ絶賛デザイン中ですが、節目として6月から始まったリニューアルプロジェクトの裏側についてノートを書きました。
今回Basecampはデザインスタジオとしてはちょっと珍しい体制でお手伝いをしているので、デザインチームの体制や、実際にやったことを中心に書いています。
リニューアルプロジェクトが発足した背景は、ビザスク社のnoteに書かれていますのでぜひそちらもご覧ください!
はじまり
すべてのはじまりはBasecamp代表の坪田さんのツイートでした。
もともとユーザーとしてビザスクを使われていた坪田さん。
このツイートをきっかけに、ビザスク社からご連絡があったそう。
なかなかあざといですね...?
なぜこのお仕事を本格的にお受けすることになったのか、坪田さんにコメントをいただきました。
普段から新規事業やリニューアル時の市場調査でビザスクを活用させていただいてるのでお手伝いできて非常に嬉しいです!本質的な課題発見は事業成功のため最も重要なプロセスでBasecamp社でも必ずインタビューを実施してユーザー体験の設計をしてます。エキスパートインタビューやユーザーインタビューがビザスクでもっと身近になればと思います。
デザインチームづくり
このプロジェクトの珍しいところは
ビザスク社のデザイナーとBasecampのデザイナーが一緒にデザインをしているところ。
割と珍しいチームだと思うのですが、かなり進めやすいです。
キックオフのときに自然な流れでながおかさんのリソースをリニューアルプロジェクトに割いていただくことになり、以来この3人でUIを作っていました。
5年弱ビザスクに向き合い続けてきたながおかさんは、サービスが生まれた頃からの背景や課題を全部ご存知です。
かたや私たちは、大規模な機能改善、デザインシステム構築が得意。
お互いに足りないところを埋めあって、かなり効率のいいデザインワークが出来ていると感じます。
しかも、ビザスク社のチームに入ってデザインして思ったのはとにかく職種間の垣根が低い!社長もエンジニアもCSも、みんなでデザインのことを考えている、という印象が強かったです。議論がどこかの部署で滞ったりしないので、機動力が高いです。
UIコンポーネントを棚卸し
以前のビザスクのUIには、似ているけど少しずつ違うコンポーネントが多く存在しており
改善しようとはしているものの、まとまった時間が取れずなかなか進まない状態だったそう。
ボタンのコンポーネントたち
そこで、現状把握も兼ねてまずはインターフェースインベントリ(UIの棚卸し)を実施することにしました。参考にさせていただいたのはこちら。
目的は、まず現状のコンポーネントを把握し、徐々に置き換えていく土台を作ること。
ながおかさんだけではなく、フロントエンドエンジニアのえざわさんにも1日かけてご協力いただいた実施結果。これでも半分くらいです
実施した結果、何を改善すればより使いやすくなるのかもはっきりと見えてきました。全体の画面の構造はとても綺麗で無駄が少ない。ただ、画面ごとの要素に、ユーザーを迷わせるポイントがいくつかありました。
1. 自分の位置がわからなくなる
2. ワーディングの表記揺れ
3. 似たコンポーネントの乱立、要素が多い
抜本的に変える必要は無さそうだと思ったので、主要な画面だけを選び
画面ごとのレイアウトを改善しながら、コンポーネントガイドを制作していくことに。
ワークショップで目的を明確化
インターフェースインベントリを実施した後は、代表の端羽さんをはじめ、エンジニア・デザイナー・カスタマーサポートの方々を一堂に会して、これまでに感じられている課題感、今後のプロダクトの方針、今回のプロジェクトで達成したいことを集約、議論する場を設けました。
・ユーザーの理想的なストーリー
・理想的なストーリーを実現するUIの全体像
・今後追加したい、認知させたい新しい機能をどう実現していくか
・ビザスクliteのカラー
などを、このワークショップで一気に決めていきました。
ワークショップで流れるように意見を引き出していく坪田さん
この日、ビザスクliteの色を決めるためにあゆちゃんがリサーチをしてくれました
デザイナープチ合宿〜作業開始!
プロジェクトの指針が明確になったら、いよいよ実際の作業です。
これまで一緒に作業したことがない3人のデザイナーで効率よく作業するために、最初はビザスク社の一角をおかりして、1日同じ場所で議論とデザインパターン出しをおこなうというプチ合宿的なものを、週2くらいのペースで実施していました。
ペーパープロトで案だし@ビザスク社
クライアントサイドのデザイナーも含めたチームは初めてだったのでうまくワークするだろうか...とかなり緊張してましたが、杞憂に終わりました。
最初の案出しで作れたデザインパターンは100以上。1画面のパターン出しに、2日でこれだけの量が出たのはすごい!ながおかさんもあゆちゃんも有能すぎる。
ながおかさんはXD派だったのですが、この機にペアデザインが捗るFigmaを導入していただいたのも大きい
だんだんお互いに作業に慣れてきた後は、リモート作業に切り替えてさらに効率化できるように。基本的には、
==============
画面ごとの課題の整理
↓
デザイナー同士で議論
↓
リサーチ/リファレンス探し
↓
デザイナー同士で議論
↓
UIデザインパターン出し
↓
PJメンバー全員で議論
↓
修正・精緻化
==============
という流れで、割とコミュニケーションを密に取りながら進んできました。ほとんどの議論はslackとzoomでおこなってますが、PJメンバー全員が集まるときは対面で。
議論を重ねて、だんだんと形になってきたUIの全貌。美しいコンポーネントガイド
実はこのコンポーネントガイドの大部分はながおかさんが作っています。
わたしはデザインデータ整理したりガイド化したりするの得意なので最初のコンポーネント化はお手伝いしてたのですが、ながおかさんは1ヶ月足らずでFigmaをマスターされてこのクオリティでまとめてくださいました。
お客様に納品物を作らせちゃって大丈夫なのか!?という考えもよぎったのですが、後半はわたしは課題の整理やパターン出しや議論結果の展開など、ながおかさんが今後新しくデザイン作っていくときのコミュニケーションの参考になるような作業に専念していきました。こんなのはじめてだけど、とても良い進め方ができている気がする。
実は8/26に、ビザスク社からもリニューアルの裏側についてのノートを公開予定です。ちょっとドキドキですが、両方の目線から見てみるのもまたおもしろいかもしれない。
これからのこと
最初にも述べたとおり、リニューアルの一部分がリリースされましたが、デザインは進行途中です。やりたいのにやれていないこともまだまだ。
わたしはこのプロジェクトをきっかけにビザスクliteというサービスを知ったのですが、ときどき業界調査に使わせていただいてます。企業という枠を超えて、様々な知見を持った人と繋がれる!ユーザーインタビューにもぴったりなので、ベンチャーやスタートアップとは非常に相性の良いサービスです。
このリリースをきっかけにベンチャーやスタートアップの方々がビザスクliteを認知して、たくさん使ってくださることを願っています!UIは段階的にリニューアルされていくので、これからどんどん良くなっていくビザスクliteを楽しみにしていてください。
ビザスク社のみなさま、素敵なプロジェクトに参画させてもらえて光栄です。引き続きよろしくお願いします!
そしてそして、一緒にビザスク社を盛り上げてくださる仲間も絶賛募集中、だそうです!!
このノートを読んで少しでも興味を持った方はぜひご応募ください😉
最後まで読んでくれてありがとうございます!