1年ちょっと前、Square オンラインチェックアウト体験は少し混乱をまねきました。全体的な体験を見直すことなく、着々と機能を追加してきた結果、体験とコードの両方の観点から、詰め込みすぎで混乱が生じました。全体的な見直しが大幅に遅れていました。
私たちは、Square オンラインチェックアウトを柔軟で拡張性のあるプラットフォームとして、長期的なビジョンに合った、最高水準の本当に素晴らしい支払い体験を想像していました。
デザイナー、エンジニア、プロダクトマネージャーが関与する部門間デザインスプリントに関するイニシアチブを開始しました。オンライン購入体験についての弊社のビジョンが伝わる、原則を定めることが目標でした。また体験を豊かにするための要件についても話し合いました。この体験を軽く見ることはしたくありませんでしたので、基本的と思われることでさえも議題にしました。
この体験を軽く見ることはしたくありませんでしたので、基本的と思われることでさえも議題にしました。
さまざまなお会計体験（bobaやグリーティングカードの多数のオンラインでの発注）の検討、奇抜なアイディアの草案、今技術的に実現可能なことおよび後に実現可能なことの議論を行った後、以下の原則を定めました。
**モバイルを最優先に。**Square オンラインビジネスの取引の約80%はモバイル端末から行われていますので、モバイルでの体験を完璧にすることで大多数の購入者が期待する体験を満たす、または上回ることができると思われます。
摩擦を最低限に。ステップを減らし、タップを減らし、タイプすべきことを減らして、購入者向けのプロセスをスムーズにし、すばやく円滑に購入できるようにします。
スケーラブルでレスポンシブに。弊社のアプローチは、さまざまなな加盟店さまのニーズに対応できることが必須であり、バーティカル市場や利用ケースに向けて、機能を拡張し続けながらSquare オンラインビジネスとともに成長させる必要があります。
モバイルインタラクションパターンを利用。入力するフォームにより数字キーパッドを表示させたり英字キーパッドを表示させたりと変化させる、などのきめ細かなインタタラクションで体験をより一層改善できるはずです。
原則を定義いたしましたので、ビジュアルで色どりを添えてみる準備が整ったところです。サイトデザインチーム作成の既存のコンポーネントやパターンを活用しましたが、全体的な流れや情報ヒエラルキーはゼロから構築しました。
発送の設定セクションのバリエーション
最終的な方向性は、加盟店さまおよびオーダーのニーズに合わせて非表示、再配置、または拡張することが可能なさまざ機能のセクションを用いる、視覚的に抑制されたレスポンシブでモジュラー式なものとなりました。最も大きな変更は、ステップを踏む流れをやめにして、単一ページビューに移行したことでした。これにより必要なタップの回数が大幅に減りました。特に、ネイティブなコントロールを使ってエレメントからナビゲートするモバイル環境で顕著でした。
特に、変更のリリースにより既存の加盟店さまを混乱させ売上ロスを引き起こさないよう、注意を払う必要がありました。
同時に、そのデザインはFigma内での自由参加の方式でしたので、エンジニアリングは彼らのアプローチを構築して、真新しいお会計プラットフォームを作りました。バックエンドアプローチは、フロントエンドの書き換え方に多大な影響をおよぼす可能性があります。これらの議論にぴたりと沿ったデザインとし、ユーザー体験を心に留めるよう心がけました。特に、変更のリリースにより既存の加盟店さまを混乱させ売上ロスを引き起こさないよう、注意を払う必要がありました。
現在のお会計体験の機能の変更はせずに、スキンの変更から始めることに決め、エンジニアリングがお会計の各部分を書き換えるときに、つぎはぎだらけのビジュアルにならないよう、そしてバックエンドの段取り替えが加盟店さまにも購入者にも見えないよう気を遣いました。
再集計（左）と修正（右）の支払い方法体験
エンジニアリングとデザインをこのアプローチ上で整合させた後、今度はお会計ファネルの各部の分析に取りかかりました。会話や新しい体験の全体的なパフォーマンスを追跡し注視する必要があったのです。
注意に注意を重ねて、スキン変更版をローンチし、後に書き換えて何度もA/Bテストを行いました。弊社が行った変更が原因で購入者を混乱させるという可能性はなかったのですが、加盟店さまの売上ロスはあってはならないことでしたので、慎重過ぎるぐらい慎重になることを選びました。
本プロセスはデザイン主導のものとして始まりましたが、濃密な部門間のコラボレーションなしでは、そして手始めに定義した原則を絶えず参照することなしでは、成し遂げることはできなかったと思われます。この体験が重要であったことは誰の目にも明らかでしたし、加盟店さまのため、彼らの顧客のため、そしてオンラインビジネスの未来のために最適なものを作りたかった、それだけなのです。