GOOD EAT CLUB UI/UX改善・機能追加

Framer CMS
Framer CMS
Framer CMS

GOOD EAT CLUBは食を愛する人たちが選んだ商品を購入することができ、尚且つ店舗自体にもGOOD EAT CLUBを通してチップで支援のできるECサイトです。その中で私は配送ステータスページのリニューアルや、サブスクリプションの機能追加などのデザインを行いました。

Client

GOOD EAT COMPANY

My role

UIデザイン

The team

1 × プロジェクトマネージャー 1 × デザイナー 1 × フロントエンドエンジニア 1 × バックエンドエンジニア

Period

2022.06 - 2023.02

  1. 注文履歴の配送ステータスのリニューアル

現状の注文履歴ページでは配送伝票番号や配送状況がわからず、カスタマーサポートへ配送の問い合わせが増えていたことから、注文履歴の1ページ内で完結する配送ステータスがわかるページに改修を行いました。

一つの荷物の配送状況をまとめる

商品は店舗ごとに発送されるので、一回の注文でも商品が複数あれば配送日にばらつきがあることがあります。そこで各荷物ごとに【現在の配送状況】【配送日】【伝票番号】【送料】を入れて、一つの配送状況にまとめました。


自分の荷物のステータス確認する

発送した商品の現在位置がわかるようにステータスバーを用いたデザインを採用しました。また各ステータスをアイコン化し、現在の荷物のある場所を大きく表示させることで、自分の荷物のステータスがすぐにわかるようにしました。またページを開くとステータスが現在位置まで移動するという挙動をつけて、リアルタイム感を出してみました。

一つの荷物の配送状況をまとめる

商品は店舗ごとに発送されるので、一回の注文でも商品が複数あれば配送日にばらつきがあることがあります。そこで各荷物ごとに【現在の配送状況】【配送日】【伝票番号】【送料】を入れて、一つの配送状況にまとめました。


自分の荷物のステータス確認する

発送した商品の現在位置がわかるようにステータスバーを用いたデザインを採用しました。また各ステータスをアイコン化し、現在の荷物のある場所を大きく表示させることで、自分の荷物のステータスがすぐにわかるようにしました。またページを開くとステータスが現在位置まで移動するという挙動をつけて、リアルタイム感を出してみました。

一つの荷物の配送状況をまとめる

商品は店舗ごとに発送されるので、一回の注文でも商品が複数あれば配送日にばらつきがあることがあります。そこで各荷物ごとに【現在の配送状況】【配送日】【伝票番号】【送料】を入れて、一つの配送状況にまとめました。


自分の荷物のステータス確認する

発送した商品の現在位置がわかるようにステータスバーを用いたデザインを採用しました。また各ステータスをアイコン化し、現在の荷物のある場所を大きく表示させることで、自分の荷物のステータスがすぐにわかるようにしました。またページを開くとステータスが現在位置まで移動するという挙動をつけて、リアルタイム感を出してみました。

  1. 定期購入機能の追加

サブスクリプション商品の発売に合わせて、ECサイト内に定期購入機能追加のデザインを作成しました。サイトの機能追加にあたって、エンジニアとは毎週MTGを行い、必要要件の洗い出しやサイトの機能上で出来ることとできないことを教えてもらいながら、デザイン提案を重ねていきました。

  1. 定期購入機能の追加

サブスクリプション商品の発売に合わせて、ECサイト内に定期購入機能追加のデザインを作成しました。サイトの機能追加にあたって、エンジニアとは毎週MTGを行い、必要要件の洗い出しやサイトの機能上で出来ることとできないことを教えてもらいながら、デザイン提案を重ねていきました。

  1. 定期購入機能の追加

サブスクリプション商品の発売に合わせて、ECサイト内に定期購入機能追加のデザインを作成しました。サイトの機能追加にあたって、エンジニアとは毎週MTGを行い、必要要件の洗い出しやサイトの機能上で出来ることとできないことを教えてもらいながら、デザイン提案を重ねていきました。

定期購入ごとの切り替えを行う

定期購入を複数並行で行った場合や、利用解約が繰り返されることも考え商品の【ご利用中】【スキップ】【停止中】【解約済み】をタブで切り替えることができるデザインにしてみました。


定期購入の各注文の表示方法

定期購入の場合、契約した商品ごとに配送先、請求先やカード番号が違う可能性があります。契約商品ごとにボックスをアコーディオン化して、モバイルでのスクロールが長くなることを避けるためのデザインを採用しました。

定期購入ごとの切り替えを行う

定期購入を複数並行で行った場合や、利用解約が繰り返されることも考え商品の【ご利用中】【スキップ】【停止中】【解約済み】をタブで切り替えることができるデザインにしてみました。


定期購入の各注文の表示方法

定期購入の場合、契約した商品ごとに配送先、請求先やカード番号が違う可能性があります。契約商品ごとにボックスをアコーディオン化して、モバイルでのスクロールが長くなることを避けるためのデザインを採用しました。

定期購入ごとの切り替えを行う

定期購入を複数並行で行った場合や、利用解約が繰り返されることも考え商品の【ご利用中】【スキップ】【停止中】【解約済み】をタブで切り替えることができるデザインにしてみました。


定期購入の各注文の表示方法

定期購入の場合、契約した商品ごとに配送先、請求先やカード番号が違う可能性があります。契約商品ごとにボックスをアコーディオン化して、モバイルでのスクロールが長くなることを避けるためのデザインを採用しました。

3. レビュー機能追加

ユーザーレビュー機能であるRevicoのツールを使用し、GOOD EAT CLUB内のTOPと詳細ページに機能追加を行いました。

3. レビュー機能追加

ユーザーレビュー機能であるRevicoのツールを使用し、GOOD EAT CLUB内のTOPと詳細ページに機能追加を行いました。

3. レビュー機能追加

ユーザーレビュー機能であるRevicoのツールを使用し、GOOD EAT CLUB内のTOPと詳細ページに機能追加を行いました。

投稿レビューカードのセクションを追加

GOOD EAT CLUBのトンマナ合わせながら、投稿レビューのカードのデザインを作成しています。星のレビューアイコンを入れるにあたっては、この記載が一番目について欲しい場所だと考えたので、ユーザービリティに考慮しながら色の選択を行いました。


投稿レビューカードのセクションを追加

GOOD EAT CLUBのトンマナ合わせながら、投稿レビューのカードのデザインを作成しています。星のレビューアイコンを入れるにあたっては、この記載が一番目について欲しい場所だと考えたので、ユーザービリティに考慮しながら色の選択を行いました。


投稿レビューカードのセクションを追加

GOOD EAT CLUBのトンマナ合わせながら、投稿レビューのカードのデザインを作成しています。星のレビューアイコンを入れるにあたっては、この記載が一番目について欲しい場所だと考えたので、ユーザービリティに考慮しながら色の選択を行いました。


©️ Yuri Yamada 2024