ケースデザイン：MroSupply Eコマースサイト

ホームページ

ケーススタディ：MroSupply Eコマースサイト

MroSupplyは、1898年から工業製品を販売している会社です。 Mrosupply.comは現在6年以上が経過しており、現在200を超えるブランドと700,000のアイテムを購入できます。 彼らの常連客には、コカコーラ、7up、ユナイテッド、ホールフーズ、ホーメルフーズなどのブランドが含まれます。

このプロジェクトで何をしましたか

このプロジェクトの一環として、ユーザーの視覚的な部分全体を行いました。 作品のリストには、次のようなサービスが含まれています。

-研究

-戦略

-ユーザーエクスペリエンス（UX）

-ワイヤーフレーム

-ユーザーインターフェイス（UI）

-ビジュアルデザイン

-プロトタイピング

-ガイド

-フロントエンド開発

つまり、顧客はこのプロジェクトに長い間取り組んでいる自分のチームを持っているため、実際には、バックエンド開発を除くすべての作業を行いました。

メインラインのベースラインまたは簡単な説明

事件のキーポイント



このプロジェクトでは、私たちは顧客と非常に幸運でした。彼はサイトで起こっていることすべてを知っていて、何を変更する必要があり、何を改善する必要があるかを明確に知っていました。 最も重要なことは、顧客が質問に答えることができるということです。なぜこれが必要なのですか？

1.目的と主なアイデア

クライアントの目標はしばしばプロジェクトの目標とは異なるため、それらを共有します。 これは、完成したプロジェクトをやり直す必要がある場合に機能します。

顧客の目標

当初、顧客には明確な概要がなく、必須の改善要件の理解とリストがありました。 リストには次のような項目が含まれていました。

-カテゴリごとにナビゲーションを更新します。

-サイトの3つのメインページ（製品の詳細、製品リスト、ホームページ）でのUXの改善。

-デザインを作成するアーティストのフロントエンド。

プロジェクトの目的

会社とクライアントは分析とマーケティングに積極的に取り組んでいるので、彼らは側面からの見解を見ることに興味がありました。 つまり、当社の調査および提案されたソリューションを参照してください。 主なものは次のとおりです。

-サイトのレスポンシブバージョンを作成する

-登録とチェックアウトを促進する

-設計をより統一し、アクセスしやすく、理解しやすくする

2.対象者

サイトの市場は非常に大きい。 主な対象読者は、職場でインストールされているデスクトップコンピューターで機器を購入する企業の従業員です。

3.市場と競合他社

市場は非常に大きいです。 彼には競争相手はほとんどいませんが、彼らの立場はかなり強いです。 すべての競合他社の問題は異なります（配送、商品の説明、商品を迅速に処理する能力）。

4.サイトの構造とナビゲーション

顧客はサイトのナビゲーションをあまり変更したくありませんでした。販売に大きな打撃を与えるからです。これは、サイトの現在のオーディエンスがアクティブなインターネットユーザーではなく、変更が混乱する可能性があるためです。



複雑な登録やサイトでの注文の問題など、いくつかのボトルネックもありました。 これらの問題は修正する必要がありました。

プロジェクトの目的

顧客の目標、プロジェクトの目標、および全体的な目標の表

顧客の目標

顧客は、SEOの観点から、プロジェクトの存在中に、現在の要件を満たさなくなった機能の重大な問題を蓄積しました。 新しい目標に従ってサイトを再作成することが決定されました。



1.カテゴリナビゲーションを更新します。

サイトの成長に伴い、カテゴリの数が大幅に増加し、以前のデザインではユーザーフレンドリな形式でカテゴリを表示できませんでした。



2.サイトの3つのメインページ（製品の詳細、製品リスト、ホームページ）のUXを改善します。

eコマースサイトでご存知のように、ユーザーが最も時間を費やし、売上に大きく影響する4つのキーページ（ホームページ、製品リスト、製品ページ、チェックアウト）があります。 顧客は最初の3つでかなり実験し、彼らがどのように見えるべきかというビジョンを持っていました。



3.フロントエンド開発

顧客の要件の1つは、デザインを作成した特定のアーティストがフロントエンドを実行することでした。 顧客は、請負業者がプロジェクトが技術的な観点からどのように見えるべきかをより明確に想像しているという事実で彼の決定を主張しました。

プロジェクトの目的

調査中に、プロジェクトにはユーザーが役に立つと思われる他の目標がかなりあることがわかりました。



1.サイトのレスポンシブバージョン。

多数のユーザーが低解像度のサイトに座っていることが判明しました。 現在のサイトは、最小解像度が1000pxに設計されています。つまり、画面解像度が低いユーザーは、サイトの使用で既に問題が発生しています。 また、レスポンシブバージョンはSEOプロモーションに非常に大きな影響を与えます。 Googleは最近、モバイルバージョンを持たないサイトの位置を下げました。



2.追加の売上を増やします。

サイトを調査する過程で、競合他社と比較して、追加販売が不十分であることに気付きました。



3.ユーザーの意識を高めます。

サイトを分析した結果、ユーザーはサイトの購入とやり取りのプロセスにほとんど関与していないという結論に達しました。



たとえば、登録時に、ユーザーがサイトに登録したという通知はありません。 登録されていない商品がバスケットに残っている場合、サイトはユーザーが商品の通関手続きを完了するために郵便でそれについて通知しません。 注文のステータスを変更した後のメールによる通知は届きません。



4.配信をより理解しやすくします。

このサイトには、一定の量を注文すると配達が無料になるという事実に関する多くの言及があります。 ユーザーは、送料無料がどのように考慮されるのかが明らかではないと訴えました。 クライアントがこの機能を終了することをお勧めします。配信ステータスを確認できるモバイルアプリケーションを作成することもできます。

プロジェクトの一般的な目的

通常、交渉中および調査結果を提供した後、顧客の目標は新しい情報に従って変化します。 その結果、目標のリストは次のようになりました。

1.カテゴリナビゲーションを更新します。

2.サイトのすべてのメインページのUXを改善します。

3.配信をより理解しやすくします。

4.追加の売上を増やします。

5.製品の検索を改善します。

6.レスポンシブバージョンのサイト。

7.フロントエンド開発。

対話中に、いくつかの重要な詳細を学びました。

-顧客は、コールセンターの負荷を軽減するためにサイトをやり直すことにしました。



-最初の目標は、追加のオンライン販売を増やすことでした。



-MROsupplyの顧客は通常2つの方法で買い物をします。 最初のケースでは、彼らは単にサポートに電話し、2番目のケースでは、彼らが必要なものの正確なブランドとモデルを知っているときに検索のみを使用してサイトで購入します。

対象読者

プロジェクトのユーザーの範囲は非常に広いため、対象ユーザーの主な機能を強調することが理にかなっていると判断しました。



1.ほとんどのユーザーは、低解像度のデバイスを使用してサイトに座っています。

顧客から、ユーザーの11％がIE8を使用しており、引き続きWindows XPを使用していることがわかりました。 この情報に基づいて、ユーザーは作業中のデバイスからサイトで製品を購入すると想定できます。



2.注文するためにサポートに直接電話するのが大好きです。

このサイトの視聴者は、25歳以上の成人です。



3.オフラインのサイトについて知る。

顧客から、主にユーザーが直接リンクを介してサイトにアクセスし、検索のみを使用することを学びました。



つまり、サイトのオーディエンスはアクティブなインターネットユーザーではないと結論付けることができます。 大きなニーズに使用します。 新しい技術を理解することはあまり好きではありません。 彼らは恒常性を愛し、変化を好まない。 顧客は、ユーザーの混乱を招く可能性があるため、サイトの構造を変更することはお勧めできないという事実を何度も強調しました。

市場と競合他社

研究からの小さな切り抜き



調査の過程で、業界には大きな市場があり（月平均700万ユーザー）、主に次のような米国の軽工業に関連するビジネスであることがわかりました。

-食料生産に関連する事業。

-製品ラインの作成に関連するビジネス。

-小売店;

-デザイン会社。

-建設会社と工場;

最初は調査に多くの時間が割り当てられなかったため、トップ5の業界にある2つのサイトのみを分析することができました。



これらのサイトは、コンテンツが非常に異なりますが、それぞれに問題、長所、短所があります。



1. 2つのサイトの共通点は、ユーザーがサイト上の製品の詳細な説明を確認することが重要だったことです。

2.ユーザーにとっては、配達が透明であり、商品通関の段階で計算されることが重要です。

3.たとえば、あるサイトで、間違った時間に登録することに関する多くのフィードバックは、サイトに行くために登録する必要があります。

サイト構造とナビゲーション

メインサイト画面



顧客の要請により、現在の構造は変更されていません。 顧客は、いくつかの要因でビジョンを主張しました。



1.現在のユーザーはあまり変更を好まないため、グローバルなユーザーは混乱する可能性があります。



2.これはSEOにはあまり良くありません。 インデックスを再作成すると、発行中のサイトの位置が大幅に減少する可能性があります（現在、月あたり50,000人を超えるユーザーがいます）。



全体として、サイトはかなり理解しやすい構造を持っていますが、コンテンツは少し混chaとして配置されていたため、主に既存のものの改良に取り組み、新しい要件に関連して機能を拡張しました。



また、サイトには修正が必要ないくつかのポイントがありました。



最初のポイントは登録に関連していました。 サイトに登録するには、すべてのフィールドで自動チェックを実行する巨大なフォームに記入する必要がありました。



ユーザーは、それは不便だと直接言いました。 したがって、最初の段階で、ユーザーがいくつかのフィールドの単純なフォームに入力することを決定しました。 そして、彼が商品のチェックアウトに進んだ後、すべての必要なフィールドを含む大きなフォームに記入することを申し出ます。 これにより、2つの問題を一度に解決できます。1つ目は、ユーザーが最初に長いフォームに記入する必要がないことです。2つ目は、サイトがバスケットに残っている製品に関する通知をユーザーにメールで送信できることです。



2番目のポイントはバスケットに関連していました。 目に見えず、その中にたくさんの商品があったため、ユーザーが常にそれを目に見えるようにすることが必要でした。したがって、顧客の要求に応じて、ユーザーが常に商品のリストを見られるようにジェットバスケットのように見せました。

ワイヤーフレームとプロトタイピング

顧客向けのワイヤフレーム



ワイヤーフレームは、プロジェクトを作成する際の重要なステップの1つです。 この段階では、調査と顧客から収集したデータに従って、すべての改善と新しい機能を備えた将来のページのフレームを準備しています。 このステップでは、将来のサイトのすべての重要な詳細に同意します。



この段階でのほとんどの作業は、Invisionappなどのツールに関連しています。 Invisionappでは、将来の製品のすべての視覚的な詳細について顧客と話し合い、話し合うことができます。 このサービスにはかなりシンプルで強力なプロトタイピングツールがあり、ワイヤーフレームステージでリンクプロトタイプを作成するのに役立ちます。

設計

スタイル

UI要素



顧客との短い交渉中に、サイトをマテリアルスタイルにすることが決定されました。 この決定は、いくつかの要因によって決定されました。



1.マテリアルスタイルには、Googleが開発者専用に作成した独自のガイドがあります。 ローダー、エラーの形でデザインにギャップがある場合、ネイティブガイドを見ると簡単に埋めることができます。



2.マテリアルスタイルは非常に普遍的で理解しやすいものであり、インターフェイスとの相互作用の標準パターンがあります。



3.マテリアルスタイルは動的です。 将来のサイトはシンプルになるので、アニメーションは特定の機能がどのように機能するかについてユーザーに追加の理解を与える必要があります。



4.素材は何百万人もの人々に馴染みがあります。 サイトユーザーが特に変更を好まないという質問に戻ると、既にこのシステムに遭遇している可能性が高く、更新されたサイトとのやり取りははるかに簡単になります。



5.マテリアルスタイルには、アイコン、フォント、アニメーションの形式の多くのソースファイルがあります。 これらのファイルは高品質であり、サイトの読み込み速度を最適化するだけでなく、新しいデザインとフロントエンドパーツを作成するときに時間を大幅に節約できます。

パレットとフォント

色とフォント



パレットとフォントの両方で、私たちは賢くないことに決め、前のサイトからメインの色を取り、アクセントを強調するためにグレーの陰影を追加しました。 彼らはサイトの新しいフォントでrobotoを選択することにしました。 フォントは、大小の解像度用に最適化されており、通常はかなり読みやすくなっています。

ソリューション設計

空のゴミ箱と完全なゴミ箱を表示する



プロジェクトの開始時に、顧客はjet.comのようなバスケットが必要だと言いました。 このプロジェクトでは、商品を注文するユーザーはバスケットに多数のアイテムを持っています。 古いサイトでは、購入プロセス中にバスケットを表示および編集できませんでした。 バスケットとサイトの間を常にジャンプする必要がありました。 各ページからバスケットを表示する機能を実装しました。 また、ユーザーにとってサイトでの配達がどのように機能するかは不明でした。無料の配達を得るためにさらに商品を注文する必要があるかどうかがはっきり見えるように、バスケットに配達ブロックを追加しました。





検索ジョブの表示



顧客から、サイトのユーザーは主に検索と製品ページのみを使用することがわかりました。 これらの点に焦点を当てています。 検索バーにテキストを入力すると、サイトは製品の名前と説明、およびカテゴリ内のすべての単語に一致するものを探します。





製品ページ



MroSupplyでは、製品ページはサイトで2番目に訪問されたページです。 多くの新しい機能がページに追加されたため、最大の変更が加えられました。



1.現在、このサイトには中古品を購入する機会があり、余剰費用も大幅に少なくなっています。

2.ワンクリックで、必要な数の製品を選択します。

3.代替製品のブロックにいくつかの変更が加えられ、製品ページから代替製品を直接追加できるようになりました。



追加を削除しました。 別のブロックの以下の情報（配信、可用性、可用性）。 顧客は最初の画面に戻るように依頼しました。これは、ユーザーからコールセンターに寄せられる質問の95％をカバーしているため、この情報がオフロードされるためです。



もう1つの興味深い事実は、サイトが製品ページで受け入れる支払いシステムアイコンを追加すると、売上が1日あたり10,000ドル増加したことです。





カタログページV1およびV2



カタログページの主なタスクは、できるだけ多くの製品を画面に表示することでした。 開発中に、タイルとリストの2つの製品ディスプレイが表示されました。 ページに表示されると、より多くの製品がページに配置されますが、製品のリストは読みやすくなります。 また、サイト上の製品はリストに配置され、ユーザーはこの種に慣れています。





私達についてのページ



それ以前は、会社の情報はMROsupplyウェブサイトの複数のページに散らばっていて、現在ほど明確ではありませんでした。 このページでは、ユーザーに必要なすべての情報がより明確に示されています。

モバイル

モバイルサイトページ



興味深いことに、単一の競合他社がモバイル版のサイトを持っているわけではありませんが、サイトにはいくつかのアプリケーションがあります。



私たちのプロジェクトでは、SEOに役立ち、また多くのユーザーがモバイルデバイスからサイトにアクセスするため、サイトの応答性を高めることが主なタスクの1つでした。 モバイルの最小幅は320ピクセルで決定されました。 サイトのモバイルバージョンは、デスクトップに応じて100％機能します。

参照条件

MroSupplyのガイドライン



従来、各プロジェクトの最後に、開発者向けの技術的なタスクを作成します。 このリストに含まれるもの

1.将来の設計のすべての詳細を含むガイドライン。

2.難しい場所でのインターフェースとの相互作用。

3.将来のサイトのより理解しやすいメカニズムのためのインターフェイスアニメーション。

4.数式、作業で使用される計算。

実際、このドキュメントは、このプロジェクトに引き続き対処するチームの質問の90％をカバーする必要があります。



このプロジェクトでは、フロントエンドの開発を行いました。 上記のリストのほとんどは必要ありませんでした。 開発者がサイトスタイルのビジュアルファイルを持つことができるように、サイトで詳細なガイドラインのみを作成しました。

結論の代わりに

もちろん、仕事はそこで終わりではありません。 設計を更新した後、修正する必要のあるバグが常に多くあります。 初期修正の作業が完了すると、プロセスはよりスムーズで体系的になります。



上記のケースは、スタジオでの作業例です。 私たちは常にこのプロセスに取り組んでおり、お客様にとってより良い、より効率的な、より便利なものになるよう努めています。



また、このプロジェクトではフロントエンドを作成し、その品質に非常に満足していることにも言及したいと思います。 多くの場合、フロントエンドに設計を顧客のチームに移す段階で、品質が低下します。 これは、原則として、チームのスキルではなく、将来のサイトの作業の仕組みを理解していないことに関連しています。 したがって、設計を行った同じ開発者にフロントエンドを注文しない場合は、少なくとも設計者とフロントエンド開発者間のコミュニケーションを構成することをお勧めします。



PSケースが気に入った場合やコメントがある場合は、コメントでお聞かせいただくか、サイトで直接お問い合わせください。