Project 01: 定期購入機能の追加

Background

制作背景

GOOD EAT CLUBのオリジナル商品のサブスクリプション販売に合わせて、ECサイト内に定期購入機能追加のデザインを作成することになり、新規機能として設計を行いました。

Problem

考えなければならなかったこと

制作開始時点では、細かな仕様が全て決まっていたわけではなかったのですが、複数の契約・状態・操作・情報をユーザーが管理できる形に落とし込む必要がありました。

例えば、以下になります。

• 1人のユーザーが複数の商品をそれぞれ定期購入契約できること
• 契約ごとに配送日や現在の契約状態が異なる可能性があること
• 配送日の確認だけでなく、スキップや停止、解約などの操作ボタンが必要

Process & Solution

課題から取り組みと工夫したこと

1. 仕様の検討のためのUIの叩き台作成

言葉のみで仕様を話すよりも、具体的な画面があったほうが必要な機能を検討しやすいと考え、UIの叩き台を作成いたしました。

2. UIを見ながらPMやエンジニアとの仕様検討

叩き台を元に必要なもの、不要なものの洗い出しとシステムの考慮の面も含めて、 PMやエンジニアとUI修正→MTG→再度修正のやり取りを重ねました。

その際にエンジニアより、「契約中にクレジットカードを変更することもある」という意見があり、クレジットカード情報の編集機能の追加を行いました。

3. 複数の契約を状態ごとに整理

定期購入を複数並行で行った場合や、契約の状態が異なることがあります。商品を【ご利用中】【スキップ】【停止中】【解約済み】の状態ごとにタブで分け、契約の進行状況を軸に整理し、ユーザーは何が動いていて動いていないのかが把握できるようにいたしました。

4. 情報の利用頻度に合わせて優先度順位の設定

定期購入では、商品や配送日、スキップ・停止など頻繁に確認・操作する情報は見える位置に配置しました。一方、クレジットカードや配送先、過去の注文履歴など、頻繁には確認しない情報はアコーディオンにまとめ、モバイルでのスクロールが長くなりすぎないようにしました。

Project 02: 注文履歴の配送ステータスページのリニューアル

Problem

課題と現状の配送設計ついて

現状の注文履歴ページでは配送伝票番号や配送状況がわからず、CSへの問い合わせが増えていたことから、PMより注文履歴ページの改善依頼がありました。

またこのサイトは、商品は店舗から直接発送される形で、1つの注文でも店舗が違えばそれぞれ別々に発送されるという流れです。

Process & Solution

課題から取り組みと工夫したこと

1. 複数に分かれる配送を、店舗単位で整理

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

2. 配送の流れと現在のステータスを可視化

PM・エンジニアと配送ステータスの仕様を検討し、UIでは発送の流れと発送した商品の現在位置がわかるようにステータスバーを用いたデザインを提案しました。

また各ステータスをアイコン化し、現在の荷物のある場所を大きく表示させることで、自分の荷物のステータスがすぐにわかるようにし、ページを開くとステータスが現在位置まで移動するという挙動をつけて、更新されていることが感じられる表現にしてみました。

Project 03: レビュー機能追加

Background

制作背景

PMからユーザーレビュー機能のRevicoのツールを使用して、レビュー機能追加の依頼があり、GOOD EAT CLUB内のTOPと詳細ページに機能追加を行いました。

Problem

考えなければならなかったこと

Revico側で扱える機能やデータは決まっていたので、その仕様をどうGOOD EAT CLUBのUIに落とし込むか考える必要がありました。

主に考える必要があったことは

• レビュー一覧で、レビューコメントをどうみせるか
• 星評価アイコンをGOOD EAT CLUBのトンマナの中でどう表現するか
• 新たに加わった「高級感」というキーワードを、既存のトンマナとどう両立するか

上記の3つでした。

Process & Solution

課題から取り組みと工夫したこと

1. レビュー一覧の情報に優先順位をつける

タイトルがレビュー内容を読むためのキャッチになると考えたため、商品名よりもコメントタイトルを一番に目立たせるように太字にし、その下に星評価アイコン、コメント本文というように情報に強弱をつけました。

2. 星評価アイコンの色の検討

アイコンの色については、星として目立ちやすい【明るい黄色】、GOOD EAT CLUBのメインカラーを使用した【赤】、新しいトンマナキーワードとして出てきた「高級感」を持った【山吹色に近いゴールド】を候補にあげました。別のデザイナーより、幅広いユーザー層を踏まえ視認性も考慮したほうがいいとの意見をいただき、その観点を加えて検討し【山吹色に近いゴールド】を採用いたしました。