架空UI/UX改善提案(ECサイト)
UI/UX改善提案課題に取り組みました。ペーパープロトタイプ、デザインカンプ、改善提案資料を作成しました。【使用ツール】figma
目次
①要件
②UI/UX改善提案
③工夫したこと
④制作を通して学んだこと
①要件
プロジェクト概要
SHE株式会社が運営するECサイト「SHE loves」のUI/UX改善提案。
SHEの世界観を活かしたグッズを販売しているECサイトで、今後はコスメや日用品、家具など生活に関わる商品展開も予定している。
クライアントの課題
- カートに商品を入れても購入完了まで進まない人が多い
- 欲しい商品が見つけにくく、離脱が発生している
- 1回の購入点数が平均1点と少なく、購入単価が低い
ターゲット
- SHElikes会員
- SHEに興味を持つ非会員
- SHEのブランドや世界観が好きな人
ペルソナ
小宮れい(29歳)
東京都在住の事務職。
SHElikesでWebデザインを学んでおり、将来はフリーランスを目指している。
SHEの世界観に共感して入会し、受講生同士の交流も活発。
「SHEの世界観にもっと触れたい」「学習モチベーションを高めたい」と考えている。
改善の目的
- 購入完了率を上げる
- 商品を探しやすくする
- 購入点数を増やし、客単価を向上させる
②UI/UX改善提案
クライアントが抱えている課題に対して、発生してしまう要因を仮説を立て、対決策を提示した資料を作成しました。
●課題1:フォームでの離脱率が大きく、カートに商品が入っても購入完了まで至っている人が少ない

●課題2:欲しい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い
1回の購買における商品購入数が平均1個となっており、購入単価が低い
・改善案


③工夫したこと
●基本デザインルール
既存のECサイトのブランドイメージ・クオリティを保つため、トンマナを揃えてUIパーツを変更・追加しました。
●わかりやすい提案資料
提案資料については、クライアントが解決したい課題に対して、目的と改善策とセットにしました。追加・変更箇所を赤枠で囲み理解しやすいような資料作成を意識しました。
●課題と直接関係ありませんが、ターゲット層にある、「会員ではないがSHEに興味がある人」に着目し、ゲスト購入の下に体験レッスンのバナーを作って入れた事は今後の購入や世界観に触れるきっかけにつながる良い提案ポイントだと思っています。

④制作を通して学んだこと
●UI/UXの一般パターン
課題に取り組みながら、多くの類似サイトを見て参考にしました。ショッピングサイトは、感覚的に使える工夫がたくさんされていることに改めて感動しました。「入力フォーム」や「カート」などセクションごとに、それぞれのサイトの色はあるものの、大体共通して必要な情報やパターンがあることも知る事ができました。
●UI/UX改善の一連の流れ
課題に対する要因に仮説を立て、改善点を考え、実際にデザインに反映させるという流れがわかりました。改善点を考える際、現在のユーザー行動やペインポイントを深く理解してデザインに落とし込むことを学びました。
●基本デザインルール
工夫点にも挙げておりますが、もっともっとデザインルールに則って作っていく観点を学びました。必須項目などは赤にしているサイトが多く、最初は目立つことを優先しましたが、世界観を大切にしているサイトなのでデザインルールの中で目立つものを提案した方が、ブランドイメージ・クオリティの保持につながる事を学びました。
●UI/UXデザインのミッション
今回の提案では購入単価を上げるための提案として、「送料無料」を作成しましたが、それはUI/UXデザイン改善の粋から外れてしまうのでブラッシュアップしたものからは除外し、サイトの中でどう解決するかという考え方を学びました。