2018年から取り組みを開始 Booking.comとAlaska Airlinesが語る、デザインシステムの定着と拡張

2018年から取り組みを開始 Booking.comとAlaska Airlinesが語る、デザインシステムの定着と拡張
  • X
  • Facebook
  • note
  • hatena
  • Pocket
2024/07/17 08:00

 Figmaがアメリカ・サンフランシスコで開催した「Config 2024」では、「Design systems at scale」と題し、規模に応じたデザインシステム設計について解説がなされた。本記事ではそのなかから、宿泊予約の「Booking.com」と航空会社「Alaska Airlines」が自社の事例について紹介したパートを抜粋してお届けする。

「どう使ってもらうか」より「いかに好きになってもらうか」

 Booking.comは宿泊予約の旅行サービスを提供する旅行プラットフォームだ。世界220以上の国・地域で事業を展開しており、45言語に対応するなど、この分野では世界最大級と言える。

 そんなBooking.comには150以上のプロダクトチームがあり、200人以上のデザイナーが所属。たくさんのチームを抱える同社だが、ウェブ、モバイルアプリなど5つのプラットフォームで導入しているデザインシステムはひとつ。その運用を担っているのが、「プロダクトチームが高品質なユーザー体験を迅速に構築できるようにすること」をミッションに掲げるデザインシステムチームである。

 同チームでシニアソフトエンジニアを務めるOlena Musatova氏は、「デザインシステムがプロダクトに適切に用いられ、製品チームがそのための使いかたを理解できるようにすること」がそのミッション達成のカギだと語るが、そこに至るまでには苦労があったようだ。

 時は2018年まで遡る。同じくデザインシステムチームのシニアデザイナー Pim Strengers氏をはじめとしたデザイナーが集まり、デザインシステムのUIとコンポーネントを定義した。そうやって作成されたのが同社初のデザインシステム「BUI(Booking User Interface)」だ。

 BUIを最初にリリースした当時は誰もが胸を躍らせ、コンポーネントの使用にもまったく問題がなかった。しかしそれから5年後、新しいボタンのリリースを知らせる投稿には、3人からしかリアクションを得られないなど社内の関心は薄れていった。アップデートに関わる人が、ユーザーとなる社内のメンバーにいなかったのだ。それが、同社が直面したデザインシステム導入における課題であった。それをきっかけに、同チームはアプローチの方向転換を行った。

「どうすればデザインシステムを好きになってもらえるのか。私たちのデザインシステムやコンポーネントを使用することに気分を高めてもらうにはどうすれば良いのか。そしてどのようにユーザーを夢中にさせることができるのか、にフォーカスすることにしました」(Strengers氏)

Booking.com シニアデザイナー Pim Strengers氏
Booking.com シニアデザイナー Pim Strengers氏

Booking.com流、プロダクトへの信頼を高める取り組みとは

 デザインシステムを好きになってもらうための取り組みの軸はふたつ。ユーザーとの良好な関係構築を指す「プロダクトへの信頼」と「技術的統合」だ。

 まずStrengers氏は、プロダクトへの信頼を構築するための取り組みを4つ紹介。最初に挙げたのが「デザイナーと開発者の体験に焦点を当てること」だ。Booking.comでは、プロパティに一貫性のある命名ルールを取り入れただけでなく、デザインと開発の両方で一貫性が生まれるよう、すべてのプラットフォームで使われている全コンポーネントに対し中央集権的な役割を果たす「デザインAPI」を作成した。

 次に挙げたのが、「コンポーネントは柔軟でありながらも、厳格なガイドラインを用意すること」である。Strengers氏はその狙いについて、次のように説明した。

「製品チーム自身が実際に必要な方法でコンポーネントを使用できるよう、より汎用的なコンテナやスロットで提供することで、コンポーネントの柔軟性を保ちたいのです。しかし、製品を無法地帯にしないためには、門番のような役割が必要です。そのために私たちは、厳格なガイドラインを用意しています」

 同じような観点から、「質の高いドキュメンテーション」もポイントに挙げた。同チームがデザイナーと開発者を対象に実施した調査では、デザインシステムを使うことでデザイナーの効率が24%以上改善し、iOS開発では100%以上の効率化が図れたことがわかった。しかし「開発者もデザイナーも、ドキュメンテーションに多くの時間を費やしていることがわかりました」とStrengers氏。そこで、検索のしやすさ、実際のユースケースを用いたビジュアルサンプルの導入といった改善を行うことで「さらにこの数字を伸ばすことができます」と続けた。

 最後に触れたのが、「安定したリリースサイクルの確率」だ。デザインシステムは常に改善を加えて進化させたいところだが、互換性のない変更が加わると、体験、ガイドライン、ドキュメンテーションなどの取り組みも台無しになってしまう。そこでBooking.comでは、リリースサイクルを固定化し、大型リリースを行うのは年1回に。あわせて、1ヵ月前に新しいアップデートを試すことができる期間や、アップデートプロセスを自動のマイグレーション(移行)スクリプトを用意しているという。

 このような取り組みを紹介しながら、コミュニケーションの重要性も強調。「ユーザーには最新情報を知ってもらう必要がある」からだ。その一環として、月次アップデートではデザイナーやエンジニアといった役割に応じた情報をそれぞれ提供している。

 このように製品への信頼を築いていくことで、「サポートチャンネルに積極的に参加するなど、デザインシステムに特別な関わりを示す人たちが社内に現れることに気づき始めます」とStrengers氏。そういった、デザインシステム“ジャンキー”なユーザーとの関わりを深めることで組織全体にシステムを浸透させることができ、それがさらなる製品への信頼につながると語った。

※この続きは、会員の方のみお読みいただけます(登録無料)。