【課題】ECサイトUIUX改善
⚫︎SHElikes MULTI CREATOR COURSEでの課題制作 既存のWebサイトにおいてクライアントが感じている課題をUI/UXデザインにより解決する改善策を考える提案資料 制作期間:2週間
◎課題要件
◎ペルソナ
◎ 01 解決する課題
フォームでの離脱率が大きくカートに商品が入っても購入完了まで至っている人が少ない
⚫︎課題が発生している要因
①カートに入っていることを忘れていてそのままにしていることが多い
②気になるけど詳細が分かりづらく即決までに至らない
③フォーム入力がめんどくさくなりそのまま離脱
◎解決するための要因
⚫︎必須要因
①カートに入っていることがわかりやすいようにする
②詳細画像を追加する
③ログインすると入力の省略/新規登録やゲスト購入の人の負担を減らす
⚫︎推奨要件
①Amazonなどのアカウントから決済できるようにする
◎完成したUI
❶カートの上に数字を表記
数字を置くことで何個カートに入っているかが一目でわかるようにすることで気づけるようになる。また赤色で目立つようにする。
❷商品の下に画像を更に追加する
ネット販売なのでより詳細画像を増やすことにより、素材や模様などユーザーにより商品を知ってもらい購入までに進んでいただける。
❸お支払い画面のお客様情報の入力省略
お支払い手続きがスムーズに入力できるように郵便番号から住所の省略や都道府県のプルダウン、間違った時の赤字、見本の入力例を記載することによりユーザーが感覚的にわかるような設計、また入力が長いなと感じ離脱するのを防ぐためにお客様情報とお支払い情報のページを分けて負担の軽減をしました。
❸ログインすると入力省略
SHElikes , SHEloves会員はすぐにログインできるように、入力をしなくても会員データから自動入力されてログイン後そのまま決済のページに飛べるように別のページを追加しました。
◎ 02 解決する課題
一回の購買における購入商品数が平均一個となっており、購入単価が低い
⚫︎課題が発生している要因
①ページ内で商品のアピールがない/新しい商品などが出ても気付きにくく情報が入ってこない
②最後の後押しする項目がどのページにもない
◎解決するための要因
⚫︎必須要因
①カートに入っていることがわかりやすいようにする
②詳細画像を追加する
⚫︎推奨要件
①インスタなどに繋げ実際に使っている様子をUP
②レビューページを作る
◎完成したUI
❶トップページやバナーを盛り込み商品アピール
トップページをスワイプすると最新情報やお得情報などユーザーの購買意欲を高めるコンテンツを設置。自分の知らなかった情報に触れることもできる。また新しく出た商品などユーザーがすぐにわかるようにNEWという表記で目立たせる
❷おすすめページや観覧したページなどを設置
あなたにおすすめの商品などピックアップされたものが表示され、アピールする。また購入手続きに進むボタンの下にあなたが観覧したページを置くことで気になっているものが表示されるようになっているので最後の後押しでアピール。
◎工夫した点
課題の解決としてログインページを追加で作り、ターゲットであるSHElikesの会員 、まだ会員ではないがSHEに興味がある人とどちらもスムーズにお手続きに進めるようなUIを作りました。またSHEの世界観が好きな人へのアプローチとしてバナーなど常にユーザーに情報が早く入り、より世界観がわかるようなコンテンツを上部に持ってくることでページの利用率UPも意識しました。