ウェブページの再設計の7つの主要要素 ウェブページの再設計の7つの主要要素を共有する

Shopify Plus は、私たちが設立した e コマース プラットフォームのエンタープライズ バージョンです。 2014年2月にリリースされた、まだ最初のバージョンです。刷新する時期が来たと思います。

1年以上が経過し、私たちは顧客と私たち自身に対する理解を深めています。古いブランドはもはや意味をなさない。

特別なプロセスはなく、次の 7 つの要素を組み合わせて目標を達成するだけです。

インタビュー

Shopify Plus とは何かを明確にするために、経営陣のメンバーと 1 対 1 のミーティングを開催しました。信憑性を保証するために、私は各インタビューを録音し、後で再生できるようにしました。

インタビューの後、インスピレーションが湧きました。この製品を隅々まで理解したような気がしました。ビジョン、ミッションステートメント、ブランドガイドライン、プロジェクト概要、Web サイトのコピーの作成がさらに簡単になりました。当社のウェブサイトでは、情報を伝達し、洞察を生み出す機能をさらに強化する必要があります。

プロジェクト概要

プロジェクトに着手する前に、全員が同じ認識を持つようにプロジェクトの概要を作成しました。プロジェクトの現在の状況を反映するために、適宜更新します。

プロジェクトの概要で尋ねられる可能性のある質問には次のようなものがあります。

• 私たちは何を達成しようとしているのでしょうか?
• プロジェクトが成功したかどうかはどうやってわかりますか?
• 何をする必要がありますか?
• なぜこれをする必要があるのですか?
• 必要な条件は何ですか?
• これは誰のためのものですか?
• どうやって知らせればいいのでしょうか?
• プロジェクトチームのメンバーは誰ですか?
• 締め切りはいつですか？

競合製品分析

他に類似の製品がないか調べてみました。私は競合他社のリストから始め、その後、私たちと同じ顧客をターゲットにしている電子商取引分野以外の企業に移りました。

私たちは、競合他社の強み、弱み、機会、そして私たちが注力したい主要分野、そして避けたい分野を検討しました。

競合製品分析文書

情報アーキテクチャ

情報構造とは、コンテンツを理解しやすくするための構成です。 Web デザインでは、構造図は Web サイト上のページ間の関係を反映し、より高い視点から Web サイトの構成を確認できるようにします。

ページ間の関係を示すために、古い Web サイトの情報構造図を描きました。更新および変更する前に、コンテンツ、目標、作業負荷を評価しました。このチャートは、プロジェクトの範囲を定義するのに役立ち、作成、設計、コーディングするすべてのページの ToDo リストとして機能しました。

Shopify Plus 情報構造図

ワイヤーフレーム

再設計プロセス全体を通して、ワイヤーフレームを使用して問題を考察し、創造性を刺激しました。ナプキンに描いて対面で共有したものもあれば、オンラインで共有したものもあった。

ワイヤーフレームには、コンテンツの作成に役立つという意外な利点があります。ドキュメントを書くと、すべてを視覚化することが難しくなります。ワイヤーフレームにコンテンツを貼り付けると、ページのジャンプの流れと、各コンテンツが他のコンテンツとどのように関連しているかが明確にわかります。

Shopify Plusの再設計のための高忠実度のワイヤーフレーム

インスピレーションボード

新しいブランドがどのようなものになるかを示した私のインスピレーション ボード。プロジェクトの早い段階でチームからのフィードバックを得るのに役立ちます。

私は Pinterest を使用して複数のアートボードを作成し、ナビゲーション、アニメーション、フォントなどのトピックを細分化して、アイデアが 1 つのアートボード内で失われないようにしています。

リサーチの過程で、私はインスピレーションあふれるアイデアを Illustrator で描き、テキスト、画像、カラーパレットを組み合わせて広告のようなパターンを作りました。同じデザイン要素がさまざまなデザイン案に登場しますが、その位置や表現は異なります。

Shopify Plus インスピレーションボード

インスピレーションボードからShopify Plusのブランディングの可能性を探る

レンダリングとインタラクティブプロトタイプ

ほとんどの人は、ワイヤーフレームや Web デザインが紙に印刷されたときには、あまり注意を払いません。デザインを画面に表示するのは素晴らしいことです。

私はワイヤーフレーム作成プロセスの早い段階でインタラクティブなレンダリングの作成を開始します。サイトのコーディングが完了するまで、クライアントやチームと共有し続けます。

インターフェースを操作しているときに何を考えているのかを理解できるように、ブラウジング中に自分の考えを話すように依頼しました。これらのフィードバックにより、地域の問題が浮き彫りになり、設計ソリューションが検証され、プロジェクトの完了が促進されました。

Shopify Plus の InVision プロジェクト ページ

Shopify Plusのフィードバックの収集

組織によっては、再設計プロセスで特定の順序を主張するところもありますが、当社では次の 7 つのステップがうまく機能しました。ワークフローに適した戦略を選択することは、再設計を成功させるための重要な要素です。

著者情報:

Shopify のデザイナー、Filippo Di Trapani

フィリッポは、カナダのオタワにある Shopify 本社で働くデザイナーです。愛情深い夫であり、2 人の子どもの父親であり、熱心な音楽愛好家でもあります。