Project Goal
Amazonの情報量が多すぎるチェックアウト画面を、ユーザー中心で洗練されたインターフェースへと変革する。本プロジェクトの目的は、視覚的なノイズや認知的負担を排除し、ユーザーがスピーディーかつ明確に、そして安心して購入を完了できるようにすることで、最終的にモバイルユーザーのコンバージョン率を向上させること。
※免責事項： 本プロジェクトは教育およびポートフォリオ目的で制作されたコンセプトです。Amazon.com, Inc.とは一切関係がなく、また承認も受けていません。
UX Solutions & Key Features
1) 情報アーキテクチャの整理と認知負荷の軽減
従来の画面では、法的な注意書きやプロモーション（Prime Video）、購入に必要な情報が混在し、情報過多の状態になっていました。 そこで、「支払い」「配送先」「到着予定」といった意味ごとに情報を整理し、視認性の高いセクション構成に再設計しました。これにより、ユーザーは短時間で内容を把握し、スムーズに次のアクションへ進めるようになります。
2) ビジュアル階層とコンバージョン最適化
In the redesign, I prioritized the “Order Total” and the “Place Your Order” CTA by moving them to the top-of-the-fold. By using a high-visibility yellow and clearing the surrounding visual noise, I created a clear path to purchase. This ensures that the user’s primary intent—buying the product—is never overshadowed by secondary information like advertisements.
3) タッチ操作とモバイル最適化
フィッツの法則に基づき、ボタンや選択項目のタップ領域を拡大し、要素間の余白も十分に確保しました。これにより、片手操作でもストレスなく利用できます。 また、配送日選択の誤タップといった操作ミスを防ぎ、外出先でも快適に使える体験を実現しました。
4) マイクロコピーと信頼性の向上
Enhanced Trust Signals through Content Clarity
画面上部にあった長く分かりづらい説明文を、シンプルで要点が伝わる内容に整理しました。加えて、商品サムネイルを見やすく配置することで、「何を購入するのか」を一目で確認できるようにしています。
さらに、獲得ポイントや送料割引などの情報を分かりやすく提示することで、購入直前の安心感と納得感を高めています。
5. デザインシステムと拡張性（エンジニア視点）
本デザインは見た目の改善にとどまらず、コンポーネントベースで設計されています。各要素を再利用可能な単位として設計することで、一貫性のあるUIを維持しつつ、実装のしやすさも考慮しています。 その結果、開発時の負担を抑えながら、将来的な拡張にも柔軟に対応できる設計となっています。
Before
After
