【自主制作】UIUX改善

【目次】
①制作物
②課題内容
③要因分析と改善提案
④こだわった点・工夫した点
⑤制作を通じて学んだこと

①制作物

▼クライアント様からのUIデータ

▼改善提案をしたUIデータ

②課題内容

▼架空のクライアントからの依頼内容を元に、クライアントが感じているECサイトの課題に対してUIUX改善により解決案を提示する。

▼取り組みの目的
＝UIを改善することで顧客の購買体験を良くするとともに売り上げを伸ばしたい

下記2点の課題の要因を分析し、解決策を必須要件と推奨要件に分けて検討しました。

課題（１）：ほしい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い
課題（２）：フォームでの離脱率が大きくカートに商品が入っても購入にまで至っている人が少ない

③要因分析と改善提案

▼解決する課題（１）：ほしい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い
「ほしい商品が見つけづらい」という内容に対して、さらに2つの観点で課題を整理し要因を分析、改善策を検討しました。

▼完成したUI（改善策）

▼解決する課題（２）：フォームでの離脱率が大きくカートに商品が入っても購入にまで至っている人が少ない
「フォームでの離脱率が大きい」「カートに入っても購入に至らない」という課題に対して画面遷移ごとに課題を整理し要因分析、解決策の検討をしました。 
▼完成したUI（改善策）

④こだわった点・工夫した点

▼目的の「売り上げ向上」をぶらさない改善策の策定
課題としては「欲しい商品が見つからないこと」、「フォームでの離脱率が高いこと」の改善策ですが、ピンポイントの課題解決ではなく本来の目的である【売り上げ向上に繋がるかどうか】を軸に目的とターゲットをぶらさないことを意識し改善策を検討しました。

▼ペルソナ像に合わせた改善策の策定
ペルソナ像から、ターゲットであるミレニアム世代の女性はECサイトに慣れた人が多いため、ターゲット層が使うと思われるECサイト数社を比較し、足し引きする要素や動線の改善を検討しました。
またペルソナ像からターゲットは少しでも「面倒」「ほしい情報が不明確」であるとサイトから離脱してしまう可能性が高い一方、同じSHEの世界観を持つ仲間と繋がりたいという志向性が高いと分析。そこから、「手間を省く」「他の有名なECサイトに備わっている便利機能は備える」こと、「同じ世界観の人との繋がりを感じられるしくみ（レビューやシェア機能）により購買意欲を促進すること」も合わせて狙える改善策を決定しました。

▼トンマナを守りデザインの統一感を保つ
機能やコンテンツを追加する際、トンマナに合ったデザインになるよう、色合い、余白、フォント、フォントカラー、あしらい、アイコンを使用し世界観を崩さないようにしました。またもともとのトンマナにない要素はコンポーネントやバリアントを追加し後々の修正でも同じ要素を迷わず使えるようにしました。

▼プロトタイプで動きをつけて検証すること
プロトタイプで動きをつけてみるところまで取り組みました。プロトタイプも一緒に考えることでスムーズな動線になるよう調整しました。（購入前の最終確認画面で、修正のため配送情報を入力するカートまで戻ると手間が二重になるので、配送情報の修正のみ画面遷移ではなくオーバーレイ表示にするなど）

⑤制作を通じて学んだこと

・制作を通じてFigmaの基本操作を学びました。またFigmaが感覚的に使えて、共同作業する際にとても有効なツールであることを知りました。

・Figmaではショートカットやプラグインでかなり作業が効率化できるので、インプットとアウトプットをセットで学び作業効率向上を目指せることを学びました。

・FigmaもPhotoshopも、WEBデザインで制作するならコーディングの知識があった方が、コーダーと連携もしやすいデザインを作れて効率的だということを学びました。

・UI改善では、ユーザーが迷わないよう意外性より普遍性が重要で、類似サイトで使用されているデザインを日頃から意識して見ていれば改善を考えるのに役に立つことを学びました。