STORES 予約 は2023年1月に予約者さま向けアプリ「Coubic by STORES 予約」を4年ぶりにフルリニューアルしました。
本ブログでは、約半年かけて行った予約者さま向けアプリのフルリニューアルの過程をPM（@daisukesone) 、 デザイナー（@take_honami) の観点から記載していきます。
エンジニア観点での技術的な記事は以下にまとめています。
リニューアルの背景と目的
オーナーさま向けアプリに関しては2022年9月にリニューアルを行いましたが、予約者さま向けアプリに関しては手をつけられておらず、レビュー評価も高いといえる状態ではありませんでした。
予約管理サービスにおいて、予約者さま向けのアプリを持つサービスは少なく、アプリがあることで一定の優位性があるものの、せっかくのアセットを事業に活かしきれていない部分がありました。
また、当初のアプリのコンセプトと現在の強みに乖離がある状況であったこともあり、アプリのUI/UXも含めてコンセプトから刷新する形でフルリニューアルを行いました。
現在のSTORES 予約での強みの一つとして、会員制サービスにおけるリピート予約、月謝回数券を利用した予約が挙げられますが、旧アプリには以下のような課題が存在していました。
旧アプリの主な課題
- 過去の予約から繰り返し同じ内容で予約をすることができない
- 過去の予約の内容の説明が少なく、 予約者にとって予約詳細が不明瞭
- 自分が持っている月謝・回数券の管理が難しい
- ユースケースとして使用頻度の多い機能が深い階層にとどまってしまっている
- iOS版とAndroid版で複数の機能差分が存在している
ターゲットと提供価値に関しては、後述するワークショップ等を通して、メインターゲットを「主要業種でリピート予約を行うユーザー」に絞り、「予約 / 月謝・回数券の管理がしやすく、繰り返し予約がストレスなくスムーズにできる状態」を提供価値としてリニューアルを行っていきました。
具体的にやったこと
リリース当初のアプリコンセプトと、現在の利用状況との差分理解
開発チームに当時の設計意図を知る人がいなかったため、当時の思想を聞いてから開発を始めました。
アプリの利用ストーリーを洗い出し、当時から在籍する社員にリリース当時の状況をヒアリングすることで、開発当時のコンセプトは「複数の店舗のカードを一元管理できる」だったのが、現在は「1店舗をリピート利用する」ことが主流であることがわかりました。
また、初回予約はブラウザで予約し、2回目以降の予約でアプリを利用することが多いこともわかりました。
リニューアルコンセプトを決めるワークショップ
①現在のアプリの課題の洗い出しワークショップ
開発チームのほぼ全員が入社から3ヶ月〜1年程度とサービス自体や予約というドメインへの理解が浅いタイミングでもあったため、サービスやドメインの理解を兼ねて現状のアプリの課題を洗い出すワークショップを行いました。
- 目的
- サービス理解
- 予約独特のドメイン理解
- システムとしての使いづらさの洗い出し
- やったこと
- ユーザー行動の理解
- 実際にアプリを触りながら課題の洗い出し
- 課題のグルーピング
- 改善案の整理
② 現在の予約者体験に合わせてコンセプトを再設計
次に、リニューアルコンセプトを決めるためのワークショップを開催しました。
既存のアプリの課題と、社内ヒアリングから分かってきた現状の使われ方をもとに、コンセプトと理想のカスタマージャーニーを定義しました。
- 目的
- 「コンセプト（一言で言うとどんなサービスを目指したいか）」が決まる
- 「理想のUX」の認識を揃える
- やったこと
既存の情報設計整理
既存のアプリの画面数、画面遷移、できること・できないことの整理をしました。
理想の情報設計整理
ワークショップで言語化したコンセプトや、カスタマージャーニーマップをもとにオフラインで2時間ほど議論して画面設計を整理しました。
「ストレスなくスムーズに繰り返し予約できる」というコンセプトに基づき、「予約までのステップ数を少なくする」という方針で、以下の流れで議論を進めました。
- タブに必要な機能はなにか？
- そのタブ同士を繋ぐ導線は何が必要か？
- 予約までのステップ数を減らす方法はないか？
UI / UXの設計と狙い
大きな狙いは2つです。
①アプリ利用者が繰り返し予約をしやすいこと
ホーム画面に直近の予約情報を表示し、過去の予約から同じ内容で予約できるワンタップ機能を追加しました。
さらに、月謝・回数券経由の予約も利用できるサービスを一覧で探しやすくし、新規予約の場合にもサービス一覧を見やすくしました。
② ホーム画面でユーザーのアクションを完結させ、複数の機能を配置して利用率を検証できるようにすること
リニューアル前の利用状況のデータがなかったため、最も使われる仮説の確度が高そうな機能をホーム画面にまとめて、リリース後に利用率を検証し、体験を改善できる設計にしました。
画面デザイン
約3ヶ月程度、週次でデザイン作成、レビューのサイクルを回していきました。
大まかには、以下の流れでデザインを進めました。
- 全体の画面をざっくり作りきる
- 細かい仕様を議論しつつ、反映していく（表示が必須となる情報、文字数制限など）
- 全体を通して触ってみて違和感や使いづらい部分を改善する
タブの設計
タブの設計では、予約履歴を「現在」と「過去」の2つに分けました。
これにより、「現在の予約の確認」と「未来の予約をとること」が簡単にできるようになりました。
また、繰り返し同じ店舗への予約が多いと想定されるため、お気に入り店舗への導線は優先度を下げました。
現在の予約
上で紹介した通り、現在の予約タブでさまざまなユースケースをカバーできるような設計にしています。
過去の予約
主要なユースケースは繰り返し予約であるため、「もう一度予約」というボタンを追加しました。
以前は、同じ内容の予約を探して再度予約する手間がありましたが、リニューアル後はワンタップで同じ内容の予約が可能になりました。
月謝・回数券
以前は、ユーザーが複数の店舗を利用することを想定し、それぞれの店舗ごとに月謝や回数券を管理する仕組みでした。
リニューアル後は、利用中の月謝や回数券を1つの画面で管理できるようになりました。
お気に入り
お気に入り画面では、すぐに予約を探しやすくするため、「サービス一覧」と「カレンダー」への導線を追加しています。
メニュータイプの予約では予約サービスの一覧から予約枠を探すユーザーの方が多く、レッスン・イベントタイプの予約ではカレンダーから探すユーザーの方が多いため、どちらのユーザーの方にも使いやすさを担保する意図があります。
ユーザーテスト①
大まかな画面デザインが完成した段階で、Figmaのプロトタイプ機能を使ってユーザーテストを実施しました。
まずは、5つのユーザーストーリーを設定し、社内の6人の方に協力してもらって、メインのユースケースが「問題なく使えるかどうか」を検証しました。その結果、以下の改善点を見つけることができました。
- 「店舗情報」と「カレンダー」へのアクセスしやすさを向上させる必要がある
- 「他のメニュー」（現在の「サービス一覧」）というラベルは分かりにくい
- 「予約」と「予約履歴」（現在の「現在の予約」と「過去の予約」）の使い分けが分かりにくい
ユーザーテスト②
ネイティブアプリのβ版を実装できた段階で、「使いやすさ」にフォーカスした検証を行いました。
前回の反省を生かし、特定の観点を伝えてからフィードバックをもらいました。これにより、より具体的な問題点を把握できました。
以下は得られたフィードバックの例です。
- タブを押下した時に画面上部へスクロールできるようにするなど、アプリならではの細かいインタラクションに対する期待値
- アプリの導入案内の方法に課題感があること
- 店舗への問い合わせの導線が改善できると良いこと
まとめ
フルリニューアルの効果と成果
成果の振り返り
社内では細かい指標のウォッチも行なっておりますが、対外的な成果としては、大きく以下の2点が挙げられます。
①定性面
口コミを通して、回数券管理、繰り返し予約が行いやすい、予約状況が見やすくなったとのお声をいただきました。
また、社内観点では、AndroidとiOSで機能差分が統一できたことで、問い合わせ確認時にOSバージョンによる偏りがなく案内可能になりました。
②定量面
リニューアルにより、当初課題であったアプリのレビュー評価は急上昇しました（iOS: ☆2.2(236件) → ☆4.3(2339件)、Android: ☆2.3(149件) → ☆3.4(207件)。プロダクトのユーザビリティの向上が数値に現れた結果だと捉えています。
レビューが評価が高まったことにより、営業でのセールストークで使用しやすくなったり、新規オーナーさんへのオンボーディングにアプリ利用を促したりと、ビジネス側でも利用しやすくなりました。
プロセスの振り返り
よかったこと
- 約半年で約30画面をiOS / Androidの両OSでリニューアルできた
- リニューアルコンセプトをチームで端的なキーワードで決めたことで意思決定がしやすかった
- 理想案のプロトタイプをチームで考えられたので多様なUI案をもとにデザインを考えられた
- ユーザーテストをリリース前に2回行うことができたので、メインのユースケースにクリティカルな課題がないことを確認してリリースすることができた
- リニューアルと同時にレビュー導線をリリースできたことで、ポジティブなレビューを集めることができた
反省点・やりきれなかったこと
改善点はいくつかありますが、リニューアルから数ヶ月のタイミングで、企画・デザインのプロセスを改善することで次回の学びとして生かせるのではないかと思う部分を3点振り返ってみました。
①導線として担保していたとしても、マイクロコピーが適切に伝わらないと利用されない可能性がある
以前のアプリにおける「新規予約」ボタンの代わりに、リニューアル後は「サービス一覧」導線を設置したことで、使い慣れていたユーザーにとっては新規予約が探しにくくなり、使いづらくなっている可能性があるというものです。
リニューアル前後で、新規予約を取ることができる導線は確保していますが、一部のユーザーからは新規予約が探しにくくなったとのお声がありました。現在、改善方法を検討しています。
②流入が増える導線は既存仕様のままでも、リリース前に大きな問題がないかチェックすべき
カレンダーから予約できる導線をリニューアル後に新設しました。
カレンダーの利用者が増えましたが、既存仕様のままであっても、画面のユーザビリティが良くないことが理由で、お問い合わせをいただきました。
この課題は改善してリリース済みですが、今後も利用者が増えることが想定される導線については、大きな問題がないか注意深く確認する必要があると思いました。
③ユーザーテストにおけるユーザー体験の解像度の高い検証の難しさ
上記に挙げたような「使えるか」「使いやすいか」というユーザビリティの検証は、リリース前のユーザーテストで補完できているつもりでしたが、リリース後のユーザーの方からの声で課題が顕在化しました。
反省点の1つとしては、ユーザーテストでも「ユーザーと同じ視点で操作してもらう」ことを徹底できると、より解像度の高いフィードバックを集められたのではないかと考えています。
例えば、「健康維持を目的に」「仕事終わりの19時から21時の間で」「無理なく続けられる負荷のメニュー」を探して予約してみてください、というように具体的な操作イメージを共有することで、よりリアルなユーザー行動を再現できるのではないかと思います。
今後の開発の方向性
予約者さま向けアプリに関しては、1月にリニューアルを行ったのち、使われ方を分析し、細かな改善を現在も行っています。 オーナーさま向けアプリに関してもまだ提供できていない価値の余白が大いにあり、アプリチームの大きな方向性としては、オーナーさま向けアプリをメインに今年のロードマップを引いています。ただ、予約者さま向けアプリに関しても、通知を起点としたオーナーさんと予約者のコミュニケーションやカメラの活用などを検討しています。 今回のリニューアルでは予約者が行うコアな体験に機能を絞っていきましたが、今後はアプリならではの体験を生み出せる機能を考えています。
これからもSTORES 予約 を利用するオーナーさまだけではなく、予約者も含めたプロダクト開発を開発チーム一同進めていきます。
