プロジェクトを相談 相談する
事例 事例テンプレート · Dealer Workspace
Dealer Workspace自動車 · デジタルプロダクト
2025 Rush Mamba(在庫番号MV2457)のモーターサイクルページ:写真、価格、サイトのステータス、過去30日間の閲覧数、お問い合わせ、電話タップ
一台のモーターサイクル

サービス

  • プロダクトデザイン
  • UX/UIデザイン
  • フロントエンド開発

ツール

  • 競合分析
  • 市場調査
  • UX監査
  • 情報設計
  • ユーザーストーリー
  • ユーザーフロー

技術スタック

  • React
  • TypeScript
  • Vite
  • React Router
  • React Aria Components
  • CSS変数
  • IndexedDB

Dealer Workspace

モーターサイクルディーラーが顧客に返信し、来店を調整し、販売を進めるためのワークスペースです。メール、SMS、ウェブサイトの会話を一か所にまとめ、明確な担当責任のもと、モーターサイクルと次のステップをすぐに確認できます。

ディーラーの二つの側面

ウェブサイトは購入者がモーターサイクルを見つけてお問い合わせをするのを助けます。ワークスペースは、その文脈をディーラーの日常業務に引き継ぐよう設計されています。これらのデモは別々に動作しており、接続はライブではありません。

このプロダクトを作った理由

購入者はモーターサイクルについてメールで問い合わせ、テキストメッセージで続け、その後来店を希望するかもしれません。ディーラーはその会話を一つにまとめ、どのマネージャーが担当かを把握し、関心を明確な次のステップにつなげる必要があります。私たちは、返信、来店の調整、フォローアップを一続きのワークフローにすることを目指しました。

プロダクトに関する私たちの判断

顧客との会話を中心に据えました。メッセージにはチャネルが表示され、スタッフは同じ場所で返信方法を選べます。会話を顧客レコードに紐づけ、そこに担当マネージャーと関心のあるモーターサイクルをわかりやすく表示しています。

会話と来店をつなげました。スタッフがショールームの時間を提案し、購入者はオンラインで選択します。商談とタスクが次のアクションを引き継ぎます。各モーターサイクルには固有の在庫レコードがあり、別の公開ステップによって、ディーラーは購入者にウェブサイトで見せる内容を管理できます。

私たちの貢献

プロダクトの方向性を形づくり、関係性とワークフローを整理し、最初のバージョンをセクションごとに確認して、レスポンシブなフロントエンドを設計・構築しました。人々が目にするインターフェースと、各セクションを連動させるルールの両方を手がけています。

Dragster RR SCS(MV2485)に関するCarlos Mendezとの会話:ウェブサイトからの最初のお問い合わせに続くSMSメッセージと、メール、SMS、サイトチャットの返信コントロール
CarlosのウェブサイトでのメッセージとSMSを一つの会話に

購入者への返信を一か所で。

顧客はウェブサイトから始めて、テキストメッセージで続けることがあります。スタッフは購入者がどのチャネルを使っていても、返信時にそれまでのやり取りを確認する必要があります。

ウェブサイトのお問い合わせ、メール、SMSを同じチャット画面にまとめ、各メッセージにチャネルを表示しました。このサンプルでは、CarlosがウェブサイトからSMSへ移っています。スタッフは会話履歴の横で返信でき、その上に該当のモーターサイクルが表示されます。

「担当者」列のある顧客リスト:Ben CarterはEthan Cole、Carlos MendezはMia Chenが担当。従業員フィルターと各顧客の次のステップを表示
顧客の担当責任と次のアクションをチームに可視化

各顧客を担当マネージャーのもとに。

共有のディーラー窓口には、明確な担当責任が必要です。チームは顧客に担当マネージャーを割り当て、誰が関係を担当しているかを次のアクションとともに確認できます。

その担当責任を顧客レコードに結びつけました。連絡先から既存の顧客と判別できる場合、新しいお問い合わせはそのレコードにリンクされ、担当マネージャーが維持されます。会話とフォローアップ業務は同じ人に紐づいたままです。

Ben CarterとのBrutale 800に関するチャット:木曜日の仕事帰りに来店したいという依頼に対し、パネルが三つの時間を提案。「この時間を送る」と「調整」ボタン付き
Benのリクエストの横に候補時間を表示
購入者向けプレビュー:Brutale 800に関するBen Carter宛のメール。三つの来店時間ごとのボタン付き
購入者向けプレビュー:時間を選択して予約を作成
購入者向けプレビューで、11月5日(木)午後5:00(America/Los Angeles)から30分間の2026 Brutale 800の見学についてBenの予約を確認。「カレンダーに追加」アクション付き
Benがオンラインで来店を確定すると、予約時間がディーラーのチャットにも表示されます

メッセージを来店予約につなげる。

「木曜日の仕事帰り」のような依頼は、購入者がオンラインで確定できる来店につながるべきです。会話の中にショールームの候補時間を置くことで、スタッフはリクエストを目の前にしたまま来店を調整できます。

購入者が時間を選ぶと、その選択が会話に紐づいた予約になります。このデモでは、メールプレビューから購入者側のフローをお試しいただけます。

「新規」「適格」「提案」「交渉」の四列に未完了の商談を並べた商談ボード:各カードには顧客とモーターサイクルがあり、金額、次のステップ、担当者を表示、または未設定であることを示します
ボードには次のステップ、またはそれが未設定であることが表示されます
「DanielのRush試乗を確認」のタスク詳細:担当はSophia Reed、期限は11月5日午前11:00、顧客、商談、会話に紐づき、Danielの元のメッセージ付き
一つのタスクが購入者、商談、元のメッセージをつなぎます

返信の後も商談を進める。

返信や来店予約の後も、チームは次に何が起こるかを把握する必要があります。各商談には購入者、特定のモーターサイクル、次のアクションがまとまっています。

次のステップを、商談とタスクリストで共有するタスクにし、担当者と期限を設定しました。購入者の元のメッセージを添付したままにできるため、フォローアップする担当者は合意内容を確認できます。ボードは期限超過のステップと、次のステップが未設定の商談を強調表示します。

34台のモーターサイクルの在庫一覧:各行に写真、モデルイヤー、在庫番号、価格、在庫状況、サイトのステータス、閲覧数、お問い合わせ、掲載日数
各モーターサイクルに固有の在庫番号と掲載データがあります
分析:閲覧数が多いのにお問い合わせがない、またはサイト掲載期間が長いバイクにフラグを表示。その下に閲覧数、訪問者、お問い合わせ、お問い合わせ率、電話タップ、掲載日数の表
サンプルの掲載データで確認すべきモーターサイクルを強調表示します

どのモーターサイクルを詳しく確認すべきかを把握する。

同じモデルの二台でも、価格、在庫状況、サイト掲載期間が異なることがあります。まとめてしまうと、ディーラーの判断に必要な詳細が隠れてしまいます。

個々の在庫ユニットを在庫とレポートの基本にしました。バイクごとに閲覧数とお問い合わせが記録されます。分析画面は、閲覧数が多いのにお問い合わせがないといったパターンをディーラーに示し、詳しい確認につなげます。

2024 Rush Mamba(MV2464)の編集:「サイト上」パネルに新しい価格と「予約済み」がサイト未反映として表示され、「下書きを保存」と「変更を公開」ボタン付き
公開待ちの価格とステータスの変更。ウェブサイトはこのデモに接続されていません。

購入者に公開する前に変更を確認する。

新しい価格や「予約済み」のステータスは、ディーラーが提供する内容を変えます。スタッフにはこれらの編集を一緒に確認する機会が必要です。

「下書きを保存」と「変更を公開」を分けました。保留中の変更はフィールドごとに表示され、公開は意図的な次のアクションになります。ニュースとCSVインポートも同じルールに従います。

実際に動くディーラーワークスペース。

デスクトップ、タブレット、スマートフォンで動作するアプリで、顧客との会話、担当責任、来店予約、販売フォローアップを、在庫とウェブサイトの管理につなげます。サンプルデータでワークフローをお試しいただけます。変更内容はお使いのブラウザ内にとどまります。このデモはディーラーのウェブサイト、メール、SMSサービスには接続されていません。

その他の事例

JA