加盟店専用EC / 利用体験の検討

AP ONLINE

利用する人を、チームで思い浮かべながら。

営業・開発メンバーと利用場面を演じ、ペルソナとユーザーシナリオを共有。加盟店向けECのUIを検討。

AP ONLINEのPC・スマートフォン画面
画面は開発当時の提案デザインです。
プロジェクト期間
2020年〜2021年

プロジェクト概要

対象サービス
AP ONLINE (加盟店専用ECサイト) ↗
担当範囲
  • 要求定義の一部(ペルソナ、ユーザーシナリオ)
  • UI提案・UIデザイン
ツール・技術
  • Miro
  • Sketch

プロジェクトの目的

塗装業界の加盟店向けECサイトで、利用者にどのような顧客体験を提供するかをプロジェクトメンバーと共有。購入までの利用フローと画面を検討しました。

取り組みと制作過程

  • ユーザー中心設計に基づく解決策
  • 初期段階の情報可視化、プロトタイプ作成、ユーザーテストなどを用いた開発プロセス
  • ユーザー理解度を高めるために、開発者や営業職など巻き込んだワークショップ形式でペルソナを演じながら利用フローを検討

プロジェクトメンバーと一緒にワークショップを実施。
(ペルソナ、ユーザーシナリオ、簡易プロトタイプ等)
「利用者への解像度を高め、どのような顧客体験を提供するか?」
というサイトのゴールを、メンバー全員が共有するところから始めました。
UI設計の段階でも、メンバーそれぞれが「それって○○さん(ペルソナ)はどう思うかな?」を思い浮かべながらUI検討を行い、一緒に磨き上げて行きました。

ワークショップの様子1
ワークショップの様子1制作当時のワークショップの様子です。
ワークショップの様子2
ワークショップの様子2制作当時のワークショップの様子です。
SP版 利用フロー検討 (Figma)
SP版 利用フロー検討 (Figma)制作当時の検討資料・画面です。
ペルソナなりきりワークショップによるワイヤーフレーム検討 (miro) 事前に準備したペルソナと理想のシナリオをペルソナになりきって演じてみる仮説検証手法を用いました
ペルソナなりきりワークショップによるワイヤーフレーム検討 (miro)
事前に準備したペルソナと理想のシナリオをペルソナになりきって演じてみる仮説検証手法を用いました制作当時の検討資料・画面です。
スマホ版デザイン (Figma)
スマホ版デザイン (Figma)制作当時の検討資料・画面です。

お客様の声

以下は、制作実績の掲載時にいただいたコメントです。会社名・役職は当時の掲載情報です。

ご担当者から伺ったこと

担当者コメント)
要件定義の上流から関わって頂き、ワークショップの開催など、様々なご相談に乗って頂けたので助かりました。

ユーザビリティ)
旧サイトの課題であった購入までのプロセスがストレスなく行えるようになり利便性が向上しました。

ビジネス)
リニューアル後、ECサイトの利用率が向上しました。それに伴い、ECサイトからの売上も向上しました。

株式会社アステックペイント ご担当者様より

(クライアント様から頂いた声より抜粋)

公開後、担当の方から売上が上がったと伺いました。
もちろんUIデザイン確定後の組み込み以降は開発者、サイト運営の方々の積み重ねの成果でもありますが、携わったお仕事が良い成果に繋がったことは私たちも嬉しい限りです。

一緒に進めた方の声

営業担当と開発メンバーが一同に介してペルソナの設定、寸劇も含むユーザーシナリオの議論を通じてプロトタイプを作成していく過程は新鮮でした。
リリース後は複数の社内外の利用者から使いやすくなったと好評でした。

株式会社アステックペイント 担当者様

LET’S TALK

まだ、まとまっていなくても大丈夫です。

今の状況と、これから進めたいことをお聞かせください。内容と支援範囲を確認して、個別にお見積もりします。

info@cgfm.jpメールアドレスをコピー

たとえば、こんなことから

  • 相談したいこと・今困っていること
  • 対象サービス、または参加者のこと
  • 現在の検討段階・次に進めたいこと

分かる範囲で大丈夫です。
未定の項目があっても構いません。