Bandpocket

リンクはこちら https://bandpocket.herokuapp.com/

概要

【コンセプト】スタジオ予約をもっと簡単にする🎸

自身が所属する軽音楽部では部室が1つしかなく、数十人の部員がバンドごとに予約を取り利用する形で活動しています。
部員は部長に予約のLINEをするだけで済みますが、管理する側(部長)としては数十件のLINEを管理する手段を用意したいのでこのアプリの提案に至りました。
また、このシステムを対外的に利用できるように開発することで一般の音楽スタジオでも活用できるのではないかと考えながら開発いたしました。

【ターゲット】

個人ターゲット: 音楽スタジオをよく利用する10代~20代の学生(軽音楽部員など)
法人ターゲット: 電話予約を主にしている音楽スタジオ

【期間/チーム】

デザイン: 2日
プロトタイピング: 1週間
修正: 2018年~
担当: UIデザイン, UX設計, フロントエンド開発, バックエンド開発

このアプリでできること

1. 利用時間をタップで選択🎷
   開始と終了を選ぶのではなく、ユーザに単位利用時間ごとにタップしてもらうことでより自由な利用時間の選択を実現しました。
2. 電話予約あるあるの人的エラーを解消❌📞
   電話予約特有の氏名や人数を伝えるやりとりを取り払い、より安定した予約がスムーズにできます。

機能一覧

【Auth / 認証系】

• 新規アカウント登録(メールアドレス&パスワード)
• 既存メールアドレス認証(ゲスト認証)

【Home / 店舗一覧】

• 登録店舗の一覧表示

【Studio / 予約状況表示】

• 日付やスタジオ内の部屋によって異なる予約状況を表示
• 店舗の予約状況を表示

【Orderlist / 注文リスト】

• 合計金額を自動で計算
• 決済(今回は注文情報をFireStoreに送るのみ)

工夫点

• 「予約状況の視覚的な認識」と「ユーザの想定する挙動を意識したタップ時の動き」を実現することでより使いやすいUIを意識しました。

改善点 / 懸念点

• 決済機能の導入(Stripeなど)
• スタジオを一覧で表示するだけでなく、お気に入りのスタジオを登録する機能をつける(部員からの提案)
• ドラッグ&ホバーで利用時間を選択する機能
  →タップ中にwindow.addEventlistener('hover')を使う、もしくはWebGLで実装…？