架空ECサイトのUI/UX改善提案

■目次

１.制作要件

２.既存のECサイト情報

３.制作物：プロトタイプデモ動画

４.制作物：制作したデータ全体（Figma）

５.制作物：改善提案

６.工夫したところ

７.UIUX改善提案を通して学んだこと

１.制作要件

２.既存のECサイト情報

■トンマナ

■UIパーツ

３.制作物：プロトタイプデモ動画

■すでにカゴに２点入った状態でもう一点追加し、注文するケース

■ナビゲーションバー押下時の画面遷移

４.制作物：制作したデータ全体（Figma）

５.制作物：改善提案

■課題１：フォームでの離脱率が大きくカートに商品が入っても購入完了まで至っている人が少ない

■課題２：ほしい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い

６.工夫したところ

■既存UIのトンマナに合わせたUIパーツの作成

• 既存デザインのトンマナに合わせ、UIパーツを修正、追加作成しました。
• スマートフォンで操作することを踏まえ、タップやスクロール時の操作性を高くするため、ボタンは大きめで、文字や図形の視認性が高いパーツを作成しました。

■導線を意識した設計

• プロトタイプを作成する際には、ECサイトを訪れた際にどのような思考になり、どのような操作を行うのかを１つずつ考え、手順を追いながら設計しました。

■ユーザーのステータスを場合分けする

• どんなステータスの方がユーザーとなるのか、場合分けをしてから設計に落とし込みました。今回のECサイトであれば会員登録済み、会員登録がまだでこれからしたい、会員登録はしたくないが買い物はしたいの３パターンで考えました。実務の場合、場合分けをどこまでUIに落とし込むかはクライアントと調整をして決定していくことになると思うのでどうやって調整していくか提案方法を詰められていけたらと思います。

６.UIUX改善提案を通して学んだこと

①ユーザの思考と行動に寄り添う

• 自分がサイトを訪れた場合を想定し、どんな思考になり、行動をするのかを考えることが重要。

②ゴールへの道筋でマイナスな面を洗い出す

• サイトとしてのゴール（ECサイトであれば商品を購入してもらう）を達成するまでの過程を整理し、その過程でマイナスな面（使いづらい、手間がかかる、わかりづらい等）をどう解決していくかを洗い出すこと。

③新鮮な情報ほど目立つ場所に

• 日々更新される情報（キャンペーン情報やランキング等）は一番目立つトップページに置くことで、常に新鮮な情報をユーザーに届けることができる。