ZivameのUXデザインチームがマルチウェイ製品の発見をどのように可能にしたか

これは、ZivameのUXディレクターであるUditKhandelwalによる5部構成のゲストブログシリーズの最初のものです。

ユーザーがそれを見つけることができない場合、その機能は存在しません！ –ヒューマンファクターインターナショナル（HFI）

私は2012年にHFIでのトレーニングセッションでこの引用を最初に聞きました、そしてあなたはいつもそれがUXにアプローチする私の方法に共鳴しているのを見つけるでしょう。

製品の発見は小売業の最も重要な側面の1つであり、ユーザーが提供する製品を見つけられない場合、それらは存在しません。 Zivameでのシームレスな製品探索を可能にするために、プラットフォーム全体で多方向の発見戦略を開発しました。 この5つの記事のシリーズでは、コレクションの特集、製品の発見、およびZivameでのコミュニケーションの提供に使用されるレバーについて説明します。

これはこのシリーズの最初の記事であり、ここでは主に以下のレバーのリストから砕氷船の下のアイテムを取り上げます。

これらのそれぞれは、ユーザージャーニーで非常に特定の目的を果たし、それに応じて使用されます。 それぞれの場合の課題と、それを克服するために私たちが何をしたかについて話しながら、それらを1つずつ見ていきましょう。 また、該当する場合は、ビジネス指標についても説明します。

ホームページの入国カード

チャレンジ

• ZivameのWebトラフィックの45％は、初めてのユーザーで構成されています

• 直接およびオーガニックトラフィックの40％がZivameのホームページにアクセスします

• 上記のユーザーのほとんどは、私たちが提供する製品の幅についてほとんど手がかりを持っていません

解決

開いた水平メニューがなく、モバイルファーストのハンバーガーナビゲーションを使用することは、非常によく考えられ、ユーザーがテストしたアプローチであり、新しいスタックを使用して開始しました。

それは、私たちの製品について率直に話さないという代償を伴いました。

したがって、最初の段階で同じことを伝えることが重要になりました。 以下に示すカードはまさにこの目的を果たします。

興味深いのは、以下に示すように、このアプローチが最初にデスクトップ用に概念化され、後にモバイル用に適応されたことです。 デスクトップ版では、

カードは最初の折り目で一番上の不動産を占めますが、モバイルでは、垂直方向のスペースの制約により、カードはヒーローバナーの真下にあります。

私たちがこれを概念化していたとき、私たちの幹部はそれを次のように想像していました。

Zivameがランジェリー、アパレル、アクティブウェアを販売していることを知らずに、私のホームページで8秒を費やす人は誰も立ち去るべきではありません。 – Shaleen、COO Zivame

…そして、私たちはデザインを介して同じことを達成するのに良い仕事をしたと思います。 カードの配置はカードを必見にし、タイトルとリンクは、ランジェリー、アクティブウェア、アパレルなどの個々のカテゴリについて明確な期待を設定します。 さらに、4枚目のカードは最初の折り目に座るに値するメタアイテムを置くのに十分な柔軟性を可能にします。
PSこのコンポーネントは、私がこの投稿を書いている時点で開発中であり、まもなくリリースされます！

（また読む：Zivameでのユーザーエクスペリエンスの形成：製品管理のケーススタディ）

努力

会社のすべての利害関係者が自分の資産のための最高の不動産を探しているので、各カードに4つのものが入るかどうかを判断するのは難しいです！
データは簡単な脱出ルートのように見えますが、最も需要の高いものを上に置くだけでよいのですが、ビジネスの方向性は相反する可能性があります。 たとえば、アパレル自体は、今日の時点でZivameの収益のわずか8％にしか貢献していませんが、上位の不動産の25％を占めています。

会社の幹部からのかなりの量の節度を伴う部門横断的なコラボレーションは、あなたに正しい答えを与えるはずです。 私の製品マネージャーが言うように：

あなたは彼らの不釣り合いな成長を確実にするために特定の実体に不釣り合いに親切でなければなりません。 – Vishrut Shukla、シニアPM – Zivame

ホームページヒーローカルーセル

チャレンジ

• これは次の主要な不動産であり、プロパティは視覚的です。 それはブランドを表す必要があり、厳格なビジュアルデザイン言語に従う必要があります。

解決

率直に言って、これは設計は簡単でしたが、実行するのは困難でした。 大胆で美しいデザイン言語に従っていることはわかっていたので、バナーは画面幅の100％、残りの画面高さの100％を占める必要があるというのは簡単な決断でした。 しかし、それは私たちに解決すべき2つの問題を残しました：

• 特定の画面サイズでは、 「カバー」アルゴリズムを使用するため、バナーがトリミングされていました。

• バナーが画面の下端まで伸びると、ユーザーはページがそこで終了し、それ以上のものがないという幻想を抱く可能性があります。

トリミングの問題を解決するために、安全な領域を定義し、複数の解像度でテストしました。 数回のヒットと試行の後、私たちはそれを釘付けにすることができました。
バナーの下部にシェブロンを配置して、バナー以外にもあることをユーザーに視覚的に知らせます。 きれいに保つために、ナビゲーション矢印を一方向にすることにしましたが、ドットベースのナビゲーションを配置することでスライドショーの手がかりを与えました。

ユーザージャーニーを念頭に置いて、適切なメッセージを作成し、カテゴリページのバナーとつなぎ合わせて、適切なバナーを作成するために、多くの部門の枠を超えたコラボレーションが行われました。 上記のセクションにはスクリーンショットの例が表示され、以下はセーフエリアを定義する方法です。

注目のコレクション

チャレンジ

• バナーは注目を集めるのに適していますが、ユーザーの関心を高め、ユーザーが正しい期待でクリックできるようにするには、コレクションについてもう少し説明する必要があります。 ただし、不動産は限られており、さまざまなコレクション間で多くの競争があります。
• Zivameのモバイル向けホームページの以前のデザインは、各コレクションに10個の製品の配列があり、最後のサムネイルまでスクロールした後に[もっと見る]ボタンが続くコレクションのアコーディオンを備えていました。 データ分析により、アコーディオンを操作した40％以上のユーザーがクリックして詳細を表示したことが明らかになりました。 これは、上記の点を補強します。 ただし、アコーディオンは非視覚的でテキストが重いため、使用したくありませんでした。

  

• 事前に多くの商品画像を読み込むと、ページのパフォーマンスに悪影響を及ぼします。 ページの読み込み時間が1秒増えるごとに、コンバージョンは7％も減少します。

解決

追加のクリックを犠牲にして、USPとすべてのコレクションのスニークピークを表示します。 製品のコラージュとは別に、3つの重要な情報を明らかにしました。

1. コレクション名
2. 説明
3. 署名属性

これは、コレクションへの関心を呼び起こすだけでなく、ユーザーを一定の期待を持った製品発見の旅へと導きます。 商品のコラージュは、複数の商品の画像ではなく、単一のコラージュ画像として返されるように技術的に最適化できます。 繰り返しになりますが、このバージョンは現在のサイトに部分的に展開されており、残りはこの記事を書いているときに実装されています。

Zivameにアクセス

カテゴリマストヘッド

チャレンジ

• カテゴリページは、有料トラフィックの主要なランディングページです。 また、サイト内のコレクション/オファーバナーのいずれかをクリックすると、カテゴリページが表示されます。 したがって、ここでユーザージャーニーをつなぎ合わせ、コンテキストを維持することが重要になります。

• カテゴリが広いほど、ユーザーが選択するのが難しくなります。 したがって、特定のケースでは、ユーザージャーニーをより具体的なサブカテゴリに絞り込み、続いて特定の製品に絞り込みたい場合があります。

• 特定のカテゴリは非常に特別または新しいものであり、ユーザーはページにアクセスした瞬間にUSPを認識する必要があります。

解決

マストヘッドは4つの主要コンポーネントで構成されています。 構成可能なコンポーネントが上記のユースケースを処理するアプローチを考え出しました。マストヘッドにバナーを配置し、クリエイティブバナーに依存して、買い物をし、ツールバーをフィルター/並べ替え、残りを行うための通信を提供します。
ここでバナーについて説明し、「ショップバイ」とオファーについては後で説明します。 カテゴリバナー用に3つのバリエーションまたはテンプレートを設計しました。

1. シングルバナー
2. カルーセル
3. 分割バナー

単一のバナーは、狭いカテゴリやUSPについて話す場合に最適です。 一方、カルーセルとスプリットバナーは、限られた不動産内に複数のバナーを提供するための優れた方法であり、サブカテゴリにつながるために使用されます。
これらのページのいずれかを宣伝する場合、デジタルマーケティングおよびクリエイティブチームは、マーケティングクリエイティブが同じ言語を話し、同様の画像を使用してユーザージャーニーをつなぎ合わせるようにします。

ホームページのヒーローバナーと同じように、これらのバナーは使用可能な幅の100％を占めますが、高さは一定です。 したがって、場合によっては（または解決策）、バナーを右からトリミングすることになります。 そのため、ホームページと同じように、安全な領域を定義し、クリエイティブチームは、これらのバナーをデザインする際に同じことに従うように求められました。
以下は、分割バナーに対して同じものを定義した例です。

警告

これはモバイルファーストの設計ではなく、優雅な劣化に続いて、モバイルではシンプルなバナーまたはスワイプ対応のカルーセルにフォールバックします。 携帯電話用の分割バナーはありません。

アプリのオンボーディング

チャレンジ

• ユーザーに多くのことを伝えたいのですが、オンボーディング中に4枚を超えることはやり過ぎです。 スペースには限りがあり、機能は膨大で、ユーザーは読む時間がありません。それにもかかわらず、アプリを使い続ける必要があります。

• 誰が閲覧しているのかわかりません。初心者か専門家か、探検家かナビゲーターか。 そして、すべてのオンボーディングエクスペリエンスに適合するように設計する必要があります

解決

ユーザーに伝えたいことを考えるのではなく、逆に考え始めました→ユーザーは何を学びたいのでしょうか？ 簡単なディップスティックの調査により、ユーザーが主に次の質問に対する回答を探していることがわかりました。

1. これは何ですか？
2. ここで何ができますか？
3. どうやって始めるのか？
4. 私にとって何が含まれていますか？ それはどのように私を助けますか？

したがって、問題は、これらの質問に答えることができる4つの画面に単純に縮小されました。 したがって、次の4つの画面をゼロにしました。

最後の画面はFitCodeを宣伝するように巧妙に設計されていますが、ユーザーはそれをスキップして買い物を続けることができます。

警告

いくつかの不具合がありますが、現在修正中です。次の点について警告します。

1. 通知許可のポップアップがオンボーディング画面に表示されます。 これはユーザーにとって非常に苛立たしいことであり、ここでは最小限の変換しか得られない可能性があります。 代わりに何をすべきか–特定のイベント（ログイン、注文の成功、コンテンツへのアクセスなど）が発生した後、通知許可を求める必要があります。
2. Webエンゲージメントメッセージ（マーケティングポップアップ）は、オンボーディング中に表示されることがあります。 繰り返しになりますが、これは非常に悪い経験であり、ユーザーはオンボーディング中にマーケティングメッセージを受け入れない可能性が最も高くなります。 オンボーディング画面にポップアップが表示されないように注意する必要があります。

FitCode

チャレンジ

• 多くの女性は、オンラインで購入するよりも実店舗で購入することを好みます。 これの最も一般的な理由の1つは、特定の製品が自分に合うかどうかわからないことです。 彼らはそれをオンラインで試すことができません。

• ランジェリーに関しては、女性によって体型が異なり、万能なものはありません。 したがって、彼らの体の形や好みに合った製品を彼らに提示することが重要です。

• あなたが彼らに彼らの測定と好みを記入するためのフォームを与えるならば、ドロップオフは高いです。 したがって、私たちが思いついた解決策が何であれ、効果的である必要があります。

解決

Zivameのファッションデザインチームは、プロダクトマネージャーとともに広範な調査を実施し、女性の体型を11種類のプロファイルにまとめることで正確に記述できると推測しました。

これらのプロファイルを測定値や好みとともにまとめると、ユーザーに適切な製品の推奨事項を提供できるはずです。 これをFitCodeと呼びます。これは、ユーザーに一連の質問をすることで得られます（FitCodeクイズ）。
このバージョンは、アプリで設計、ユーザーテスト、実装、リリースされました。 ユーザーがコンセプトを理解してクイズに回答している間、2つの明白な問題がありました。

• ドロップオフの数が多い
• プロファイルを表すために使用した画像は不気味だと考える人もいました。

クイズは、最初にユーザーに難しい質問をするように設計されており、このアプローチを変更する必要があると考えました。 最初に簡単な質問をしてから、難しい質問をして、ユーザーに投資してもらう必要がありました。 また、クリエイティブを変更して、より抽象的なものにしました。 彼らはもう不気味ではありませんでした。 以下の画面をご覧ください。

完璧にフィットするものを見つける

この記事が有益で洞察に満ちていることを願っています。

世界のトップ大学からオンラインで製品管理コースを学びましょう。 マスター、エグゼクティブPGP、または高度な証明書プログラムを取得して、キャリアを迅速に追跡します。

あなたのための注目のプログラム：デュークCEからのデザイン思考認定プログラム

多方向の製品発見とはどういう意味ですか？

製品の発見とは、顧客のタッチポイントに初めて到着した顧客が、会社が提供する製品に関する情報を学習、理解、保持する方法を指します。これにより、次にブランドをすぐに覚えることができます。繰り返しの要件があります。 これが会社のさまざまな顧客タッチポイントでの顧客体験の最初の8秒以内に行われるようにすることは、すべての製品マネージャーの目標である必要があります。 会社が複数の製品を提供している場合、目標はそれらすべてに対してこれを実現することです。 これは基本的に多方向の製品発見についてです。

eコマース企業向けの製品管理に特化したコースはありますか？

いいえ、eコマースの製品管理に固有のコースはありません。 あまり慎重ではない企業もそう主張するかもしれませんが、参加する前に資格を確認するのが賢明です。製品管理のための優れたプログラムは、学生にとって不利になるため、それほど具体的ではありません。 優れた製品マネージャーになることを可能にする目的は、業界の選択に関係なく、優れた仕事をするために必要なスキルと知識を確実に身に付けることです。これにより、キャリアの後の段階で業界を切り替えることができます。

MBAを取得せずにプロダクトマネージャーになるにはどうすればよいですか？

最も過酷なインタビューに答えることができる優れたプロダクトマネージャーになるために必要な基本的なドメインスキルは、プロダクトテクノロジーの公正な理解、プロダクトデザインとカスタマージャーニーのデザインに関する優れた知識、およびビジネス管理スキルです。 したがって、十分な技術的スキルと実務経験を持っているが、財務計画、予算編成、プロジェクト管理、マーケティング、戦略などのビジネス管理についての理解がない個人にとっては気が遠くなる可能性があります。 これらを開発するための最良の方法は、確かに、MBAを追求することを含みます。 しかし、熟練した製品マネージャーの要求のおかげで、製品管理のパートタイムコースを追求することによってこれらの役割を担うこともできます。