FuelBuddy Driver App は、ドライバーが実際に顧客へ燃料を配送するために使うアプリです。ドライバー向けに作ることには独自の難しさがあります。画面は直射日光の下でも読めなければならず、タップは多少ずれても許容される必要があり、路上ではいつでも通信が切れる可能性があります。私はまさにそうした条件に狙いを定めた一連の機能を、フロントエンドとその背後のデータ API まで含めてエンドツーエンドで構築しました。
作ったもの
- オフラインに強い UI: ドライバーは頻繁に電波を失うため、ルートや注文のデータをローカルにキャッシュし、圏外でも作業を続けられるようにしました。アプリは固まる代わりに変更をキューに溜め、接続が戻ると同期し直します。
- 位置情報と地図: リアルタイム GPS 追跡と地図ルーティングのフロントエンドを担当しました。頻繁な位置更新と地図の再描画を効率的に保ち、長時間のシフトでバッテリーを消耗させないようにしました。
- 現場向けの UX: いくつかの運用機能をエンドツーエンドで担当し、実際の条件に合わせて設計しました。高コントラストのレイアウト、大きなタップ領域、短いフォームにより、ドライバーが素早く安全に配送を記録できます。
- 背後にある API: これらの機能が読み書きする CRUD API を Hasura の GraphQL エンジン上で構築しました。そのため機能をエンドツーエンドでリリースできました。オフラインキュー、注文データ、配送記録はすべて私が担当したエンドポイントとやり取りします。
なぜ意味があったか
片手にスマホを持ち移動中という状況に合わせて設計したことで、現場でアプリをより素早く使えるようになりました。ドライバーはもたつく画面と格闘する代わりに、道路と配送に集中でき、配送が滞りなく進みました。