ASOS、Figmaでデザインワークフローを簡素化

ファッションおよびコスメの小売企業であるASOSは、世界中の20代にとって定番のショッピング先となっています。それも不思議ではありません。ASOS Design、Topshop、Topman、Collusionといった自社ブランドを含む約900ものブランドから、幅広い商品を選ぶことができます。

またASOSは、簡単な返品対応や、デスクトップ/モバイルWeb、Android・iOSアプリにわたって一貫したエンドツーエンドの体験を提供する、遊び心がありストレスのないカスタマーエクスペリエンスでも知られています。

さらに、10言語・200以上のマーケットで展開し、各国の決済方法に対応することで、ユーザーにローカライズされた体験を提供しています。

ご想像のとおり、デザインはASOSのあらゆる取り組みにおいて極めて重要な役割を果たしており、それがFigma導入のきっかけとなりました。その結果、ASOSはデザインシステムを効率化し、コスト削減を実現するとともに、高度なツールやプロセスを手に入れ、ビジネス全体でのコラボレーションを強化しました。

オンラインファッションならではの市場機会

ファッションEC業界は、パンデミックを通じて急速に成長し、現在もテクノロジーや物流の世界的な進化とともに成熟を続けています。

消費者は、競争力のある価格、オンライン限定のセール、パーソナライズされたマルチチャネルの購買体験といった、ECならではの利便性とスピードを高く評価しています。また、ソーシャルメディアを通じてブランドの着こなしを共有し、互いに影響を与えることで、商品がバイラルに広がることもあります。

ASOSのプロダクトデザイン責任者であるKate Brook-Hartは、そのため、購買体験の前・最中・後にわたるデジタルプロダクトのライフサイクルを捉えることが不可欠だと語ります。その考えのもと、彼女のチームは、これらすべてのタッチポイントが発見からデザインに至るプロセス全体で表現されるようにしています。その実現に欠かせないのが、強固なデザインシステムです。

強く結びついたデザインチーム

ASOSのプロダクトデザインチームは、アソシエイト、ミッドレベル、シニア、リードなど、さまざまなレベルのデザイナー十数名以上で構成されています。

• プロダクトデザイナーはデジタルプロダクトチームの一員として、2名のプロダクトオペレーションマネージャーの支援のもと、25名以上のプロダクトマネージャーと密接に連携しています。
• 各デザイナーは、獲得・エンゲージメント、ショッピング、支払い、チェックアウト、購入後体験といった特定のプロダクト領域、あるいはフェイス&ボディ、スポーツウェア、学生向けといったミッション別チームのいずれかを担当しています。
• また、さまざまなプラットフォームチームに所属するエンジニア、アーキテクト、QAエンジニアと緊密に協業しながら、アイデア創出から構築、テスト、実験、そして新機能のリリースまでを進めています。

チームには、チェックアウト領域を担当するリードプロダクトデザイナーのJack Marsdenと、同じくチェックアウトで活躍するプロダクトデザイナーのSean Conlonも在籍しています。

2022年4月にASOSに入社して以来、Seanはリサーチからハイフィデリティデザインの制作まで、エンドツーエンドのデザインを専門としてきました。彼は次のように語っています。「ASOSでデザイナーとして働く中で原動力になっているのは、自分の仕事が生み出すインパクトです。自分のデザインは世界中の何百万人もの人に使われ、ビジネスの成果にも大きな影響を与える可能性があります。それが本当にやりがいにつながっています。」

また、Kateのチームにはアクセシビリティの専門家であるTzveta Dinovaも在籍しており、社内外におけるダイバーシティ＆インクルージョンの推進に力を入れています。「新しい機能がすべての顧客にとってインクルーシブであることを大切にしています。そのため、ユーザーの声に丁寧に耳を傾け、各プロジェクトごとに詳細なアクセシビリティデザインのドキュメントを作成しています」とTzvetaは語ります。

ASOSの大きな特徴の一つは、プロダクトデザイナー、プロダクトマネージャー、そしてビジネス全体にわたる多様なステークホルダーが、テクノロジー＆データ、コマーシャル&カスタマー、ピープル&オペレーションという3つの中核チームを軸に、密接に連携している点です。

3つのツールをFigmaに統合

ASOSがFigma導入に踏み切る以前は、デザイン用、ファイル管理・コラボレーション用、プロトタイピング用の3つの主要ツールを使い分けていました。この構成は、デベロッパーとその協業者の双方にとって、いくつもの課題を抱えていました。

デザイン、プロトタイピング、開発者への引き継ぎのために、常に3つのツールを行き来する必要があったのです。さらに、コンポーネントのバリアントを切り替える際には、保存やクローズが必要で、アイデア出しやデザイン作業のスピードと効率を大きく損なっていました。「デザインシステムのコンポーネントを呼び出したり、その場で変更を加えたり、あるいは単にファイルを開くだけでも、泥の中を進んでいるような感覚でした」とJackは振り返ります。

また、ステークホルダーからフィードバックを得たり、エンジニアがデザインにアクセスできるようにしたりするために、リンクやファイルのコレクションを別途用意する必要もありました。さらに、ファイルへのアクセスや更新のプロセス自体が遅く、デザイナーはブランチを作成してコミットしなければなりませんでした。デザインはリアルタイムで更新されず、リモートでのアクセスも不可能だったのです。

Figmaへのオンボーディング、そして本格活用へ

Figmaへの移行は、あらゆるレベルのプロダクトデザイナーから要望され、推進された重要なステップでした。

Kateは次のように振り返ります。「私が初めてFigmaを使ったのは、Covidの時期でした。それまでこのツールを試したことはありませんでしたが、全員が在宅勤務となり、対面でのやり取りができない状況で、「今やるしかない」というタイミングだったんです。『リアルタイムコラボレーションができるなら、まずは使ってみよう』と思いました。実際、わずか2日でFigmaを完全に使いこなせるようになりました。」

Figmaは、ASOSのデザイナーが抱えていた特有の課題を解決しました。コマーシャル、スタジオ、マーチャンダイジングなど、デジタルプロダクト開発に関わるチームが非常に多く、ファイル共有は大きな課題だったのです。Figmaによって、ファイルを移動しても変わらないリンクを共有できるようになり、これはまさにゲームチェンジャーでした。

現在、Figmaの主な編集者はプロダクトデザイナーですが、シングルサインオン(SSO)による安全なアクセスにより、ビジネス全体のさまざまなメンバーが簡単にファイルを閲覧・コラボレーションできます。

これには、エンジニアリング、プロダクト、マーケティング、ブランド、トレード、コマーシャルに加え、人事、財務、監査、物流・配送チームのメンバーも含まれます。Figma上では、これらのメンバーがプロダクトチームと同時にコラボレーションでき、時間・コスト・工数の削減につながっています。

現在ではFigmaは、顧客体験全体に関わるあらゆるデジタルプロジェクトにおいて不可欠な存在となっており、スタジオチームが現場でアセットを制作するために使用する社内ソフトウェアなど、内部向けの体験にも活用されています。

FigmaがASOSにもたらした5つの改善ポイント

1. デザインスピードの向上

• Figma導入以前は、複数のツールを使っていたため、デザインプロセスがシームレスではありませんでした。すべてのファイルはローカルに保存され、その後ファイル共有プラットフォームへアップロードされていました。
• クラウドベースで高速に動作し、オートレイアウトのように要素を柔軟に出し入れできる機能を備えたFigmaは、デザインスピードを大きく向上させています。

2. プロトタイピング

• Figma導入以前は、実際に近いプロトタイプを作成し、ユーザーテスト用のリンクを共有するために、別のツールが必要でした。
• Figmaでは高い忠実度でのプロトタイピングが可能で、しかもその場で更新できるため、ユーザーテストの段階で時間とコストを削減できます。

3. コラボレーション

• 以前は、デザインファイルをメールで共有しており、フィードバックを集めるまでに複数のステップが必要でした。
• Figmaにより、単一のリンクを共有するだけで簡単にコラボレーションや直接的なフィードバックが可能になり、デザインレビューや一貫性のあり方が大きく変わりました。これにより、ビジネス側のステークホルダーも、容易に直接フィードバックを残せるようになりました。

4. デザインシステム

• Figma導入以前、ASOSのデザインシステムは分断されていました。
• Figmaを活用することで、デザインシステムに携わるデザイナーは、使いやすく、維持管理もしやすい形でシステムを運用できるようになり、ライブラリのコンポーネントをデザインへスムーズに実装できるようになりました。

5. プレゼンテーション

• Figma導入前は、プロトタイプを使ったプレゼンテーションは必ずしも簡単ではありませんでした。
• Figmaのプロトタイピング機能により、デザイナーは文脈の中でプロトタイプを提示でき、プレゼンテーション資料に臨場感を与えることができます。

FigmaがASOSにもたらした具体的な成果

Figmaの導入により、ASOSは3つのツールを1つに統合することができました。これにより、デザインワークフローが大幅に効率化され、チームの作業時間を何時間も削減し、ビジネス全体としてのコスト削減にもつながりました。

またFigmaは、デザイナー、プロダクトマネージャー、エンジニア間のコラボレーションを強化するとともに、デザインシステムを見直し、改善・最新化する機会をASOSにもたらしました。これは、最新のデザインツール環境を維持することで、新たな人材を惹きつけることにも貢献しています。

総じてKateは、Figmaによってデザイナー同士、そしてビジネス全体のステークホルダーとの間で、コラボレーション、生産性、プレゼンテーションが格段に容易になったと語ります。「その結果、最終的なデザインの品質が向上し、デベロッパーへの引き継ぎも非常にスムーズになりました。これにより、ビジネス全体でデザイナーとデベロッパーの距離が、これまで以上に近づいています。」