스타벅스 사이렌 오더 유저 스토리 만들어 보기
[코드스테이츠 PMB 09기]
사이렌 오더란?
모바일 주문/ 결제 시스템으로 앱을 통하여 주문을 할 수 있는 서비스이다. 앱으로 주문을 해도 음료 커스터마이징과 쿠폰 사용 등을 할 수 있다.
스타벅스 앱에서 사이렌 오더는 스타벅스 앱을 이 서비스를 사용하기 위해 설치한다라고 해도 과언이 아닌 서비스이다. 사이렌 오더의 론칭으로 인해 고객들은 메뉴를 주문할 때 주문시간이 크게 단축되었으며 내가 시킨 메뉴가 언제 나오는지 까지 확인을 할 수 있게 되었다고 한다.
출처 : 스타벅스 홈페이지사이렌 오더의 실질 고객, 잠재적 고객인 스타벅스 리워드 회원수 증가도 꾸준히 증가하고 있는 추세이다.
성장하고 있는 사이렌 오더 시스템에서 고객들이 느끼고 있는 문제는 무엇일까?
결제창으로 넘어가고 다시 뒤로 가기를 누르면 선택한 음료가 리셋된다는 점이다. 이 말이 무슨 말이냐면 스타벅스의 최대 장점은 음료 커스터마이징인데 이것을 다 완료한 후 주문하기를 눌러서 결제창으로 넘어간 후 변경을 하고 싶은 점이 생겼을 때 뒤로 가기를 누르면 아예 음료를 선택하는 부분으로 넘어오게 된다. 이러한 경험을 한 고객은 다시 음료를 찾아서 누른 뒤에 음료 커스터마이징을 해야 하는 상황이 온다.
이것은 어떠한 경우에도 적용되냐면 여러 개의 음료를 함께 사고 싶어서 이미 몇 가지의 음료는 장바구니에 담아놨다고 가정해보자. 여기서 마지막 음료를 선택한 다음 이제 주문을 해야 하기 때문에 담기가 아닌 주문하기를 누르면 장바구니가 전부가 보이는 것이 아니라 내가 방금 보고 있었던 음료 한 가지만 구매창으로 넘어가게 된다. 이렇게 되면 뒤로 가기를 눌러야 하는데(장바구니에 담기 위해) 이 행동을 하면 아예 음료 메뉴로 나가 지게 된다.
여기에서 우리는 두 가지의 불편한 점을 찾을 수 있다.
1. 결제창에서 뒤로 가기를 누르면 메뉴판으로 이동한다.
2. 음료에서 바로 주문하기를 누르면 장바구니가 모두 보이는 것이 아니라 지금 보고 있는 음료 하나만 주문이 된다.
=고객들은 음료를 주문하고 결제하는 과정에서 동일한 일을 반복하지 않았으면 한다.
이 점을 인지하고 사이렌 오더를 주문하는 과정에서 유저들의 정확한 플로우를 파악하기 위하여 이와 관련된 페이지를 분석해보려고 한다.
Lo-Fi
손그림으로 그린 Lo-Fi주문하려다가 뒤로 가기를 누르는 경우의 흐름을 Lo-Fi로 그려보았다. 그림과 같이 주문하기 창을 누르면 바로 결제하기 창으로 이동한다. 결제창에서 뒤로 가면 메뉴로 이동된다.
Mid-Fi 주문하기 페이지
Figma로 만든 주문하기 페이지 스토리보드주문하기 페이지를 분석해봤다. 분석을 해보니까 전에 안 보이는 부분들이 보였다.
1. 주문하기 버튼을 누르면 바로 결제하기 페이지로 이동
장바구니에 이동하거나 음료를 한번 확인하고 수정할 수 있는 창이 아닌 바로 결제하기 페이지로 이동이 되었다. 내가 지금 보고 있는 음료 한 가지의 대해서 결제를 하는 페이지였다.
2. 컵 선택 UX 아쉬움
사이즈 선택은 디폴트 값으로 아무 선택을 안 하면 Tall사이즈로 선택이 되는데 컵 선택은 내가 선택을 따로 해야 했다. 물론 컵도 디폴트 값을 설정하면 고객들이 음료를 받고 컵을 변경해달라는 요청이 많아질 수 있지만 사이즈는 디폴트 값이 설정되어 있기 때문에 컵 선택도 설정되어 있다고 생각해서 바로 주문하기를 누르는 경우가 생겼다. 그러면 컵을 선택하라는 팝업창을 확인하고 다시 시선을 위로 올려 컵 선택을 해야 하는 상황이 발생했다.
이렇게 스토리보드를 만들어서 하나씩 어떤 기능이 있는지 정리하다 보니 다른 부족한 부분, 불편할 것 같은 부분을 확일 할 수 있었다. 또한 확실하게 어떤 페이지의 문제점이었는지 나눌 수 있었다.
Figma를 처음 사용하여서 만들었는데 어려운 점도 있었고 시간이 오래 걸리기도 했지만 이렇게 만들어서 개발자와 다른 이해관계자와 오류 없이 소통할 수 있다면 좋은 문서인 것 같다.
