製品アプローチで100万以上のDAUを使用したWebサイトの再設計

最近、M.Video-Eldorado Groupの専門家の技術的な着陸が、10周年記念Product Camp Russia（＆EE）2021のサイトに着陸しました 。パンデミック後の現在のイベントにとって、それは非常にクールで明るく珍しいイベントでした。



大手テクノロジー企業の数十人の製品マネージャーが会議会場に集まり、さまざまな企業や地球の隅々にいる同僚と経験を共有しました。

会議の最も明るい報告の1つは、コア製品「M.Video」の責任者であるAndrey Pchelintsevのスピーチでした。彼は、製品アプローチの使用に関する会社のWebサイト再設計の特徴についてフォーラム参加者に話しました。



次は一人称のナレーションです。質問、考え、アイデア、提案は、この出版物へのコメントで受け入れられます。ようこそ！

こんにちは私は...

みなさん、こんにちは。─コアプロダクツM.Videoの責任者であるAndreyPchelintsevです。私たちは M.Video-EldoradoGroupの一員であり、世界の電子機器のトップ10の最大の売り手の1つです。



M.Videoのコア製品-Eldoradoは、同社のWebサイトとモバイルアプリケーションに取り組んでいる9つの製品チームです。



コロナウイルスのパンデミックによって引き起こされた危機の中で、私たちのグループは非常にダイナミックに変化し、オンラインチャネルを積極的に開発しています。私たちはすでに50％以上のオンラインシェアを持っており、ウェブサイトやモバイルアプリケーションに深刻な要求を課しています。

製品とは何ですか？また、再設計はそれと何の関係がありますか？

私たちのビジネスのすべてのレベルで、私たちは製品アプローチの実践に努めています。それが何であるかは、理論的には、さまざまなソース（tyk、tyk、tyk）で書かれています。しかし、彼らが言うように、「紙の上では滑らかでしたが、彼らは峡谷を忘れて、彼らの上を歩きました」。この記事に基づいて、私の経験と現在のプロジェクトに取り組む過程で埋められたバンプをあなたと共有したいと思います。



製品アプローチ以外の顧客との対話に焦点を合わせた最新の複雑なオンラインシステムを開発することは不可能だと思います。したがって、製品は、行われた変更の中心的なリンクです。



製品とは何ですか？私たちの理解では、製品は4つのコンポーネントに分解される全体的なユーザーエクスペリエンスです。

• 特定の技術的機能;
• 結果として得られるデザインと使いやすさの組み合わせ。
• コンテンツの記入;
• 長期的な収益化。

ウェブサイトの再設計は戦略的なステップであり、サイトの外観と機能を変更する作業です。そして、再設計自体は製品の特性に対応しており、私の意見では、製品アプローチの枠組みの中で実行する必要があります。

再設計はいつ必要ですか？

明らかに、再設計は非常に深刻な作業であり、なぜそれが必要なのか、その理由を理解することが重要です。私の意見では、下の図に示されているパラメーターは、個別であっても、再設計を引き起こす可能性があります。







繰り返しますが、上記のパラメータのいずれかが再設計につながる可能性があります。







私たちはすべてのセットを持っていました。このサイトはどのパラメータも満たしておらず、オンラインビジネスの発展に対する深刻な障壁でした。最初の段階で、サイトのインターフェースを更新しました。

操作に失敗しました！

ラッキーな再設計がいくつあるか知っていますか？何人が失敗していますか？再設計ケースの85％以上が失敗しました！



なぜこれが起こっているのかについての単一の説明はありません。私自身、これを、発生しなければならない変更の非常に複雑なことと、再設計のために誤って確立された「診断」によって説明します。



外から見ると、サイトのデザインを変更するのは非常に簡単に思えるかもしれませんが、これは小さなサイトにのみ当てはまります。 M.Videoサイトのような巨大なサイトの再設計は、数十の異なるタイプのページ、無数の相互接続された要素、およびUI / UXの最も深刻な要件があるため、深刻な課題です。



外から見ると、再設計するのが難しいのは、ビジュアル、スタイル要素、フォントなどを変更することです。どこかで機能を変更することは可能です。製品を変更するための非常に標準的な作業です。

注文事項

再設計にどのようにアプローチしますか？主な手順を見て、シーケンスを定義しましょう。私の意見では、すべてが下の図に示されている方法と同様である必要があります。







桁違いにもう少し詳しく見てみましょう。そして、計画と事実を比較します。







したがって、左側には、再設計の順序でのステップの詳細な順序があります。ここではすべてが段階的に示されています。



右側のケースを見てみましょう。私たちはユニークではなく、再設計の場合はもちろん、曲がりくねって立ち上げました。



私はすべての段階を3つの領域に分けました-すべてを間違えたときは赤、すべてを修正しようとしたときは黄色、うまくいったときは緑です。赤いブロックの終わりに私はちょうど入社しました。

ビジョンを分析して形作ることなく、期待と設計コンセプトを作成しないでください

この例を使用して、目標設定について少し話しましょう。それはすべて、私たちがお金と時間の両方の点で間違った期待を生み出したという事実から始まりました。また、現在のサイトから新しいサイトへの移動の複雑さを理解していなかったため、新しいサイトに移動するための戦略もありませんでした。重要な質問に対する明確な回答はありませんでした。

• そのまま？
• すぐに新しいものを古いものに変更しますか、それともページごとに変更しますか？
• 古いものに切り替える機会などはありますか？

当初、再設計自体についての理解はありませんでした。しかし、資金とプロセスのタイミング、そして必要なリソースの両方の観点から、すでに深刻な過大評価された期待がありました。



この段階で入社したばかりです。社内での新しいウェブサイトの販売に関するプレゼンテーション全体の中央のスライド、塗りつぶしの赤い背景、新しいウェブサイトの作成から数十億ルーブルずつ増加する白い数字を今でも覚えています。



もちろん、これらの数字は長い間皆の目の前にあり、誤った期待が最初に作成されました。通常の分析、調査、ユーザーの苦痛の理解、競合分析、そして非常に重要なビジョンはありませんでしたが、いくつかの設計コンセプト、編集、およびディスカッションが絶えず作成されました。



ビジョンはオンライン製品を構築する上で重要な要素であり、ビジョンと戦略がない状態で製品を構築することは、未知の方向に帆を使わずに航海するようなものだと思います。

償いを始めるのに遅すぎることはありません

状況に没頭した後、次のことが明らかになりました

。A。修正する必要があります。

B.新しいサイトへの移動の問題ははるかに深刻であり、一方では異なる顧客体験を許可することは不可能であり、他方では、古いサイトのビジュアルを繰り返すことを望んでいませんでした。



詳細を掘り下げ、分析し、調査する際に、再設計を通じて新しいサイトに移動するというアプローチが選択されました。再設計の目的は、サイトの新しく作成されたページの最もシームレスなCJ、つまり均一性でした。

• メッシュ;
• フォント;
• スタイル要素;
• 一般的な要素（ヘッダー、フッターなど）。
• 色やその他のもの。

基本的な移動戦略が選択されました。さらに、サイトのビジョンと製品戦略が策定され、「ポイントB」が指定されました。これは、プロセスのすべての参加者にとって単一の結果のイメージを形成する重要な要素でした。



もちろん、ビジョンを思いつくことは良いことですが、それでも、いわゆる「売り」を守るために、ロビー活動のあらゆる方法で、デザインコンセプトに植え付ける必要がありました。



世界的に、大企業では、販売段階が重要なフェーズです。これは、一方ではさまざまなレベルの利害関係者の期待があり、他方では機能に多数の利害関係者が要素を表示するためです。そして、これらすべての期待と「願い」を相互に、そしてビジョン/コンセプトと結びつけることは、絶対に簡単な作業ではありません。また、一度販売するだけでなく、将来の期待を維持し、期待を同期させることも重要です。



スタートが間違っていたために多くの作業が並行して行われていたため、この活動にかなりの時間を費やし、同時に研究、開発、必要に応じて作業を調整しました。

「オープニング」を失っても「エンドゲーム」に勝つチャンスがあります

正しい段階を「操縦」し、ビジョン、戦略、概念を作成し、開発の進め方や開始方法について議論を受けたオレンジゾーンのおかげで、活動を段階的に調整し、かなり正しい段階で最終段階に近づくことができました。プロセスの編成。



パイロット段階の準備が整い、段階的なパイロットの実施、指標の収集、実装の検証、必要に応じて調整を行い、徐々にすべてを食品に正しく展開するように取り組みました。



作業中、多くの好奇心と洞察がありました。たとえば、いくつかのオブジェクトを忘れましたが、メトリックの体系的な追跡は、すべてに対処するのに役立ちました。

「すべてがうまくいった」ことをどのように理解するのですか？指標を表示！

再設計の主な焦点は、選択プロセスの改善に焦点を当てていました。私たちはバスケットに触れてチェックアウトしませんでした。最初に改善したベースライン指標はオンライン販売でした。



もちろん、最初に調べたもう1つの指標は、「選択」プロセスからバスケットへの合計変換と、CJステージによるマイクロ変換の両方でした。そしてもちろん、平均チェックを調べました。これらは非常に基本的な一次メトリックであり、一般に、監視されるメトリックの数は数十を超えています。

ユーザー評価

ビジネス指標に加えて、忠誠度の指標も重要でした。NPS、CSIは、UXフィードバックウィジェットを使用して測定します。ウィジェットは、定量的データと定性的データの両方を提供します。これにより、ダイナミクスで情報を受け取ることができます。



数十万の応答を受け取るため、すべての統計的な「外れ値」が平滑化され、データがかなり代表的なものになります。現在、カスタマージャーニーのすべての段階でCSIを測定しています。これは、心に素晴らしい食べ物を提供します。







再設計の結果に従ってこれらのメトリックを見ると、サイトのセクションに応じて15〜25％成長しています。繰り返しになりますが、ユーザーから数十万のコメントや評価が寄せられていることを考えると、これは非常に重要です。この指標を5％でも増やすことは非常に困難です。

技術的な指標を忘れないでください

サイトの読み込み速度を詳しく調べました。それを増やすことは、再設計の目標の1つでした。古いサイトの「骨」を再設計し、徐々に新しいサイトをインフラストラクチャに織り込みました。デザインアップデートの一環として、読み込み速度も向上しました。



eコマースでは、読み込み速度が主要な指標に直接影響します。Amazonの調査によると、ダウンロードが100ミリ秒増えるごとに、売り上げが1％減少します。Googleにも同様のデータがあります。500ミリ秒ごとにトラフィック量が20％削減されます。この依存性が表現されている内部研究もあります。

ドゥーロフ、壁を返せ！

あなたはおそらく更新に対する最も人気のある反応が何であるかを推測することができますか？ 「すべてを元に戻してください。あなたの新しいひどく厄介なものです。」これは通常、正統派ユーザーの99.9％が言っています。何をするにしても、「古いデザイン」を欲しがる人はまだいるでしょう、それは大丈夫です。フィードバックを正しく追跡して応答することが重要です。







通常、再設計するとき、ユーザーはサイトの古いバージョンに戻る機会が与えられます。わざとやったわけではありません。まず、提案されたソリューションは、以前よりもはるかに優れていると確信していました。これらが完全に「幻覚」であることは明らかであり、それを証明することは非常に困難です。しかし、私たちが収集した調査結果は、私たちが正しいことを段階的に確認しました。



次に、お客様により良いユーザーエクスペリエンスを提供する一連の技術的変更を実装しました。第三に、パイロットが展開されたときに、ユーザーのフィードバックを確認しました。再設計はクライアントにとって苦痛です。通常、多くのユーザーは憤慨し始め、すべてを元の状態に戻すように求めます。そのようなメッセージはほとんどないことがわかりました。したがって、展開を進めるほど、意図が大胆になりました。



パイロットの結果に基づくメトリクスに対する私たちの期待は横ばいでした。つまり、条件付きで、メトリクスに関して「ゼロ」にしたかったのです。しかし、パイロット終了時の製品メトリックは、古いサイトよりも大幅に高く、正しいパスに自信を持っていました。



また、既存のフォーマット、デザインが不適切であるという理解もありました。そして、私たちは間違いなくそれを変更します。そのため、旧サイトへの復帰は申し出ないことにしました。その場合、古いサイトを離れてインターフェースを完成させます。それは危険な動きでした。予備のパラシュートを使用する必要がなかったことに感謝します。

軽いミューズリー

古いサイトから新しいサイトへの途中で厄介な道を通り過ぎたので、私が完全な成長で経験した短い論文をあなたと簡単に共有したいと思います。

1.サイトの速度とデザインは絡み合っています。

2.ユーザーからインスタントOSを追跡するためのユーザーテストとツールが成功の鍵です。

3.何をするにしても、「古いデザイン」を望んでいる人はまだいます。これは正常なことです。フィードバックを受け取って応答できる必要があります。

4.「理想的な」状態を待つ必要はありません。ロールアウトしてください。少なくともパイロットの場合、実験を行い、そこでメトリックを収集します。テスト環境の理想的な状態は、結果を保証するものではありません。

5.「再設計の完了」後、再設計の作業は停止しません。

6.メトリックは、製品とチームの親友です。



ご清聴ありがとうございました！



ZY 私たちはまだクールなプログラマーを必要としています！ 会議に行こう！