[흔한 서비스 리뷰 #1] 스타벅스 앱
온·오프라인 연결하는 O2O 서비스 플랫폼
안녕하세요. 흔한 서비스 리뷰를 하는 흔지입니다 :) 이 서비스를 사용하는 이유는 무엇인지, 이 서비스에서 제공한 기능은 무엇인지, 이 기능을 사용하면 어떤 문제가 해결되는지 등에 초점을 맞추어서 작성했습니다. 재밌게 읽어주세요. 잘 부탁드립니다:D
처음 리뷰하고자 하는 플랫폼은 O2O(Online to Offline) 서비스 플랫폼이다. 최근 들어 내가 가장 관심 있게 보고 있는 서비스는 온라인과 오프라인을 연결해주는 O2O 플랫폼이다. 마치 '플랫폼'을 통해 온라인과 오프라인이 상호작용 하는 모습을 볼 수 있어서 제일 흥미 있는 주제여서 첫 리뷰로 선정하였다.
우리가 주변에서 흔히 볼 수 있는 O2O 플랫폼은 오프라인 매장에서의 어려운 점을 온라인 플랫폼으로 도와주는 형태가 많은데, 오프라인 스토어들의 온라인 몰이라던가, 커피전문점의 비대면 주문 시스템도 O2O 서비스라고 생각할 수 있다.
그래서 첫 리뷰는 모바일 앱 주문 서비스를 제일 먼저 시작했고, 활성화시킨 스타벅스 앱을 리뷰하려고 한다. (사실 내가 제일 많이 가는 카페여서 리뷰하기 편해서...)
흔한 사용자가 하는 스타벅스 앱 리뷰
흔한 사용자 입장에서 생각하는 서비스를 사용하는 이유, 목표. (사용자 조사)
장황하게 소제목을 써놨지만, 직역하면 나는 어떻게 스타벅스 앱을 사용하고 있는지 이다. 내가 스타벅스 앱을 사용하는 이유는 1. 결제 2. e-프리퀀시 적립 3. 사이렌 오더 4. 베이커리 주문 때문에 사용한다. 특히 사이렌 오더의 경우 진짜 편리하게 사용할 수 있다.
테이크아웃의 경우 황금 같은 회사 점심시간에 사이렌 오더로 미리 주문해서 안 기다리고 바로 음료를 받아갈 수 있고, 매장을 이용할 경우 미리 자리를 잡아둔 다음에 자리에 앉아서 주문할 수 있다.
결론을 말하자면 내가 이 서비스를 사용하는 목표는 쉽고 빠르게 비대면으로 주문하기 위해 사용한다. 그 외 가까운 매장에 남아 있는 베이커리를 알려준다거나, 내가 자주 주문하는 음료를 보여주는 개인화 서비스도 참 편리하게 다가온다.
또한 e-프리퀀시 적립, 크리스마스 케이크 구매 등 플랫폼에서만 할 수 있는 프로모션들 때문에 이 앱을 사용하기도 한다.
스타벅스 앱은 어떻게 생겼나?
디자인과 인터페이스가 어떻게 구성되었는지. (UI 관점에서)
1. Launcher(=Dashboard) 형태의 메인 화면
스타벅스는 Launcher 형태의 메뉴로 진입점을 아이콘과 글로 표현하고 있다. Launcher 형태는 카테고리 메뉴를 분류하며 메인 메뉴들을 강조하는 형태이다. 현재는 많이 쓰이는 추세가 아니지만, 스타벅스 앱처럼 사용자들이 자주 사용하는 기능들만 노출하여 한눈에 볼 수 있고, 쉽게 제어할 수 있는 장점이 있다.
Launcher 형태의 경우 모든 메뉴가 동일한 우선순위를 가진 것처럼 느껴질 수 있는 단점이 있으나, 우측 화면을 보면 크기와 이미지로 우선순위를 다르게 강조하고 있음을 알 수 있다. 특히 개인화 영역과 메인 기능인 사이렌 오더만 더 크게 표시하여 강조하고 있다. 또, 화면에 없는 메뉴들은 사용자들에게 익숙한 좌측 아이콘으로 표현하여 진입하게 했다.
2. Drawer(=Sliding Menu) 형태의 세부 메뉴
평상시에는 닫혀 있다가 클릭하면 나타나는 Drawer메뉴! 현재 많은 앱들이 이런 방식으로 최상위 메뉴를 사용하고 있어 매우 익숙한 인터페이스다. Tab bar를 사용하는 경우 5개, Launcher를 사용하는 경우 9개 이상의 메뉴를 표시하는 것이 힘든데, Drawer의 경우 많은 메뉴를 표현할 수 있는 장점이 있다. 스타벅스 앱의 경우 세분화할 카테고리가 크게 없어 크게 스크롤할 필요 없이 심플하게 구성되어 있다. 세분화가 필요한 상세 분류 메뉴의 경우 하단에 클릭하면 클릭 화면에서 또 메뉴를 진입할 수 있게 설정되어 있다.
그리고 KV영역을 상단에 강조하여서 사용자들이 프로모션을 확인할 수 있게 해 준다. 비즈니스적 의도가 아닐까 생각한다 :)
스타벅스 앱의 경우 대부분이 영어로 쓰여있는데, 이해하기 힘든 문장은 친절하게 우리말로도 작성되어 있다. 왜 영어로만 작성되었는지 궁금하다.
3. 주문 화면
해당 페이지에서도 비즈니스 의도를 쉽게 파악할 수 있을 것 같다.
1) KV메뉴: 최 상단의 KV메뉴를 강조하면서 이벤트, 프로모션 내용을 강조하고 있다.
2) 개인화, 프로모션 메뉴 리스트: 직접적인 사진으로 새로 나온 메뉴, 이 시간대 인기 메뉴, 밤에 먹으면 좋은 메뉴, 함께 하면 좋은 푸드 메뉴 등 다양한 프로모션 메뉴를 리스팅 해준다. 뿐만 아니라 내가 자주 시켰던 메뉴들을 개인화 메뉴에 리스팅 해주면서 쉽게 원하는 메뉴를 찾을 수 있게 해 준다.
3) 그 외 메뉴: 시각적인 위계에서 우선순위가 낮지만, 혹시나 내가 시키고 싶은 메뉴가 이미지로 나타나지 않을 경우 전체 메뉴 / 나만의 메뉴 / 히스토리에서 확인할 수 있게 해 준다.
4) 토스트 메시지: 토스트 메시지로 내가 현재 무슨 매장 근처에 있고, 해당 매장에서 주문 가능한 메뉴인지 안내를 해준다.
사용자로서 해당 페이지에서 느끼는 점은, 내가 스타벅스에 가서 시키는 메뉴는 거의 고정되어 있기 때문에... (텁텁할 땐 아아, 당이 당길 땐 자몽 허니 블랙티, 색다른 게 먹고 싶을 땐 신메뉴) 이미지로 리스팅 해주는 게 너무 편리해서 의식의 흐름대로 선택할 뿐이다. 이렇게 기획해준 기획자님께 감사할 뿐.
4. 상세 주문 화면
메뉴를 클릭했으니 상세 주문 화면을 살펴보자. 화면을 살펴보면 한눈에 정보를 구분하고 선택할 수 있게 되어있다.
1) 수량 선택: 대표적인 숫자 입력 컨트롤러인 스피너로 설계되어 있다. 사실 보통 음료 하나만 구매하기 때문에 1에 고정되어 있고 (+) 버튼을 누르며 조절하는 게 정말 일반적이고 편하다. 개인적인 일화로 단체로 주문한 적이 있었는데, '아이스 아메리카노 먹을 사람~' 하고 손을 든 사람들대로 (+) 버튼을 누르니 몹시 편했다.
2) 버튼: 하나만 선택해야 하는 정보('HOT/ICED' / '머그컵/개인컵/일회용 컵')를 바로 선택할 수 있게 페이지 내에 구성되어 있다.
3) 드롭다운 메뉴: 사이즈를 클릭하는 경우 3가지 사이즈를 선택할 수 있게 드롭다운 팝업이 나타난다. 3가지밖에 없는데 왜 팝업으로 했을까 라는 생각이 들었고, 사이즈도 화면에 바로 선택할 수 있게 버튼 형태로 구성되어 있는 게 편하지 않았을까 하는 생각도 든다.
4) 옵션 선택: 퍼스널 옵션의 경우 '샷 추가, 시럽 추가, 베이스 변경, 얼음 추가, 휘핑 추가...'처럼 7개 정도의 옵션이 있어서 불가피하게 별도 페이지로 이동한다. 해당 서비스를 자주 사용하지 않는 사람한테는 불필요한 내용이라서 별도 페이지로 이동하는 게 화면상 깔끔해 보인다.
5) 비슷한 메뉴 리스트: 또한 비슷한 다른 메뉴들의 리스트를 보여주기도 한다. 만약 내가 잘못시켰거나, 다른 메뉴로 변심이 생길 때 유용한 것 같다.
5. 퍼스널 옵션 화면
퍼스널 옵션 페이지로 따로 이동하면 각 옵션 별로 다시 페이지를 이동하여 선택하게 된다.
시럽의 경우 '클래식 시럽, 바닐라 시럽, 헤이즐넛 시럽, 카라멜 시럽, 기타 소스...' 등 다시 분류되기 때문에 페이지를 이동하여 선택할 수 있게 한 것 같다. 다시 세부 옵션 페이지로 이동하면 스피너 버튼으로 농도를 선택하거나, 버튼으로 선택할 수 있게 되어 있다.
차라리 트리구조로 메뉴를 구성하면 어땠을까 라는 생각도 했지만, 각 페이지로 유입될 때마다 해당 옵션에 대한 연출 이미지가 노출되어 스타벅스 앱 콘셉트인가 생각되었다. 페이지로 이동해서 한눈에 필요한 옵션을 선택할 수 있는 것은 좋으나, '얼음: 많이/보통/적게' '샷: - 1 +' 등의 하위 옵션이 없는 것은 버튼이나 스피너로 바로 화면에 노출해 별도 페이지로 이동하지 않게 해도 좋지 않았을까 생각이 든다.
해당 부분은 어쩌면 너무 페이지 이동이 많은 것처럼 느껴져서 필요한 세부 옵션만 페이지를 이동할 수 있도록 개선되면 좋을 것 같기도 하다.
스타벅스 앱 파 해치기!
서비스 내 정보들이 어떻게 구조화되었는지. (UX 관점에서)
1. 주문, 결제 프로세스
스타벅스 앱에서 가장 중요한 것은 '주문, 결제 프로세스'라고 생각한다. 스타벅스 앱의 경우 메뉴 선택 → 결제 → 결제 완료 프로세스를 하고 있다. 사용자가 메뉴를 주문하고 구매로 넘어가기까지의 여정을 매끄럽게 만들고 있다. 하지만 여기서 주목할 부분은 사용자들이 결제를 완료하기까지 끊임없이 추가적으로 구매할 수 있는 메뉴에 대해 안내하고, 혜택을 발견하여 구매로 이어지도록 하고 있다.
1) 메뉴 추천: 메뉴를 장바구니에 담을 경우 해당 메뉴와 어울리는 메뉴를 추천하고 있다. 아예 팝업 형태로 추천을 하고 있는데, '이걸 같이 사라... 분명 맛있을 거야...'라고 외치는 것 같다. 실제로 나는 이렇게 결제하다가 베이커리류를 구매한 적이 있다... 맛있었다.
2) 혜택 안내: 결제 전에 '쿠폰/제휴카드 할인' 등 받을 수 있는 혜택을 노출하고 있다. 통신사 멤버십 할인을 적용해서 내가 얼마큼 혜택을 받았는지 까지 노출되니, '아... 나는 얼마나 현명한 소비자인가...'라는 행복함에 결제 버튼을 누르게 된다.
해당 내용은 NHN AD의 블로그 내용을 참고로 하였다. https://blog.naver.com/uiux_lab/221463692543
2. 메뉴 프로세스
스타벅스 앱의 경우 사람들이 자주 사용하는 메뉴의 경우 메인화면에서 런쳐 형태로 노출을 하고, 그 외 자주 사용하는 메뉴의 경우 Drawer 형태의 메뉴로 보여주고 있다. 그 외에 세분화된 메뉴의 경우 페이지를 이동해서 다시 상위 분류를 보여주고, 다시 페이지를 이동하여 하위분류를 보여주는 형태로 진행되고 있다.
트리구조를 사용하면 페이지를 이동하지 않아도 되지만, 앱 특성상 화면이 작아 메뉴 리스트가 길어지면 스크롤하기도 힘들고 찾기도 힘들어진다. 스타벅스 앱처럼 세분화된 메뉴의 경우 페이지를 이동하면서 진입하는 경우가 더 찾기 쉽게 느껴진다.
타 O2O 서비스 앱을 보았을 때 상세 분류 메뉴를 트리구조로 설계했길래 비교하기 좋을 것 같아 이미지를 제작하였다. 스타벅스 앱의 경우 상위 분류 > 하위분류 > 정보 > 해당 페이지로 이동하기까지 페이지를 계속 이동하여 해당 페이지로 유입되도록 설계해 두었고, 타 앱의 경우 트리구조로 분류된 주제를 누를 때마다 드롭다운 리스트 형태로 하위분류와 정보들이 우수수 쏟아진다. 별도의 페이지를 이동하지 않아 로딩 시간은 줄어들었을지 모르겠지만, 계속 나타나는 정보들과 길어지는 스크롤 때문에 내가 찾는 정보를 찾기 어렵다.
트리구조로 제작된 앱의 경우 PC웹에서 메가 메뉴(드롭다운 메뉴보다 훨씬 상세하게 분류하여 쓰는 메뉴)를 사용하고 있었는데, 그때의 분류 체계를 앱의 Drawer 형태의 세부 메뉴에서도 똑같이 적용하여 어색하게 표현된 것이 아닌가 생각이 든다. 분류 내용이 세분화될 필요가 있을 때는 별도 페이지를 제작하여 다시 분류하는 방법을 사용하는 것이 좋을 것 같다.
스타벅스 앱을 리뷰하며 사 먹어본 신메뉴... :)긴 글 읽어주셔서 감사합니다. 현재 많은 기업들이 스타벅스 앱을 벤치마킹하고 런칭하고 있습니다. 그 이유는 스타벅스 앱이 상품을 찾아 헤멜 필요가 없을 정도로 사용자들에게 매우 편리하며, 주문을 하는 페이지마다 프로모션 내용을 확인할 수 있고, 다양한 메뉴들을 추천받을 수 있기 때문이라고 생각합니다.
스타벅스 앱이야 말로 비즈니스 목표가 분명하고 여러 사용자를 고려한 O2O 서비스가 아닐까 생각되어 리뷰해 보았습니다. 다음 리뷰도 기대해 주세요 :D
