ハンズ セミセルフレジ

迷うことなくスムーズに

お客さまが操作に迷わないように、クレジットカードの差し込み方や現金の投入位置など、言葉で説明すると冗長的でわかりづらいものをアニメーションで表現することで、視覚的に情報を伝えています。また、日本語が読めないお客さまでもアニメーションを見て操作していくと、支払いが完了できるように配慮しました。

ボタンをタップした後や現金を投入した後といった、お客さまがアクションを起こした時に発生するフィードバックはアニメーションや音声で丁寧に伝え、操作が無事に進行しているという安心感が持てることを大切にしています。 特にエラーに関しては、それぞれのエラーに対して解決策をイラストでも提示することで、お客さまの不安やストレスを軽減することを意識しました。

ハンズではDIY用品など専門性の高い商材の取り扱いが多く、専門知識が豊富なフロア店員も多いため、わからないことは質問をして買い物ができるという点で独自の価値を持っています。 セミセルフレジのありかたも、利便性を追求するだけではなくフロア店員の親切さ・安心感を抱かせるものでありたいという考えのもと、ビジュアル提案を行いました。

操作が難しそうな印象を極力軽減するため、店員さんの親切さ・安心感を意識し「易しく見えること」を意識したビジュアルになっています。全体的に丸みを帯びたスタイルで統一し、優先度の高いボタンに自然と目が向き、タップできるようにアイコンやアテンションを付けています。

ハンズのブランドカラーである深緑を効果的に使うため、背景やアクションカラーなどの要素にブランドカラーを割り当てたカラーパターンを作成しました。他の画面に展開したときのリスク要因を洗い出し、最適なバランスを探った上でカラー設計提案を行いました。

フィールドワークとして、他社のスーパーや商業施設のセミセルフレジを調査・分析し、支払いを完了するための最も簡単なフローを探りました。お客さまを迷わせないために「1画面1タスク」を原則として、以下の3つの要素に情報を分類して画面設計を行いました。

1.画面を完了させるための指示
2.画面の指示を実行するためのアクションボタン
3.画面の指示を実行するために確認する詳細・補足情報

この3つの要素をそれぞれレイヤーとして明示的に分けて、全てのメインフロー画面で一貫性を持たせています。

セミセルフレジは実際の店舗に置かれるものだからこそ、リアルタイムに関わるユーザーは、会計をしたいお客様だけではありません。 Goodpatchは、会計をしたいお客様やそのサポートをする従業員がセミセルフレジを操作する時に、どのようなオペレーションが発生し、どのように目的を達成するのかを一連の体験と考え、お客様がレジの列に並ぶところから実際に袋詰めをして売り場を離れるところまでのリアルなユーザー体験を、サービスブループリントという手法を用いながら設計しました。

また、実際にイレギュラーが起こった際、どのような人員を売り場に配置して最短で問題解決をするのかというオペレーションの設計／提案も行いました。

今回はアプリケーションだけではなく、関連機器とのインタラクションも含めた体験をデザインする必要があったため、実際の機器をお借りして、機器の配置なども試しながらよりわかりやすくスムーズに目的達成ができる体験を提供するためのユーザーテストを行いました。 実際の会計に近い形でユーザーに触ってもらい、ユーザーの行動を密に観察することによって、更にわかりやすい体験を提供するためのUIデザインへとブラッシュアップすることができました。

今回対象となるのはセミセルフレジなので、ユーザー体験を考える上でお客様のことだけではなく、実際に設置される店舗の従業員の方が働きやすい体験を考えることもとても重要です。

そのため、Goodpatchメンバーとクライアントのチームで一緒に、セミセルフレジが導入される店舗に何度も足を運び、実際に店頭で接客をする従業員の方や店舗責任者の方と意見を交わしました。これらの意見交換を通じて、今後を見据えたセミセルフレジの体験をユーザー目線でも現場目線でも作っていける土台とすることを目指しました。

現状のレジの課題やセミセルフレジを設置した時に発生し得るオペレーション、売り場からの導線、そしてセミセルフレジに優先して誘導したいお客様の属性まで、現場のことを熟知する従業員の方だからこそわかる気付きを多くいただき、お客様と従業員の体験を研ぎ澄ましていきました。