UI考察#003「Starbucks」

UI/UXデザイナーになるために独学で勉強中のNowaです。
今回も引き続きUIの考察をしていきます！

Starbucksを選んだ経緯📝

https://www.ui-pocket.com/apps/starbucks/2023-07

UI Pocketより引用

Starbucksは私が約6年間使用しているアプリです。
アルバイトとして4年間Starbucksで働いていたこともあり使い慣れている方だと思います。

バイトでレジをしていた時、お客様から様々な質問を受けることがありましたが、当時は「分かりにくいですよね〜」と言いながら一緒にアプリを見たりしていました。
働いていた当時はあまり気にも留めていなかったのですが、つい先日一緒にアルバイトとして働いていた友人とスタバに行き、そこでアプリを開いた際に「このアプリわかりにくいからもっと改善できると思うんだよね！」と言っており、このことがきっかけで、今思い返してみれば企業側が提示している情報がお客様にとってはわかりにくかったのかもしれないなという気づきがありました。

このような経緯から、どうしたら情報が分かりやすく表示できるかという視点を持ちつつ今回は考察してみようと思います！

良いところ💮

・ぱっと見でプロモのドリンクがわかる
・ホーム画面に近くの店舗の情報が載っているのはありがたい
・ホーム画面にたくさんの情報が詰まっているので基本ホーム画面からやりたいことは完結する印象
・STARBUCKS REWARDSのスターがどれくらい溜まっているかわかりやすい
・ブランドカラーがメインカラーとして使われているのでブランドイメージに一貫性が保たれている
・ホーム画面にある各カードには「もっと見る」のアクションボタンがあるが、カード内のどこをタップしても良いようにタップ領域が定められているため使いやすい

改善できるところ✏️

・会員登録を設定するステップが少し長くて面倒そう（Apple IDでログイン、Googleでログインなどもあった方が離脱率は低くなりそう）
・商品メニューの場所が分かりにくい（商品タブがあっても良いのでは？）
・ホーム画面に情報が多すぎて何がどこにあるのか直感的にはわかりにくい
・ホーム画面の下の方に近くの店舗の表示があるが、Storesタブがあるからこのタブに表示した方がわかりやすいかも
・ホーム画面に残高を示したお支払いのアクションボタン（FAB）があるからPayのタブは不要かも（でもスタバファンの方々はカードをコレクションしてたくさん登録する人も多いため、たくさんのカードを表示するためにタブを作っているのかも）
・モバイルオーダーがホーム画面のトップとタブの両方にあるがどちらかで良いような気がする

自分の制作に活かせるところ💡

・何をどこに表示するか考えるとき、ユーザーが一番知りたいものは何か考えてからタブを作るようにする（オブジェクト思考）
・イメージカラーをアクションに使う

やってみた感想🗣

改めてじっくり見直してみると、ホームに全ての情報が集約されていて、特に推したいアクションをタブとして設置されている、つまり、タスク思考で設計されているUIという印象を受けました。

・私が考える各タブの配置理由
Pay…お支払いで使う頻度が高い。
　　 スタバカードを集めた人がコレクションとして眺められるように。
Stores…実際に近くの店舗に行くときに使うので使用頻度が高いため。
Order…モバイルオーダーの利用を促進し店舗混雑を防ぐため。
Gift…スタバがGiftを推奨しているため（？）
※これらはあくまで個人的な考察です。

個人的には各アクションがタブとしてまとめられているように感じたので、オブジェクトを抽出してタブを作りその中でアクションに進む設計にした方が使いやすいのではないかなと考えました。

・私が考える改善案のタブ５つ
プロモーション
レギュラー商品
グッズ情報（タンブラー、カード、ギフト等）
コレクション（カード、パスポート類、タンブラー部）
プロフィール（会員情報、STARBUCKS REWARDSのスター）

各タブから製品をタップしその先にスタバカードの決済やモバイルオーダー、クレカ決済なりのアクションにつながる導線を作った方がわかりやすいかもと思いました。
その際のアクションは現在スタバアプリで使用されているフローティングアクションボタン（FAB）を使用すればわかりやすいと思います。

具体的にUI改善を考えてみたので、今度実際にUIをFigmaで作成してみようと思います！

引き続きUI考察、頑張っていきます！