コスメ通販・ECアプリのUI/UXデザイン改善 -ドクターシーラボ

ドクターシーラボ通販・ECアプリのカスタマージャーニーマップ

UIUX design_11

カスタマージャーニーマップは、①商品を探す、②興味・関心を持つ、③購入する、④シェアする、といったシンプルな行動を想定しました。

探す

お目当の商品を見つけやすいようにキーワード検索はもちろん、バーコード検索やそもそも商品リストのUIデザインを整理して見つけやすくする工夫が必要だと考えられます。また、よく購入するようなお気に入り商品は登録して、マイページなどからすぐに購入できる動線も必要でしょう。

関心

商品の効果・特徴の解説や専門家からのアドバイス、口コミ情報などが見やすいUIデザインにすることで商品に対する安心感を持ってもらう必要がありそうです。

購入

画面遷移や入力項目が多いと離脱の原因になりやすいので、購入画面は1画面にとどめて、キーボード入力項目は極力少なくして、選択式にする方が良いでしょう。

シェア

商品を認知したり、購入を検討する上で知人からの口コミ情報は、いまだに重要な要素であるため、商品購入直後などにシェアできるような機能があった方が良いかもしれません。また知人などへのシェアはTwitterやFacebookよりもLINEを優先的に使用する可能性が高いため、そのようなUIデザインを意識した方が良さそうです。

ドクターシーラボアプリのヒューリスティック分析

次にヒューリスティック分析で既存のドクターシーラボ通販・ECアプリの主要画面における問題点を洗い出していきます。

トップ画面

UIUX design_12

①ファーストビューですが、キャンペーン部分の表示領域が大きく、商品カテゴリや一覧がすぐに見つけにく状態になっています。

②フッターメニューに「戻る」ボタンが常に表示されていたり、無料サンプルやキャンペーンなど一つにまとめられそうなメニューがあったり、使い勝手が良くなさそうなUIデザインになっています。

③商品を探すカテゴリ一覧がユーザーから見つけにくい画面の下側にあったり、タブ切り替えやアコーディオン開閉のUIが組み合わさっていて、スマホアプリのUIデザイントレンドから少し異なる印象を受けます。

検索結果画面

UIUX design_13

①検索ヒット数やカテゴリなどの領域が大きく、検索した商品一覧をファーストビューで見られないため、都度ユーザーがスクロールしなければならず、手間になりそうです。

②ページャー切り替えになっているため、縦スクロールの方が見やすいスマホにとっては少し使いづらいUIデザインになっています。

商品詳細画面

UIUX design_14

①ユーザーが気になるような商品価格、サイズ、解説などの情報が整理して表示されていない。また、購入ボタンが常に表示されないため、離脱してしまう可能性が高くなっている。

②商品詳細情報がタブやアコーディオンに別れていて、情報が見にくくなっている。

注文完了画面

UIUX design_15

①シェアボタンがなく、商品情報が拡散しにくい設計になっている。

ドクターシーラボ通販・ECアプリのUI/UXデザイン改善

トップ・検索画面

UIUX redesign_1

  • トップページは商品一覧画面にすることで、ペルソナが見つけたい商品をすぐに見つけられるようにしました。
  • スワイプすることで商品カテゴリを切り替えられるので、商品カテゴリの切り替えがスムーズになります。さらに細かい分類はヘッダーメニュー下のアコーディオン開閉で切り替えられます。
  • 並び替えボタンを置くことで、価格順や人気順で切り替えられ、気になる商品を見つけやすくしています。
  • バーコード検索機能もつけることで、持っている商品をすぐに検索できます。
  • 商品画像、商品名、評価点数、価格とペルソナが気になりやすい情報をシンプルに表示することで情報を把握しやすいようにしています。
商品詳細画面

UIUX redesign_2

  • ファーストビューに商品情報を整理して表示することで、ペルソナが情報を把握しやすいようにしています。
  • カートに入れるボタンやお気に入りボタンをフッターに固定して表示することで、ペルソナがアクションしやすく離脱を防ぎます。
  • 同じ商品類のサイズ変更もこの画面で簡単にできるようにすることで、サイズ変更の煩わしさを軽減します。
  • 商品の効果・特徴、使用方法には画像やテキストだけでなく、動画コンテンツも見れるようにすると、商品の良さをよりアピールできるかもしれません。
注文完了画面

UIUX redesign_3

  • 注文完了後にSNSシェアボタンを置くことで、知人などに簡単にシェアできるようにして、拡散を促進させるようなUIデザインにしました。商品の特性からLINEでのシェアが多いと考えられるため、LINEシェアボタンを先頭に配置しています。
  • この商品を購入した他のユーザーが購入した商品をレコメンドする機能をつけることで、ついで買いを促進し、平均購入単価の増加施策として使えるかもしれません。

その他のUI/UXデザインの方向性

UIUX design_19

最後にドクターシーラボ通販・ECアプリの他のUI/UXデザインの方向性としては以下のような施策も考えられます。

1.プッシュ通知の最適化

新規のキャンペーン情報やクーポンなどのポイント情報を出すタイミングやお気に入り商品が値下げしたタイミングなどに合わせてプッシュ通知を出すことで、ユーザーの訪問数を増やすことができると考えられます。

2.中国語などの外国語対応

ドクターシーラボの商品も中国などの海外への売上が前年比192.3%とチャネルの中でも一番大幅に増加していることから、アプリも中国語などの外国語対応を進めることで、アプリ経由での売上も増加させることが可能かもしれません。

3.クーポン/ポイントによるシェア促進

アプリのUI/UXデザインを改善しながら、シェアするとクーポンやポイントをもらえるようなキャンペーンなどを実施することで新規訪問数を増やしながら、リピート数も増加させる施策も考えられます。

最後に

いかがでしたでしょうか?

みなさんも気になるWEBサービスやスマホアプリを題材にして、チームなどでUI/UXデザイン改善案を考えて見ると面白い気づきがあるかもしれません。