荷物預かりサービス「ecbo cloak」のアプリが誕生するまで
こんにちは、ecboのken @kecbonです。荷物預かりサービス「ecbo cloak」(エクボクローク) のデザイン/クリエイティブ全般&プロダクトまわりをまるっと担当してます。
今までWeb版のみのサービスでしたが、今回やっとアプリをリリースするまで至ったのでそれまでの経緯を少しまとめたいと思います。
ecbo cloak とは？
まず ecbo cloak について少しだけ。ecbo cloakは2017年1月にスタートしたサービスで、「荷物を預けたい人」と「荷物を預けるスペースを持つ人」をつなげるシェアリングサービスです。コインロッカーと同料金で街の中のいろんなお店に荷物を預けることがきできます。
サービスローンチが2017年1月でしたので、丸2年が経ちました。おかげさまで登録いただいている店舗数は1,000店舗を超え、ユーザー数も着々と伸びてきています。
アプリを作り始めた理由
今回アプリリリースに至った背景は主に２つあります。
1. 「事前予約」から「当日予約」へのニーズ拡大
2017年の1月にローンチした当初、訪日観光客が利用できるサービスを意識してサービスをデザインしていました。
というのも、ecbo cloak 誕生のきっかけは代表であり相方の工藤が渋谷駅で訪日観光客がスーツケースを預けたいのにコインロッカーが全て埋まって困っていた人を目の当たりにした、という原体験から生まれたこともあります。
リリース当初から５言語化対応をし、ローンチ時のプロモーションビデオには海外からの旅行者をイメージしたものにしました。
おかげさまで海外の訪日メディアや旅行ブログに大きくとりあげていただき、ローンチしてしばらくユーザーの大部分を海外からの予約が占めていました。
月日が経ち、最初は個人経営のカフェやお店が多かったところ徐々にJR駅ナカや郵便局などの大手との提携が実現していく中で、海外旅行者の利用に加わり日本人のお客さまの利用も徐々に増えはじめました。
海外旅行者からすれば旅行先で使うサービスをわざわざアプリを落として予約するより、ブラウザ上で予約できるのはむしろ好都合でしたが、日本人の国内利用、しかも例えば目の前の店舗での利用を考えればやはりスピードと快適さを重視したアプリ化は急務でした。
2. 「日常利用」「リピート利用」の増加
海外の旅行者の場合、どうしても日本を訪れる回数に限りがありましたが、日本人の利用が増えるに連れて、普段の生活の中で２回目３回目とリピート利用いただくお客さまも増えていきました。中には10回以上利用いただいているお客さまもたくさんいます。やはりその場合、わざわざブラウザを立ち上げて何度もログインして予約をとってもらうより、ダウンロードしたアプリで快適に利用してほしい、という想いがありました。
アプリ化までのタイムライン
アプリリリースまでのタイムラインはざっくりこんな感じでした。
18年3月：既存サービスの見直し 📝
4月：ワイヤー１から着手 🛠
8月：スタイルガイド完成 🎨
9月：社内フィードバック集め開始 📣
10月：Android版調整 📱
12月：テストリリース 🚀
19年1月：正式リリース 🎉
本格的に動き出しはじめたのは2018年3月頃。
社内ではデザイナーが僕1人だけだったので、最初デザイナーをしている大学からの友人の力を途中まで借りつつ、まず現状のウェブ版のサービスの流れを改めて見直しアプリ化するにあたり変えたい箇所をリストアップしていきました。
こんな感じでオフィスの壁に貼って、変更点をリストアップしていきました。（狭いオフィスだったのですがけっこう壁中ワイヤーやらデザインやらを好き勝手貼りまくってました）
現状の整理ができたところで、一度各画面を要素に分解して、改めて手書きのスケッチでワイヤーを考え直していきました。一見プロセスとしては順序が逆ですが、基本的にはいまウェブである要素から不要な部分を引き算（新しい要素のアドオンはしない）という方針で分解を進めていきました。
手書きのスケッチを元に、sketchで少しずつ形にしていく作業。この頃からフロントエンジニアもチームに加わり(それまでは社内エンジニア不在でした...！)、エンジニアサイドの意見も少しずつデザインに反映されていきました。
各スクリーンのラフなワイヤーが出来上がりはじめると、これらを下記のようなフロー図にまとめていきました。
まあそんなこんなで粛々とUIをまとめていくんですが、今回アプリ化と合わせて形にしたかったのがコンポーネントごとのデザインスタイルガイドでした。2年前にウェブ版を作成した時にガイドラインがしっかりとまとめ切ることができず、修正していく内に少しずつトンマナが変わってしまったという苦い経験がありました。
いろんな会社のガイドラインを参考にしつつ、徐々に作り上げていきました。今後はアップデートを加えつつこれらを元にstorybook化して公開できるレベルまでもっていく予定です。
9月に入り（プロジェクト開始から半年）アプリはある程度形になってきました。この頃から社内チーム用にexpoでアプリのベータ版を配布し、フィードバックをセクション別にtrelloにまとめる形で集めはじめました。
10月頃になるとある程度形になってきたので、Android版のアプリに着手しはじめました。今回少ないリソース（この時点でデザイナー１名+エンジニア１名）でアプリをスクラッチから作成することを考慮し、同じソースでiOS/Android両方作れる「React Native」を採用しました。（ここらへんは後に弊社のエンジニアが詳しくnoteにまとめてくれると思います！期待！）それまでは自分がiPhoneユーザーということもありあまりAndroidの方に手が回ってなかったのですが、その後入社したエンジニアが１ヶ月程でまとめてくれて、めちゃめちゃ助かりました。(しばちゃんありがとう！)
そして年末にはなんとかテストバージョンが完成し、年明けに集めたフィードバックを元に修正を加え、今回1/21にv1.0を正式リリースするまでに至りました！🎉
工夫したところ
冒頭でも少し述べた通り、今まで海外旅行者の事前予約（自国で訪日前に予約をする）利用が多かったものが、利用シーンが拡大し「予約をしていないが、目の前の店舗(或いは近くの店舗)で今すぐ利用したい」というニーズが増え始めました。そのためアプリ立ち上げ時にまず位置情報付きの周囲のマップが表示され、その場から近くで利用できる店舗がひと目で分かるようにしました。
予約までの操作時間をなるべく減らしたい
アプリ化の最初の頃の議事録に残っていたメモです。アプリではなるべく少ないタップ数で、なるべく短時間で、予約完了に至るように作成しました。目の前の店舗で今すぐ荷物を預けたい場合、１０秒程で予約完了することができます。
他にもウェブ版で修正したいけどなかなか手が回らなかったような細かいところをアプリ版ではいくつも改良しています。例えばウェブ版の検索だと、アクセスしてる時間帯に限らず予約できる店舗のみ表示する仕組みでした。そのため例えば夜遅くにアクセスしたとき、ほとんどピンが表示されない状態になってしまい、日時検索をしないと予約可能な店舗が探せない状態でした。今回アプリでは日中は変わらずすぐに予約ができる店舗が表示され、夜は店舗のオープン時間データを元に、翌日の日中で予約できる店舗を表示する仕組みに変えたことで、店舗が探しやすくなりました。(下図) こういった小さな工夫を今回のアプリにたくさん仕込ませてあります。
また今回は日本のマーケットだけでなく、台湾・香港のマーケットでも両アプリをDLできるようになっています。これはecbo cloakグローバル展開への第一歩であり、様子を見つつ他のマーケットにも徐々に広めていく予定です。
余談ですがアプリの言語対応にはlocizeを使っています。
テキストセクションごとにキーを割り振って、左側に値する翻訳を右側に入力するだけでどんどんシステムに反映される仕組みです。このおかげで翻訳作業がうんと効率良く、スピーディーになりました。
まとめ
今回のアプリ化にあたり、まだまだアップデートの余地はたくさんあるものの、今までのウェブ利用とは比べられないくらい使いやすい体験に生まれ変わったと感じています。これからもどんどん改善を加えていく予定ですが、「v1.0」としては非常に満足度の高いアプリに仕上がりました。（つっくん、しばちゃん、てつやさん、ゆのきち、本当にお疲れ様！）
既にウェブ版で利用したことある方も、まだ利用していない方も、ぜひダウンロードしてご利用してみてください ↓↓↓（フィードバックお待ちしております！）
初めて利用の方限定にはなりますが、下記クーポンコードで300円割引になるので、ぜひご活用ください。（必ず予約完了前に入力ください！）
プロモコード：ecbocloak-ken
最後に...やっとここまで来ましたが、これはまだまだスタートラインに立っただけのことだと思っています。これからどんどんユーザーヒアリングを重ね、フィードバックを元にブラッシュアップしていきます。他の海外マーケットにも少しずつ広げていきます。
また、僕らはプラットフォームを提供してる以上、今回のように荷物を預けたいユーザーだけでなく、荷物場所を提供してくれるオーナーさまも、私たちにとっては立派なユーザーです。今後はオーナーさま向けのアプリも着手していきます。（本当はすぐにでも届けてあげたいのですが、今のリソースではどうしても時間がかかってしまい申し訳ない気持ちでいっぱいです。）
僕らと一緒に ecbo cloak を大きく成長させたい方、世界に向けて大きくチャレンジしたい方、ぜひお声かけください！デザイナーはもちろんですが、他の職種でもウェルカムです。
詳しい採用条件はこちらに載っています！が、まずはお気軽にメッセンジャーでも大丈夫です↓↓↓ 必ず返信します！
よろしくお願いします！おわり！
*2020年1月：採用ページが新しくなったので追記しました！
この記事が気に入ったらサポートをしてみませんか？