【自主制作】EC サイトUI/UX改善提案

目次

(1) 制作したUIの全体図

(2) 制作要件

(3) 課題に対する改善案

(4) 工夫したこと

(5) 制作を通して学んだこと

(1) 制作したUI の全体図

・改善前のUI

・改善後のUI

(2) 制作要件

・クライアント（架空）

クライアント名：SHE株式会社

キャリアスクール「SHElikes」、クリエイションパートナー「SHEcreators」の2つを主要事業とし、自分らしい生き方の実現に向けたサポートを行っている。

・サービスについて

サービス名：SHEloves

自社のCIを展開したグッズがメイン。今後コスメ・日用品・家具など生活に関わる商品の開発をしていく予定。

・取り組み目的

ECサイトのUI改善を通して顧客の購買体験を良くすると共に、売上を伸ばしたい。

・ターゲット

SHElikesの会員、または会員ではないが興味がある人/SHEの世界観が好きな人

(3) 課題に対する改善案

クライアントが抱える課題に対して課題が発生している要因を分析し、解決するための要件を策定して改善案を作成しました。

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

課題② ほしい商品が見つけづらく、商品をカートに入れずに離脱している人が多い

(4) 工夫したこと

①トンマナに合わせたUIの作成

ブランドの雰囲気が好きな方をターゲットとしていたため、新たにUIを追加・改善する際にはトンマナを崩さないように文字の太さや配色が馴染んでいるか気をつけながら制作しました。

②「直感的に使える」ECサイトのUIを分析

いくつかのECサイトやUIデザインを参考にし、「なぜこのUIになっているのか」「直感的に操作できたのはなぜか」を分析しました。その理由を言語化した上で今回の課題に取り入れることで、説得力を持たせつつ自分の言葉で意図を説明できるデザインを作ることを意識しました。

(5) 制作を通して学んだこと

課題解決のためのデザインを制作する過程

デザインの大きな役割の一つである「課題を解決する」ための基本の考え方として、以下の手順で制作を進めることを学びました。

1. 課題の把握

2. 課題が発生している要因の分析

3. 課題を解決するための要件を必要要件と推奨要件に分けて考える

4. 要件を満たすUIを考える