ECサイトの売上を伸ばす!UI/UX改善提案
SHElikes MULTI CREATOR PROJECTにて、ECサイトのUI/UX改善提案課題に取り組みました。ペーパープロトタイプ、Figmaを使用したデザインカンプ、改善提案資料を作成しました。(制作期間:約2週間)【使用ツール】figma
【目次】
1.クライアントの依頼内容
2.作成した改善提案資料
3.工夫した点
4.制作を通して学んだこと
1.クライアントの依頼内容
ECサイトの売り上げを伸ばすためにUIUXの改善取り組みたい。3つある課題の中から2つを選び、解決案を提案資料として作成してほしい。
2.作成した改善提案資料
🔸修正前のUI
🔸改善修正をしたUI
🔸改善提案資料
課題が発生をしている要因を仮説立て、解決するための必須要件と推奨要件を提案しました。
◽️課題1 ほしい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い
要因:商品の並び方がパターン化されていないため、閲覧することにストレスを感じ、離脱している
🔸完成したUI(解決方法)
ページ上部とフッターナビに検索エンジンを設置、カテゴリーごとに並べることで商品を探しやすくし、ECサイトの閲覧時にストレスを与えないことを意識しました。
🔸工夫ポイント
今後も新商品を展開する予定などで、1度だけの訪問では無く、リピーターを確保したいという狙いからお気にりボタンの設置を提案しました。
ヘッダーナビの部分のお気に入りボタンから、登録した商品を閲覧することができるので、欲しいと思ったタイミングを見逃さずに、すぐに商品にアクセスできるよう利便性を意識しました。
◽️課題2 フォームでの離脱率が大きくカートに商品が入っても購入にまで至っている人が少ない
要因:フォームの入力完了までの工程数が多いと感じ、手間になり離脱してしまう
🔸完成したUI(解決方法)
購入完了までのステップを明示し、見通しを立ています。
フォームの入力画面では、必須マーク・記入例を追加し、スムーズに入力をできる仕組みにしました。
3.工夫した点
トップページではユーザーの好みで商品を探しやすいように、”カテゴリーから探す”、”ランキング”、”おすすめ商品”、”新着商品”のセクションを設置しました。
買い物の体験を楽しんでもらえるには、スムーズな操作性が大切と考えました。細かい仕様については、普段利用するECサイトを参考に取り入れました。
4.制作を通して学んだこと
🔸知識・情報収集が大事
使いやすさとストレスを感じさせないという視点で制作をしました。UIについて解説サイトを見ると、カゴ落ちの理由やサイト離脱の要因について共通している内容が多かったです。すでに確立されているUIのルールについての理解を深めるために、”はじめてのUIデザイン”という書籍を購入をしました。
🔸改善アプローチを考える
課題に対する要因を仮説立て、参考サイト・書籍の内容を比較しながら、一般的なECサイトの制作とのズレがどこになるか、そのズレを修正するためにはどうすれば良いのかを考えながら取り組むアプローチ方法について学ぶことができました。
普段から利用しているECサイトがどのようなUIルールに基づいているのか、書籍を用いながら分析し、今後も学んでいきたいです。