E-Shop Gifting Services Project
CITYSUPER LIMITED
LOG-ON は、city’superブランドのもとで展開されているガジェットとライフスタイルの店舗で、最良で最も包括的なアフターサービスを顧客に提供することに重点を置いています。店舗のギフトラッピングサービスは以前から提供されていましたが、オンラインストアではこの機能がありませんでした。私はオンラインストアのWebおよびUIデザイナーとして、このプロジェクトで既存のWebサイトインターフェースを強化し、ギフトラッピングサービスを追加する役割を担いました。
まず、店舗のギフトラッピングサービスのプロセスを理解し、それをデジタル化してオンラインプラットフォームにどう実装するかを考える必要がありました。基本的なプロセスは以下の通りです：
1
顧客がアイテムを選択する
2
ギフトボックスや／またはグリーティングカードを選ぶ
3
支払いを進める
このプロセスで発生する可能性のある問題をリストアップし、それに対処するためのユーザーフローを作成しました。
マーケティング、物流、事務チームの同僚と複数回プロセス確認を行った後、モックアップの作成を始め、機能が円滑に動作することを確認するために何度もユーザーテストを実施しました。
レイアウトが確定した後、レスポンシブレイアウトの開発を開始しました。以下が最終的なレイアウトです：
1 チェックアウトページで、ユーザーが「ギフトラッピング設定」をクリックしてギフトハブサービスを開始します。
2 ギフトハブのポップアップページが表示されます。上部にはサービス情報とタブに説明が含まれています。ユーザーは下部でラッピングする商品を選び始めることができます。
3 商品を選択した後、 “NEXT” ボタンが表示され、次のステップに進みます。ユーザーがサービスをキャンセルしたり、チェックアウトページに戻りたい場合は、 “CANCEL” ボタンをクリックするだけで簡単に戻れます。
4 ユーザーは希望するギフトボックスやカードを選ぶことができます。
5 ギフトカードとボックスの詳細は、それに応じて表示されます。
ユーザーが設定を完了したら、 “NEXT” ボタンをクリックするだけで簡単に戻れます。
もしユーザーがギフト設定をリセットしたい場合は、 “CLEAR GIFT BOX” ボタンをクリックしてステップ1に戻ることができます。
また、ユーザーは “CANCEL” ボタンをクリックしてチェックアウトページに戻ることもできます。
ユーザーが設定を完了したら、 “NEXT” ボタンをクリックするだけで簡単に戻れます。
もしユーザーがギフト設定をリセットしたい場合は、 “CLEAR GIFT BOX” ボタンをクリックしてステップ1に戻ることができます。
また、ユーザーは “CANCEL” ボタンをクリックしてチェックアウトページに戻ることもできます。
6 ギフトラッピング設定が完了した後、ユーザーは荷物の詳細を入力してチェックアウトを進めることができます。
もしカートに他にもギフトラッピングしたい商品がある場合は、 “ADD YOUR NEXT GIFT BOX” ボタンをクリックして、ギフトラッピングのプロセスを繰り返すことができます。
もしカートに他にもギフトラッピングしたい商品がある場合は、 “ADD YOUR NEXT GIFT BOX” ボタンをクリックして、ギフトラッピングのプロセスを繰り返すことができます。
7 ギフトラッピングサービスが完了すると、選択されたボックスとカードがカートページに表示されます。
同時に、オンラインストア専用の限定ギフトボックスとグリーティングカードもデザインしました。
