11/18 に名古屋で開催された技育 CMAP キャラバンハッカソン vol.5 に出場し、最優秀賞をいただきました。
技育 CMAP とは
技育 CAMP は、人気 IT 企業などが参加する就活支援サービス「サポーターズ」のイベントで、1 週間で集中して成果物を開発し、エンジニアとしてレベルアップを目指すイベントです。そのイベントの一環であるキャラバンハッカソンではオフラインで開催されるハッカソンです。
開発した作品
チーム「寝坊マスターズ」
アプリ：「簡単行列整理くん」
今年の秋に大学祭で模擬店を運営した時に感じた、人の行列を DX 化したいという思いから生まれたプロダクトです。
事業者は手間なく導入、運用ができ、利用者の体験も損なわないという考えのもとに、自分達以外のサービスを運用する人にも使ってもらえるプラットフォームとして開発しました。
発表資料
サービスの概要
このサービスを利用する事業者がサービスにログインするとその事業者専用の QR コード が発行されます。その QR コードをお店に掲示します。
お客さんは並ぶと同時に QR コードを読み取ります。読み取った順番に待ち順に登録され、事業者が呼び出しボタンを押すと、順番に次のお客さんの番号がアプリに表示されます。
サービスの概要図
この QR コードを読み取り並び順に登録、事業者が呼び出しするのがプラットフォームの機能です。
サービスの特徴
前述したルーティーンで、人の流れを管理するのに加えて、事業者とお客さんの双方にとってより便利なサービスになるか考えました。 そして下に示す 2 種類のお客さんに対してどのようなアプローチができるのかが、重要であるという結論に至りました。
- 呼び出しに気が付かないお客さん
- 注文したことを忘れてどこかへ行ってしまうお客さん
この2種類のお客さんにはどちらも呼び出してもお店にやってきてくれないため、お店の効率を悪化させると考えられます。
呼び出しに気が付かないお客さんに対するアプローチ
まず初めに呼び出しに気が付かない理由について考えました。
大きな理由として、呼び出し番号が発行されてもその番号を覚えていないという問題と、他のことに夢中になっていてお店に意識が向いていないという問題の 2 つがあります。
この 2 つの問題に対して、プッシュ通知を送るという解決策を見出しました。スマホに通知が届けば自分の番号を覚えていなくても呼び出しに気が付きますし、お店の方を意識していなくても手元の端末が教えてくれます。
しかし、当初の理想である「利用者の体験も損なわないサービス」のためには、ネイティブアプリは適していません。そこで今回はweb プッシュ通知を採用しました。
この web プッシュ通知ですが、ios が対応したのが 2023 年 3 月 27 日の新しい技術となります。
プッシュ通知はログインをしなくてもそれぞれの端末に対してプッシュ通知を送ることのできる、Firebase Cloud Messaging (FCM) を使いました。
どこかへ行ってしまうお客さんに対するアプローチ
お店に並んでいないお客さんについて事業者はそもそも呼び出ししたくないのではないか、と考えました。そこでそういったお客さんは並び順から外し、他の並んでいるお客さんを優先的に案内するシステムを構築しました。
具体的には web プッシュ通知を使って並んでいるお客さんに定期的に通知を送って、現在の待ち状態を確認してもらいます。その確認が一定期間なかった場合にすでに列から外れているものとして、扱います。また一度列を外れても、再び呼び出しページを見ることで列に復帰し、再度呼ばれるようになります。
開発したところ
今回の開発では UI デザインとフロントエンドの実装を行いました。今回はフラットデザインを採用し単純で分かりやすい操作感を目指しました。フロントエンドには Next を採用しました。今回が初の Next を使った開発でこれまでは全く触っていなかったサーバーサイドレンダリングというものを知り、面白いと感じました。
工夫した点
アイデア出しからこれまでのハッカソンとは違い明確な目的意識を持って行いました。具体的にはデザイン思考とカスタマージャーニーマップを意識していました。
初めにサービスの利用者を模擬店を行う大学生に絞ることを決めました。そこからその対象がより使いたくなるアプローチを模索しました。自分に近いペルソナを設定されたことでより具体的で分かりやすい問題点を見つけられたと思います。また技術選定の前に詳細なユースケースの想定を行い、何の機能が必要で何の機能はいらないのかを 1 つ 1 つ検証しました。そしてサービスがサービスであるために必要な機能と、今回のペルソナに対してのアプローチを分離してそれぞれについて深めることができました。
画面設計ではオブジェクト思考 UI を意識して、その画面に必要な要素を洗い出し、なんでその機能がいるのか、何の機能が足りていないのかを考察しました。これまで何となく良さそうと決めていた UI に意味を持たせることができたため、その後の実装の時に迷うことがなくなりました。
また PR を出しながらの開発をしました。相互にコードレビューを行いながら開発できたため、よりコードを綺麗に書くことができました。また他の人のコードを読むことで React, Next に対する理解を深めることもできました。
苦労した点
webプッシュ通知に採用した FCM にはスマートフォンのバッテリー負荷を軽減させるための機能があり、その影響で特定条件の元で通知が届くのが著しく遅い場合やそもそも通知が届かない場合が複数あり、その仕様からデバッグが難航しました。通知の遅延する原因を軽減することで最終的に事業者の呼び出しからお客さんの端末に通知が届くまでの時間を 2 秒ほどに短縮できました。また Android ではこの機能は正常に動作しているのですが、ios では PWA 化しないとプッシュ通知を受け取れないという仕様から安定した動作には至りませんでした。
ユーザー体験の向上のためログインを不要とするサービスとして設計をする中で、ユーザー情報をどこで保管するかという問題が発生しました。ローカルストレージにユーザー情報を保管して API サーバーとの通信の度にユーザー状態の更新を行う設計にしました。その関係でフロント側でロジックを持ってしまったため処理が複雑化しました。今回の開発でちゃんとロジックのある処理はバックエンドでやって、フロント側では表示のみを行うのが大切なんだと学びました。
終わりに
UI/UX について色々と知識をつけて挑んだハッカソンで得た知見がぴったりとはまったと感じています。開発についてもしっかりと役割を持って自分のやるべきことができたので満足しています。キャラバンが福岡に続いてこの名古屋で 2 冠を達成してしまったので、そろそろハッカソンとは別に腰を据えた継続した開発がやりたいなと考えています。今後も慢心せずやるべきことを淡々と、そして知見を広く情報収集を続けていきたいです。今回のハッカソンで UX デザイナーという仕事にもっと興味が湧いたのでそういう方向も模索してみようかなと考えています。今はまだ時間があるから充分に迷うだけ迷ってやりたいことを見つけていきたいです。