よい仲間と共に: 小売業者がFigmaを使用してeコマースを高める方法

循環経済を促進する場合でも、異なるデジタルタッチポイント間での翻訳を行う場合でも、電子商取引の世界はより洗練されたものになっています。信頼を構築し、スムーズなカスタマージャーニーを促進し、一貫したブランドストーリーを伝えるためには、一貫性があり魅力的なデジタルエクスペリエンスが不可欠です。

私たちは、主要ブランドのチームに話を聞き、Figmaを使用して目標を達成し、プロセスを進化させている方法を学びました。ここでは、Nuulyが服のレンタル物流をどのように処理しているか、Ruggableがeコマースとマーケティングの接点をどのように結びつけているか、そしてDesign Business CompanyがGitHubと連携して開発者向けのストアフロントをどのように構築したかを紹介します。

Nuulyが衣料品レンタルのユーザーエクスペリエンスを効率化する方法

一部の企業が特別なイベントのための衣服レンタルを一般化している中、2019年に設立されたNuulyのような新興企業は、普段着のレンタルを主流にしようとしています。「Nuulyでは変化のアイデアを高く評価しています」とNuulyのユーザーエクスペリエンスディレクター、Laura Petrini氏は言います。「私たちはお客様にスタイルを変える機会を提供しています。お客様はそれを通じて自分を表現し、ワードローブを創造的にすることができます。」

この約束を果たすために、Nuulyはシームレスなレンタル体験を構築し、今ではサブスクライバーによる認知度や評価も高くなっています。衣料品のサブスクリプションサービスはまだ新しいので、Nuulyは、循環型在庫管理、クリーニング、修理など、レンタルの他の側面を強化する多くのテクノロジーを自ら構築しました。具体的には、独自の目標とスケーリングビジネスを念頭に置いて、お客様向けとレンタルロジスティクス向けの2つのデザインシステムをゼロから作成しました。「私たちは、簡単に交換できるカラーとタイプのトークンを使ってデザインシステムを設置しました。これによりブランドが季節の変わり目と共に成長できるようになり、そしてお客様もスタイルを柔軟に変えることができます」とLauraは言います。

レンタル物流の技術は複雑ですが、Nuulyの目標は顧客が新しい買い物方法にできるだけ簡単に適応できるようにすることです。「私たちは体験をその最もシンプルで直感的な形にまで分解しました」とLauraは言います。例えば、サイトの「My Nuuly」機能は顧客のNuulyバッグを表し、今起こることから次に起こると予想されることまで、26以上の可能なレンタルステータスで顧客を案内します。

この複雑さの背後にあるデザインシステムを管理し、スケールアップするために、チームは2023年にFigmaを採用しました。「従来のデザインシステムはファイルサイズの制約のために分割されており、さらにサーバーと同期する必要があるため、パフォーマンスは遅かった」とNuulyのプリンシパルUXデザイナーであるErica Benamyは言います。「最終的に合計16のファイルを管理することになりました。Figmaへの移行をきっかけとして、単純な2つのFigmaライブラリに集約し再構築することにしました。」

Figmaの活用により、ワークフローが大幅に加速しました。「私たちははるかに速いペースでデザインしています」とEricaは言います。Figmaのネイティブなプロトタイプツールを使うことで、デザイナーはデザインのハンドオフ時に、開発者に期待されるインタラクションパターンをより良く伝えることができるようにもなりました。Ericaは「私たちは組織として、より機敏で、互いに非常に調和のとれた状態になっていると感じています」と言います。

NuulyがUXをFigmaに移行したことは、他の部門にも同様の動きを促しました。コンテンツデザインチームとスタジオ写真チームも、UXチームとあわせてFigmaでデザインを行っています。FigJamやFigma Slidesのようなコラボレーションツールを使って、Nuulyのビジネス全体が協力し、ブレインストーミングし、カスタマージャーニーの改善をレビューしています。例えばThe Thrift Shopなどがその対象で、ここではサブスクライバーはレンタルしなくても購入が可能な最終販売スタイルにアクセスできるようになります。

これはNuulyの顧客の体験の強化と革新が迅速になることを意味します。Nuulyのチームにとって、これは協力や創造的な探求にかける時間が増えることを意味します。また、Nuulyがサブスクライバーとの関係を強化するのに役立つ、顧客中心のデザイン思考に費やす時間も増えることになります。

Ruggableがデジタルサーフェスの一貫性を保証する方法

6年前、ユーザーエクスペリエンス (UX) プロダクトデザインのディレクターであるAlicia ClapperがRuggableに参加したとき、彼女はいくつかの並行した、サイロ化されたワークフローに直面することになりました。その結果、ソーシャルメディアの広告から、ホームページ、製品詳細ページに至るまでのデジタルプラットフォーム全体で不調和が生じ、その結果、統一感のないカスタマージャーニーとなっていました。Ruggableの買い物客がラグを閲覧してから購入するまでに10日以上かかることも多いため、これらすべてのタッチポイントで一貫性を持たせることが重要でした。特に競争が激化する環境においては非常に重要です。

「歴史的に、UXとeコマースのチームはブランドやクリエイティブからかなり離れていました」とAliciaは言います。ソーシャルキャンペーンで使う画像と、Webサイトで使う画像が別のものであることも多くありました。「もう一方のチームが何をしているのか、お互いほとんどわかっていませんでした。その状態が、公開の瞬間まで続くのです。」

その原因の一つとして、作業が複数のツールに分散され、Google Driveで手動で共有されていたことがあげられます。一元化されたコンポーネントライブラリがないため、色やフォントスタイル、ボタン、フッターのような要素を管理するのが難しかったのです。「私たちは単にページ間でコピー＆ペーストし、プロジェクトとコンテンツに基づいて編集していました」とAliciaは言います。「それはまったくの手作業で、その結果プロジェクトごとにミスが生じる可能性が高くなっていました。バージョン管理が存在しなかったため、私たちはコピーしているファイルが最新のものなのかを毎回確認する必要がありました。私はこれをデザインシステムの『管理』と読んでいいのかすら分かりません。」

5年前、UXチームはFigmaへの移行を開始し、物事を整合させるために取り組みました。現在、彼らはデザイン、プロトタイプ、および新しいデザインのテストをすべて1つの場所で行うことができます。さらに、デザインから開発への移行は、Dev Modeのおかげでこれまでの10倍速くなっています。手動でアノテーションを作成する代わりに、デザイナーはチェックボックスをオンにすればファイルを準備できます。「これは完璧だと感じました。他に何も必要ありません。」Aliciaは言います。現在は、デザイナーと開発者の間のやり取りが減り、デザインのどのバージョンが最新かも明確になっています。

Ruggableのブランド、クリエイティブ、リテンション、およびアクイジションの各チームが、Figmaにコラボレーターとして招待された後、プラットフォームにも参加しました。「ブランドにより適していると感じる具体的な点についてコメントできるよう、リンクを簡単に共有することで、クリエイティブチームにも参加してもらうことができました」とAliciaは言います。「2024年のリブランド後にFigmaでデザインシステムを更新し実装することが簡単だったため、他のチームも使いたいと思うようになりました。これは、幅広い導入への大きなきっかけとなりました。」現在、Aliciaは複数のチームをFigJamに招き入れ、部門横断的な会議やブレインストーミングセッションを行っています。「あるプロダクトマネージャーは、会議が楽しく、魅力的で生産的であるとコメントしています」と彼女は述べています。

この新しいエンゲージメントとコラボレーションの基準は、一貫した顧客体験を創出するために不可欠であり、ブランド構築の鍵です。「親しみのあるものが人々に響くのです」とAliciaは言います。「それによりブランドへの信頼が強化され、顧客は探しているものを見つけて購入することができます。」

GitHubとDesign Business Companyが開発者たちに歓迎される理由

GitHubは人気の開発者プラットフォームとして、オンラインのショップを活用してブランドを強化し、コミュニティを構築する機会を見出しました。これを実現するために、GitHubはクリエイティブスタジオDesign Business Companyとチームを組んで、コーディング関連のコレクティブル、アパレル、ライフスタイル商品を提供する、すぐれたショッピング体験をShopifyで作り上げました。このプロジェクトには新しいデザインシステム、ブランド商品、製品写真撮影、パッケージングが求められ、すべてFigmaで完成しました。このデザインの刷新では、GitHubチームがストアの煩雑な手動更新を行わずに済んだだけでなく、GitHubのブランドアイデンティティを物語る、開発者向けの「イースターエッグ」を追加するスペースを作り出しました。

DBCoはStewart Scott-Curran、Judson Collier、およびJordan Egstadによって設立されました。かつてデザイン業界で支配的だったエージェンシー優先のフレームワークから離れ、プロジェクトごとにクライアントチームの中で活動します。DBCoは、数週間あるいは数か月ごとにアイデアを提示するのではなく、設計している内容やその方法を明示することにより、クライアントとの継続的な会話を作り上げます。通常、クライアントはレスポンシブで柔軟なワークフローを期待する初期段階および中段階のスタートアップです。「クライアントのおかげで、私たちは方向性を迅速に修正できます」とJordanは言います。「そのため時間を大幅に節約できます。」

プロジェクトが始まるとすぐに、DBCo はクライアントを共有Figmaムードボードに招待しました。ここでは、全員がアイデアを投稿し、コメントを残すことができます。「これはフィードバック収集の最前線となります。得られるデータのコンテキストと詳細度はそれだけ大きいものです」とJudsonは言います。ストアの再設計には、GitHub のショップ、ブランド、デザイン、およびウェブチームのステークホルダー、そしてアクセシビリティコンサルタントを含む20人以上の人々が関わりました。ファイルの内容すべてをマッピングすることで、コラボレーターはいつでも簡単に参加し、プロジェクトに専念できるようになりました。

ブレインストーミングのフェーズの次は、デザインシステムの構築です。プロセスを迅速に進めるため、DBCoは独自に構築した「Constructデザインシステム」という汎用の基盤を使用します。これはFigmaバリアブルを用いて設定されています。開始フレームワークとして、Constructは「十分に役立つシステムであるが、一方で制約が多すぎない絶妙なバランスを保っている」とジョーダンは述べています。また、1日半かかっていた作業をわずか30分に短縮することができるとも述べています。

プロトタイプもプロセスの重要な部分であり、特に商品ページを稼働させる際に重要でした。これらのデザインは、大きさ、色、カスタマイズなど、8つのバリアントを含むことが多く、条件付きのUIや「開発者がオタクじみた個性を発揮する瞬間」(Jordan談) が必要でした。たとえば、誰かがコナミコードを入力すると、サイトの画像がASCIIアートに変わります。「開発者は単語や文字を道具として使うので、私たちは『これらの言葉に命を吹き込む方法を見つけなければならない』と考えました」と彼は言います。「私たちは様々なモーションスタディを考案し、プロトタイプに取り入れて、インターフェースが異なるトランジションやボタンホバー状態などにどのように反応するか、実際に感じ取ることができました。」GitHubでデザインを視覚化し、具体的に感じ取ってもらうことは、決定に至る上で非常に役立ちました。」

最終的に、同じファイルで複数のチームと協力できたことは、GitHubの非常に目の肥えたオーディエンスに対して、閲覧からチェックアウト、配送に至るまでの一貫した小売体験を提供することにつながりました。「欠点があれば開発者にすぐに見抜かれます」とJudsonは言います。「私たちは、開発者の形式と仕事に対して忠実であることを確実にする必要がありました。どんなことをするにしても、基準を高くしようとしました」

今日の電子商取引は、ただ顧客に「カートに追加」をクリックさせるだけのものではありません。市場の拡大に伴い、ブランド認知から実際の購入に至るまで、カスタマージャーニーのすべてのステップで卓越したデジタル体験がますます重要になります。チームが大胆なアイデアをブレインストーミングし、素早くプロトタイプを作成し、顧客に届けるスペースを創出することが不可欠です。チームでのFigmaの利用の詳細をご覧の上、デモをリクエストしてください。