EL-PARKINGのwebサイトと電気自動車のQRコード決済による充電サービスの開発

🚀サービス概要
EL-PARKINGは駐車場に設置された充電器のQRコードをスキャンするだけで、
充電の開始からクレジットカードでの支払いまで、簡単に完了できるサービスです。

💻サービスサイト
https://elpark.net/

🏢クライアント様
株式会社エスエイエンジニアリング様

🌳担当者様
代表取締役 戸倉 曻 様

💡当社スコープ
IoT機器による電流制御・課金システムの構築
EL-PARKING サービスサイトの構築

🧱体制
　▪️ディレクター：1名
　▪️エンジニア：1名
　▪️デザイナー：1名

🪐期間
▪️機器調査：1ヶ月
▪️プロダクト開発：2ヶ月
▪️マーケティングサイト構築：1ヶ月
▪️試験・検証：1ヶ月

プロジェクト概要

株式会社エスエイエンジニアリング様（以下、エスエイエンジニアリング様）から使用電気量に応じた課金システムを作れないか、という相談をいただきました。

当初の課題

• リモートで電流を制御するための機器を選定したい。
• 使った電気量に応じて課金を行いたい。

まずはサービス立ち上げ前ということで、できるだけコストを抑えつつ、要件を実現できるシステムの検討を行いました。

機器にかかる費用やサービスコストの比較、実際に動作させての調査を行いながら、連携するIoTシステムの選定を行いました。

最終的に要件に合うシステムが見つかり、課金サービスの構築を開始しました。

課金システムSpark200をEL-PARKINGで採用することが決まり、サービスを訴求するためのサービスページについても追加でご要望いただき、EL-PARKINGのサイト構築も行いました。

成果物

• IoT機器のプロトタイプおよび連携システムの設計（1ヶ月）
  ・ハードウェアのコスト、運用の使いやすさを含めた比較・検討を実施
  →最終的にコスト要件を満たす、IoT機器の制御システムを提案
• 管理者向けアプリケーション（Web）
  ・IoT機器情報の登録および電力情報の収集機能
• ユーザー向けQRコード充電・決済システム（Web）
  ・事前登録とQRコードでのシンプルな充電・決済フローを実現
• EL-PARKINGサービスサイト(web)
  ・サービスを訴求するためのサービスページの提案・作成

①UIUX検討段階・技術調査

📍開発プロセス

1. お客様のご要望を詳しくヒアリング
2. ペルソナとユースケースの作成
3. ユーザー体験を整理 ユーザージャーニー作成
4. ワイヤーフレームの作成
5. デザイン作成

1. お客様のご要望を詳しくヒアリング

エスエイエンジニアリング様の現状とニーズを詳しくヒアリングし、以下の課題を明確化しました。

• リモートで電流を制御できる機器の選定
• 使用した電力量に応じた課金システムの導入

2. ペルソナとユースケースの作成

ヒアリング内容をもとに、実際の利用シーンを想定したペルソナを設定し、具体的なユースケースを整理しました。

3. ユーザー体験を整理 ユーザージャーニー作成

整理したユースケースをもとに、ユーザーの具体的な行動フローを可視化したユーザージャーニーを作成しました。

例：EV自動車利用者のユーザージャーニー

4. ワイヤーフレームの作成

ユーザージャーニーを通じてエスエイエンジニアリング様と認識をすり合わせた内容をもとに、具体的な画面設計に落とし込んだワイヤーフレームを作成しました。

5. デザイン作成

ワイヤーフレームを基に、ユーザー体験を考慮したデザインを作成しました。エスエイエンジニアリング様のご要望に沿ったカラーを取り入れ、直感的で操作しやすいUIの実現を目指しました。

開発について

技術スタック

Amplify Gen2 / Next.js / Nest.js /Type Script

全体的な基盤については、Amplify Gen2を採用して高速開発を行いました。

決済システムに関しては、Stripeを採用し、IoTデバイス自体はTuya.comを利用して内部で制御しています。

構成図

②サービスサイトの構築

エスエイエンジニアリング様が運営する「EL-PARKING」は、電気自動車の充電インフラを備えた駐車場サービスとして利用されていましたが、「EV車専用の月極駐車場サイト」としての価値をさらに強調したいとのご相談を受け、ご要望に沿ったサイト作成を行いました。

📍デザインプロセス

1. お客様のご要望を詳しくヒアリング
2. サイト構造の整理
3. ワイヤーフレームの作成
4. デザイン作成
5. STUDIOに実装

1. お客様のご要望を詳しくヒアリング

エスエイエンジニアリング様との綿密なヒアリングを通じ、サイト構造やコンテンツの整理、デザイン方針を明確化しました。

2. サイト構造の整理

エスエイエンジニアリング様にヒアリングした内容をもとにサイトマップを作成し、各ページの情報をわかりやすく整理＆ご提案しました。

3. ワイヤーフレームの作成

サイトマップをもとに議論した内容を具体的な画面設計に落とし込み、ワイヤーフレームを作成しました。
また、現在 駐車場数は増加していく段階にあるため、ユーザーが将来的に駐車場を簡単に利用・検索できるよう、拡張性を見据えた設計を目指しました。

4. デザイン作成

ワイヤーフレームをもとに、サービスの魅力を最大限に引き出せるようなデザインを目指しました。
また、エスエイエンジニアリング様のフィードバックや、弊社リードデザイナーからのアドバイスを取り入れながら、ユーザーにとって直感的で視覚的に魅力的なデザインを追求しました。

📍最終決定したデザイン

5. STUDIOに実装

最終決定したデザインをもとに、STUDIOでの実装を行いました。
また、アニメーションやレスポンシブの調整を行い、さまざまなデバイスで快適に閲覧・操作できる仕上がりを目指しました。

💻実際に作成したサイトはこちら↓↓
https://elpark.net/

ネクストアクション

• EV自動車以外へのサービス展開
• EV自動車利用者の声を反映し、さらなる充電体験の向上

📣お客様の声

株式会社エスエイエンジニアリング 代表取締役 戸倉 曻 様のインタビューはこちら👇