7週間でコンバージョン率を42％向上させた低コストのウェブサイトの再設計
公開: 2021-08-19私のオンラインストアの完全なウェブサイトの再設計を行うことは、非常に長い間私の「やること」リストにありましたが、それが優先事項ではなかったため、私は自分自身に引き金を引くことができませんでした。
つまりね。 私のコンバージョン率は常にかなり良好です（> 3％）。 そして、私のオンラインストアは毎年二桁成長しているのに、なぜボートを揺さぶるのですか？
しかし、それから私は3か月前に他の多くのeコマースのベテランとの首謀者会議に出席し、「ホットシート」をオンにするときにこれを取り上げることにしました。
こんにちは、みなさん。 サイトの再設計を考えていますが、現在のコンバージョン率はまだかなり良いです。 今すぐ更新する必要がありますか？ そして、あなたは私が今日それを修正する必要があるほど悪いと思いますか？ もう一年延期できますか？
私が受け取った答えは、聞くのが非常に苦痛でした。
- このウェブサイトは90年代にデザインされたようです。 再設計を行った場合、コンバージョン率が50％向上する可能性があります。 –マイクジャックネス
- あなたはコースを運営していますか？ これを見たら授業は受けません。 – Kevin Stecko
- これらは私が購入し、修正し、そして利益を上げて再販するのが好きなタイプのサイトです。 –ダナ・ヤウンゼミス
これらのコメントを聞くことは私のプライドを本当に傷つけました、そして私は防御的でないように最善を尽くしました。
しかし、首謀者から戻った途端、私はすぐにデザイナーに連絡し、Photoshopで簡単なモックアップを作成し、それをクランキングし始めました。
私の実装プロセスは非常に簡単でした。 私は自分ですべてのページを調べて調べ、見た目を「大まかに」レイアウトし、デザイナーに「見栄えを良くする」ために作品を選んでもらいました。
再設計を完了するために約6週間の予算を立て、自分の時間の約40時間を貢献しました。 サイトのすべてのページが完全にやり直されました。
全体として、ブラウザの互換性に関する予期しない状況（IEが嫌いです！）のために、プロジェクトは7週間かかり、 1840ドルの費用がかかりました。
編集者注：これが私の新しいサイトへのリンクであり、ウェイバックマシンを使用して古いバージョンを見ることができます。
成功するeコマースストアを開始する方法についての私の無料ミニコースを取得する
あなたがeコマースビジネスを始めることに興味があるなら、私はあなたが完全にゼロからあなた自身のオンラインストアを立ち上げるのを助けるであろうリソースの包括的なパッケージをまとめました。 出発する前に必ず手に取ってください！
私のウェブサイトの再設計の結果
次の変換結果は、 Google CPCトラフィックのモバイル、デスクトップ、タブレットのみを対象としています。
私のサイトは必ずしも売上に変換されないコンテンツページから大量のトラフィックを取得するため、ターゲットを絞ったppc広告トラフィックの数値を実行することは、比較の目的で最も理にかなっています。
- デスクトップのコンバージョン率が46％増加更新されました！
- モバイルコンバージョン率が21％増加更新されました！
- タブレットのコンバージョン率が25％向上更新されました！
注：季節性や需要の変動などの変数を排除するために、コンバージョン率のデータを前年とまったく同じ期間と比較しました。
そうは言っても、コンバージョン率の違いを測定する唯一の本当の方法は、時間の都合で私がしなかった設計を分割テストすることです。
まず、デスクトップのコンバージョン率の上昇は、それほど大きなジャンプを期待していなかったので、本当にショックを受けました。 私の古いサイトには作業が必要であることはわかっていましたが、それほどではありませんでした。
（更新：さらに数か月のデータの後、デスクトップのコンバージョン率の増加は46％です）
タブレットのお客様の場合、発売から数週間後にタブレットの実装に大きなバグが見つかり、結果と混ざり合っていたため、コンバージョン率の増加は実際には15％を超えていました。
（更新：さらに数か月のデータの後、タブレットのコンバージョン率の増加は25％です。）
そしてモバイルについては、2013年にすでにかなりまともなモバイルサイトを実装していたので、大きなジャンプは期待していませんでしたが、12％はまだかなり良いです。
（更新：さらに数か月のデータの後、モバイルのコンバージョン率の増加は21％です。）
いずれにせよ、コンバージョン率の上昇にもかかわらず、すべてのデータがバラ色であったわけではありません。 何らかの理由で、バウンス率などのオンサイトの指標が全体で約10％増加しました。
編集者注：今のところ、サイトから左側のナビゲーションを削除したためだと思いますが、データをふるいにかけて、なぜそれが起こっているのかを正確に調べる必要があります。 アップデート！ この問題の原因となったこの再設計では、いくつかのブラウザバージョンのサポートを停止しました。
私はどのショッピングカートを使用していますか？
再設計のたびに私がいつも尋ねられる最も一般的な質問は…
スティーブこれは何のショッピングカートですか？ Shopifyですか？ それともBigcommerceですか？
そして、私がまだ大幅に変更された古い学校のオープンソースショッピングカートを使用していることをみんなに話すとき、彼らは通常ショックを受けます。
つまりね…
選択したショッピングカートは、ショッピングカートの外観やWebサイトの外観とは関係ありません。 ショッピングカートの主な目的は、トランザクションを処理および処理することです。
ショッピングカートに必要なすべてのバックエンド機能が含まれている場合は、必ずしも切り替える必要はありません。 あなたのウェブサイトの美学は、ショッピングカートエンジンとはほとんど関係がありません。
ですから、私のような古いショッピングカートを持っていても、必要な機能がすべて揃っていれば、いつでも見た目を変えることができるので、見た目で判断するべきではありません。
最良の部分は、オープンソースプラットフォームを使用している場合、完全に制御できるため、いつでも独自の機能を追加できることです。
たとえば、このサイトの再設計では、この気の利いた小さな社会的証明機能を自分のショップに実装しました。 基本的に5〜15秒ごとに、サイトで以前に購入したものを表示する小さなウィンドウが左下隅にポップアップします。
Shopifyでは、プラグインを購入してまったく同じことを行い、月額$ 15を支払うことができます。 しかし、同じものを定期的な料金なしで送り出すのに約5時間かかりました（実際には2時間かかるはずでしたが、コーディングは錆びていました）。
とにかく、これらはソースコードを所有することの利点のほんの一部です。 技術的な傾向がある場合は、オープンソースを試してみることをお勧めします。
ただし、Webデザインに精通しておらず、技術的なことを何も処理する必要がない場合は、ShopifyまたはBigCommerceを使用してください。
配色の変更
美的観点からの私のサイトに関する最大の不満の1つは、配色でした。 古いサイトは紫と黄色で、私が選んだカラーパレットはサイトを昔ながらのように見せました。
編集者注：これが私の新しいサイトへのリンクであり、ウェイバックマシンを使用して古いバージョンを見ることができます。
皮肉なことに、Create A Profitable Online Storeコースでは、実際に色彩理論のレッスンを教えていますが、2013年にはこの知識がなかったため、実践する機会がありませんでした。
とにかく一言で言えば、私はcolor.adobe.comというサイトを使用して、新しいデザインの補色を選択しました。 そして、ルックアンドフィールをリフレッシュするために、ティール、ホットピンク、イエローを選びました。
なぜ3色？ 「行動を起こす」という特定の色が欲しかったからです。 「注目を集める」ために特定の色が欲しかった。 そして最後に、サイトを「若くてヒップ」に感じさせるために、全体的に明るい色が欲しかったのです。
ティールは私の背景色です。 特別なオファーがある場合、黄色は私の「注意」色です。ホットピンクは目立ち、ポップになるため、サイトのすべてのアクションボタンに使用されます。
私のサイトのすべてのページは、単一の目的を持つように設計されています。
フロントページは、マージンが最も高いセクションなので、パーソナライズされたコレクションを閲覧してもらいたいと思います。 カテゴリページで、商品をクリックしてもらいたいです。 そして、商品ページで「カートに入れる」をクリックしてほしい。
転換の3つの柱
自分のウェブサイトをデザインするときに人々が犯す大きな間違いの1つは、 Amazon.comをコピーしようとすることです。 アマゾンは地球上で最大のeコマースプラットフォームですが、なぜ私は自分のサイトを彼らのサイトに倣わないのですか？
まず第一に、Amazonのウェブサイトのデザインは醜く、一般的であり、ほとんどのニッチなオンラインストアには適していません。 アマゾンが醜いウェブサイトで逃げることができる理由は、誰もが彼らが誰であるかを知っていて、彼らはインターフェースに慣れていて、すでにアマゾンを信頼しているからです。
しかし、あなたがあなた自身のウェブサイトを持っているとき、誰もあなたが誰であるかを知らないので、あなたは最初からその信頼を確立しなければなりません。
全体として、初めてサイトにアクセスする人にとって重要な3つの主要なことがあります。
1つは、送料無料を提供していることを人々に知らせる必要があります。 アマゾンや他の大きなボックスのeコマースショップのおかげで、ある種の送料無料のオファーがコースに匹敵するようになりました。
2つ目は、あなたは未知のエンティティであるため、顧客が満足していない場合に商品を返品できることを顧客に安心させたいということです。
そして最後に、新しい顧客と確立しなければならない3番目のことは、おそらくそれらすべての中で最も重要な要素である信頼です。
顧客があなたのサイトにアクセスし、あなたのことを聞いたことがないためにあなたの店を信用しない場合、彼らはただ迎えに行って去るだけです。
再設計のために、私はさまざまな方法で信頼を強制します。
すべてのページのヘッダーで、送料無料、面倒な返品なし、電話番号を強調しています。 電話番号をわかりやすく表示することは非常に重要です。
新しいブティックでオンラインで買い物をするときはいつでも、私がいつも最初にすることは、連絡先ページをクリックして、電話番号と住所を探すことです。 そして、それらのアイテムのどちらも表示されないか、2つのうちの1つだけが存在する場合、私はそこで買い物をしません。
顧客は、購入で問題が発生した場合に店舗に連絡できることを望んでいます。 その結果、営業時間を含むすべてのページにこの情報をできるだけ表示する必要があります。
「公式の営業時間」があると、「実際の」営業時間を持つ確立されたビジネスのように出くわすため、ショップはよりプロフェッショナルに見えます。
社会的証明と信頼
すべてのページの下部に、私のサイトの信頼性に役立つ社会的証明のための専用セクションがあります。
結局のところ、私たちはさまざまな雑誌で取り上げられ、Todayショーにも参加しているので、自慢しなければどうなるのでしょうか。
私たちの社会的証明/プレス言及セクションはサイトのすべてのページにあるので、最初にそれを見なくても、最終的には気付くでしょう。
また、プレスセクションのすぐ下に表示されている写真と紹介文をたくさんのお客様にお願いしました。
これらは私たちのサイトで買い物をした実際の顧客であり、彼らの購入に非常に満足していて、私たちに非常に素晴らしい推薦状を残してくれました。
ある特定の顧客Sherriは、私たちのハンカチが本当に好きなので、私たちのサイトから150回以上購入しました。
そして最後に、お客様の満足が私たちの主な関心事であることをお客様に安心させる言葉をいくつか含めました。 お客様に不満を抱かせることは決してありません。 また、問題が発生した場合は、全額返金いたします。
ナビゲーションの変更
新しいサイトのナビゲーションを再設計することは、私が苦労した分野でした。 まず、私は左側のナビゲーションの大ファンです。 私の古いデザインにはそれがあり、メニューが常に表示されてアクセスできるため、顧客はそれを愛していました。
ウェブページの左側は、あなたの目が自然に引き寄せられる場所でもあり、買い物を始めるのに最も明白な場所です。
しかし、ここに私のジレンマがありました…
ナビゲーション専用の左側の列を含めると、サイト上の他のすべてのものを縮小する必要があります。
たとえば、すべての商品画像を大幅に縮小する必要があり、コンバージョンに悪影響を及ぼします。
私のカテゴリ画像は小さくなり、クリック率が低くなります。
各ページの言い回しは、より多くの画面領域を占有し、製品をページのさらに下に押し出します。
したがって、最終的には、トップレベルのホバースタイルのドロップダウンメニューを使用しました。 トップレベルのナビゲーションバーの美しさは、左側のナビゲーションバーと同じように動作することですが、同じ量の画面領域を占めるわけではありません。
また、ナビゲーションを上に移動することで、カテゴリと商品の画像を300％拡大することができ、非常にポップになりました。
トップレベルのナビゲーションを使用する他の利点は、非常にクリーンな方法で個別のカテゴリを分離できることでした。
たとえば、今では明確な「Shop By Occasion」カテゴリのプルダウンがありますが、古いデザインでは、このセクションが左側のメニューの残りの部分と混ざっていたため、目立たなくなりました。
また、パーソナライズされた商品、ベストセラー、新着商品、FAQページ、連絡先ページ、概要ページ、カートの表示、チェックアウト専用の特別なセクションを追加しました。
基本的に、最も重要なナビゲーション項目はすべてメインバーに表示され、誰でも見ることができます。
私のユニークな価値提案を強調する
私がeコマースコースで教えている重要な原則の1つは、サイトのすべてのランディングページに強力な独自の価値提案がなければならないということです。
なぜ誰かがあなたの店から買うべきですか？ 競合他社ではなく、なぜここで買い物をする必要があるのですか？ 答えはすぐに明確になるはずです。
そのため、このデザインでは、サイトのすべてのページの前面と中央に強みを強調することにしました。
たとえば、フロントページでは、私たちのバリュープロポジションはスプラッシュ画像内にぴったりです。
私たちのカテゴリーページには、私たちの店が特別である理由を伝えるために特別なテキストボックスを実装しました。
最終的な目標は、最初の5秒以内に、競合他社ではなくあなたから購入する必要がある理由を顧客に納得させることです。
製品ページの美化
私のサイトの批評からの最大のポイントの1つは、私の製品ページが標準に達していないことでした。
これは古いデザインの製品ページです。
これが私の新しいサイトの同じページのように見えることです。
違いに気づきましたか？ まず、左側のサイドバーを削除したため、商品画像のサイズを266％拡大することができました。
メイン画像が非常に大きくなるだけでなく、商品ページの要素を再配置して、「カートに追加」クリックを増やすようにしました。
たとえば、[カートに追加]ボタンのすぐ隣には、送料無料で面倒な返品がないことを顧客に安心させるテキストボックスがあります。
また、標準またはエクスプレスのどちらを選択したか、および関連するすべての送料に応じて、注文をいつ受け取るかを動的に顧客に通知するリンクアップトップもあります。
また、ほとんどの訪問者が私の古いサイトの専用の共有ボタンを見ていなかったことに気付いた後、共有を促進するために、PinterestとFacebookのボタンを画像自体に直接重ね合わせました。
注目すべき興味深い点の1つは、元々、下に示すように、画像のすぐ下にFacebookとPinterestで共有する2つの大きな青と赤のボタンがあったことです。
しかし、最終的には、ホットピンクの「カートに追加」ボタンよりも目立つため、削除することにしました。 結局、私はソーシャルメディアのシェアよりもはるかに「カートに追加」アクションを大切にしています。
最後に、クロスセリングセクションのサイズを大きくして、同様の商品を購入するように顧客を誘導しました。
チェックアウトの改善
古いサイトには大きな問題はなかったので、チェックアウトプロセスの改善は私にとって大きな優先事項ではありませんでした。 しかし、私はすでにボンネットを開けていたので、かなり長い間私のサイトに残っているいくつかの未解決の問題を修正することにしました。
まず、時々、私たちのサイトで買い物をするためにアカウントが必要かどうか混乱して疑問に思っている人々から電話がありました。 これが私たちの古いサイトでの最初のチェックアウトページの様子です。
この問題の解決策は、デフォルトでログインを非表示にし、チェックアウト用に2つのホットピンクのボタンのみを表示することでした。
また、チェックアウトが安全であり、満足が保証されていることを顧客に安心させるために、トラストロゴをより目立たせました。
もう1つの大きな変更は、チェックアウトを完全にレスポンシブにしたことです。
注：Shopifyを使用している場合は、見栄えの良いレスポンシブチェックアウトプロセスがどのように見えるかをすでに見てきたでしょう。
そのため、車輪の再発明を行う代わりに、Shopifyのチェックアウトデザインをエミュレートしました。これは非常に優れているためです。
一言で言えば、これが私のチェックアウトがさまざまな画面サイズでどのように見えるかです。
デスクトップ用…
タブレットおよびモバイル用
モバイルについてのいくつかの言葉
2013年の最後のサイトの再設計では、別のサブドメインにあるデスクトップサイトとは別に、完全に別のモバイルWebサイトを実装しました。
当時はそれが正しい決断だったと私は信じていますが、今日は間違いなくそうではありません。 今日、レスポンシブデザインを非常に簡単にするBootStrapのような多くのフレームワークがあります。
過去数年間、モバイルサイトとデスクトップサイトの同期を維持することは大きな苦痛でした。そのため、すべてのプラットフォームで単一の統合サイトを利用できるようになりました。
レスポンシブ化の主な欠点は、デスクトップ、タブレット、モバイルの3つのまったく異なるプラットフォームでサイトを徹底的にテストする必要があったことです。 また、各プラットフォームには、処理する複数のブラウザバージョンと画面解像度がありました。
たとえば、Windowsマシン用にIE 8、9、10、11をテストする必要がありました。 Mac用のSafari6、7、8をテストする必要がありました。
最後に、Google Analyticsアカウントを使用して、ブラウザースタックと呼ばれるツールを使用して、過去1年間にサイトで使用されたすべてのブラウザーのユーザビリティテストを実行しました。
言うまでもなく、このプロセスはひどく、再設計の中で私の最も嫌いな部分でした:(
とにかく、ここに新しいモバイルデザインに関するいくつかのハイライトがあります。 これらの広告申込情報のほとんどはかなり標準的なものなので、あまり詳細に飽きることはありません。
タブレットとモバイルでは、メニューを1つのプルダウンメニューに折りたたむように変更しました。
以前のモバイルサイトに基づいて、誰もが検索バーに直行する傾向があることを発見したので、モバイルサイトのすべてのページの前面と中央に検索バーを含めるようにしました。
携帯電話の画面領域ははるかに小さいため、画面サイズを小さくするために、ページの特定の「必須ではない」要素を削除しました。
Pinterestの変更
私が行った最後の変更は、コンテンツページを完全に刷新したことです。 過去に何度も言及したように、私はアートとクラフトのページを使用して、人々をオンラインストアに呼び込みます。 そして、Pinterestはこれらのページの大きなトラフィックソースです。
その結果、私はほとんどのクラフト画像を完全に作り直し、Pinterestのためだけに特別な背の高い細いバージョンを作成しました。 また、商品写真の画像も新しく作成しました。
たとえば、「ピン」ボタンをクリックしたときにPinterestに長方形の画像を使用する代わりに、高解像度の背の高い細いバージョンが表示されるようになりました。
結論
全体として、 7週間と1840ドルは、私が現在経験している利益のためのかなり良い投資です。 現在の私の主な問題は、同時に進行しているプロジェクトが多すぎて、それぞれに取り組むのに十分な時間がないことです。
しかし、ここにあります…
以前はコンバージョン率は良好でしたが、コンバージョン率がさらに向上したことによる純売上高の増加は、今年実施する予定だった他のトラフィック構築の取り組みよりも優先される可能性があります。
そして、ここで学ぶべき教訓があるとすれば、それはあなたのサイトのコンバージョン率を上げることはあなたの他のすべてのトラフィックソース全体の売り上げを増やすということです。
eコマースビジネスの基盤はプラットフォームから始まります。トラフィックの構築に集中する前に、すべてのアヒルを配置することが重要です。